Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually indicate when the form buttons get focus #3335

Merged
merged 1 commit into from
Aug 3, 2023

Conversation

aaron-collier
Copy link
Contributor

@aaron-collier aaron-collier commented Aug 3, 2023

Why was this change made? 🤔

Refs #3170 - this adds a visual indication when a button has gained focus using tab navigation.

WGAG Recommendation:

Ensure that when actionable elements receive focus, that it appears on screen and that a visible focus
indicator is present. Focus can be indicated in different ways, including change of background, lightness,
border, outline, underline, and other visual methods. Avoid the use of the "outline: none" CSS property.
As of WCAG 2.1, a custom focus indicator should have a minimum contrast ratio of 3:1 against the background.

How was this change tested? 🤨

⚡ ⚠ If this change involves consuming from or writing to another service (or shared file system), run integration test create_object_h2_spec.rb and/or test manually in [stage|qa] environment, in addition to specs. ⚡

Does your change introduce accessibility violations? 🩺

⚡ ⚠ Please ensure this change does not introduce accessibility violations (at the WCAG A or AA conformance levels); if it does, include a rationale. See the Infrastructure accessibility guide for more detail. ⚡

@@ -49,7 +49,7 @@
}
},
"true", "false" %>
<div class="slider round">
<div class="slider round" tabindex="0">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: this allows the auto-citation slider to gain tab focus.

@mjgiarlo mjgiarlo merged commit c74f072 into main Aug 3, 2023
@mjgiarlo mjgiarlo deleted the t3170-form-button-visual-focus branch August 3, 2023 17:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants