In Identity UI, "Logout" button does not show focus state

[SteveSandersonMS]

This was reported as an accessibility issue at https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1162890

In Logout.cshtml, the logout button is defined as:

<button type="submit" class="nav-link btn btn-link text-dark">Click here to Logout</button>

The combination of nav-link with btn-link unfortunately has the bad behavior that it doesn't display any focus indication when focused using the keyboard. nav-link tries to set a text-underline style when focused, but btn-link overrides that and sets text-decoration to none in all cases.

Some other combination of styles should be used. Or it would be possible to fix it by defining some custom CSS that draws a focus highlight around this element when focused, but that would be less desirable because where possible we want the styles to come from Bootstrap, not custom overrides.

[SteveSandersonMS]

In case we need to fix this for 5.0, I suggest adding the following custom CSS:

.btn-link.nav-link:focus {
  outline: black auto 1px;
}

[blowdart]

@HaoK We added this recently didn't way? Can we look at a different combination of bootstrap styles, rather than custom CSS?

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.