Do not remove focus outline from disabled link buttons in forced colors mode #2265
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Wondering if we should also deprecate the Styling link buttons to look disabled without being able to effectively make them non-interactive and non-focusable seems like a bad idea generally. |
|
Written up an issue to remove the ability to style link buttons as disabled: #2271 |
|
@36degrees Can you add this to the changelog and tag the issue to the [NEXT] release milestone? |
36degrees
changed the title
SortSite flags this as a potential issue, referencing WCAG 2.0 F78 [1]: > The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline. Adding the `--disabled` modifier to link buttons (`<a>` elements styled as buttons) does not remove them from the tab index or make them non-interactive. From testing, they are still focusable and retain the rest of the focus state, so avoid trying to remove the outline. This change should not effect buttons, as disabled buttons are not focusable and so the focus pseudo-selector should never apply to them. [1]: https://www.w3.org/TR/WCAG20-TECHS/F78.html
36degrees
force-pushed
the
disabled-link-button-focus-outline
branch
from
bdf721c to
d0f6f08
Compare
vanitabarrett
approved these changes
Jul 9, 2021
EoinShaughnessy
changed the title
|
Have changed "Don't" in title to "Do not." We'll be linking to this PR from our next release notes and many users have difficulties with negative contractions. |
EoinShaughnessy
changed the title
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SortSite flags this as a potential issue, referencing WCAG 2.0 F78:
We apply a 3px transparent outline to focused buttons, which becomes the visible focus indicator in forced color mode when the other focus state changes to the background and box shadow are not visible.
Adding the
--disabledmodifier to link buttons (<a>elements styled as buttons) does not remove them from the tab index or make them non-interactive. They are still focusable and outside of forced color mode retain the rest of the focus state. Removing the outline means that users in High Contrast Mode who focus the 'disabled' link button will not have a visible focus indicator.This change should not affect buttons, as disabled buttons are not focusable and so the
:focuspseudo-selector should never apply to them.Outside of forced color mode there should be no visible change, as the outline is transparent.
Before
http://govuk-frontend-review.herokuapp.com/components/button/link-disabled/preview
After
https://govuk-frontend-pr-2265.herokuapp.com/components/button/link-disabled/preview
Fixes #2127