Fix: Focus accessibility issue for CategoryListItem component's Anchor #34
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
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/lorenalgm/dev/6t26tgxjc [Deployment for f1a4182 failed] |
…ocus NOTE: this commit helps fix #33 -Anchor now has a white outline to guarantee compliance with a11y (accessibility) guidelines. -Moved the margin from the inner content (Tech) to the outer content (Anchor). -Altered the transition CSS property in Tech to explicitly define that the transition will only happen to the background color. This prevents a transition from triggering on a non desirable circunstance. -According to the WCAG 2.1 guideline 2.4.7 the Focus must be Visible. -Why? Because it helps people with motor impairments and people with attention limitation or short term memory limitations understand visually determine the component on which keyboard operations will interact at any point in time.
magdielndantas
approved these changes
Sep 27, 2020
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.
Commit message
NOTE: this commit helps fix #33
-Anchor now has a white outline to guarantee compliance with a11y (accessibility)
guidelines.
-Altered the transition CSS property in Tech to explicitly define that the transition
will only happen to the background color. This prevents a transition from triggering on
a non desirable circumstance such as now with the outline.
-According to the WCAG 2.1 guideline 2.4.7 the Focus must be Visible.
-Why? Because it helps people with motor impairments and people with
attention limitation or short term memory limitations understand visually
determine the component on which keyboard operations will interact at any
point in time.
Category List Item Anchor's focus before the fix
When the user utilizes tab on the keyboard he does not have any visual indicator that the CategoryListItem component's anchor is focused.
Category List Item bug
To solve the issue we can give a white outline to category-list-item's anchor when it is focused but this generates a bug: there is empty space between the anchor's outline and its child div.
The empty space is caused because the margin was set on the child div instead of the anchor. I solved this by moving the margin to the anchor element and setting the display to inline-block so margins can affect it.
Coincidentally it also makes sense to set the margin on the outer element instead of the inner element as it reduces the possibility of collapsed margin happening between the Anchor and the child div in the future.
Category List Item Anchor's focus after the fix
When the user utilizes tab on the keyboard he has a white outline as a visual indicator that the CategoryListItem component's anchor is focused.