[terra-core] enhance Keyboard Focus styles to pass '2.4.11 Focus Visible'

[neilpfeiffer]

Feature Request

Description

WCAG 2.1 (Level AA) introduced criterion 2.4.11: Focus Visible (Enhanced) which raises the WCAG 2 (Level A) 2.4.7: Focus Visible criterion standard of when a user interface element displays a visible keyboard focus that it's color contrast ratio be at least 3:1 or thickness of at least 2 CSS pixels.

All interactive terra elements have a visible keyboard focus style present, but not tested to see if they meet automated AXE testing for the 2.4.7 / 2.4.11 criterion. All components in tera-core need to be audited and provide updated styling as needed, as well as adding any appropriate additional tests for confirmation of pass/fail.

.

Reference Context / Screenshots

Example: focus styling for terra-button does not meet the color contrast ratio or thickness rule when tested:

Example: focus styling for an Icon Button using the information icon:

Solution

Audit, Add testing, and UX to provide appropriate changes to all components in terra-core

Components affected:

• TODO: list out each component needing update here...

Related Issues

add related issue numbers

• terra-core #3168 (closed)
• terra-toolkit #443
• terra-clinical #705
• terra-framework #1262
• terra-application #93
• terra-core #3304 (closed)

[neilpfeiffer]

Keeping blocked on needing UX + A11Y input. Backlogging as future enhancement.

[neilpfeiffer]

Closing a duplicate issue terra-core #3304 (closed) and transferring the details to this issue as it's replacement.

[stale]

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.