Austenem/Accessibility updates #3648
Open
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
| @@ -72,12 +74,13 @@ export default function CollapsibleDetailPageSection({ | |||
| }} | |||
| ml="auto" | |||
| className="accordion-section-action" | |||
| sx={{ position: 'absolute', right: 0, top: 0 }} | |||
There was a problem hiding this comment.
This is a creative workaround to the issue!
A minor nitpick:
- the actions are very slightly misaligned relative to the accordion heading; could we adjust the
topvalue accordingly?- Local:
- Prod:
- Local:
Behaviorally it matches, so this should be just a minor top adjustment.
There was a problem hiding this comment.
Good catch! Should be aligned now:
| @@ -69,7 +69,7 @@ function TooltipToggleButton({ | |||
|
|
|||
| return ( | |||
| <Tooltip title={tooltipTitle}> | |||
| <span> | |||
| <span role="tooltip"> | |||
There was a problem hiding this comment.
I'm not sure this is the most appropriate role for the wrapper of the tooltip anchor, since the MDN example has the tooltip role on the div with the tooltip contents, rather than the anchor: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
Maybe we could use useId to generate a unique tooltip ID, pass it to Tooltip as the id, and use the aria-describedby prop on the span or button instead?
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.
Summary
Resolves accessibility issues related to arias and interactive controls throughout the portal.
Design Documentation/Original Tickets
CAT-1027: Certain ARIA roles must contain particular children
CAT-1056: Ensure interactive controls are not nested
CAT-1058: Elements must only use permitted ARIA attributes
CAT-1059: Ensure role attribute has an appropriate value for the element
Testing
Tested that each issue was resolved using Axe Devtools on all portal pages.
Screenshots/Video
No significant visual/behavioral changes should be present. One exception is the placeholder text added to the search bar on search pages, as per discussion with @tsliaw.
Checklist
CHANGELOG-your-feature-name-here.mdis present in the root directory, describing the change(s) in full sentences.Additional Notes
Two instances of CAT-1056 (Ensure interactive controls are not nested) could not be resolved.
The first is present on the homepage and is the result of the Hero component used there - the interactive controls are inherent to the design, and as the links present in the Hero are available in multiple other locations, this will not be altered.
The second is present on multiple pages and could not be resolved as it is inherent to the MUI Checkbox component (related thread). This issue is present on the following pages that use this component: