frontend: Fix a11y header for Configure Container Deployment#239
frontend: Fix a11y header for Configure Container Deployment#239vyncent-t wants to merge 1 commit intoAzure:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts the semantic heading level in the Deploy Application wizard to address a Lighthouse accessibility finding about non-sequential heading order in the “Configure Container Deployment” section.
Changes:
- Updates the “Configure Container Deployment” title
Typographyto override the rendered HTML element viacomponent="h2"while keepingvariant="h6"styling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <> | ||
| <Typography variant="h6" gutterBottom> | ||
| <Typography variant="h6" component="h2" gutterBottom> |
There was a problem hiding this comment.
component="h2" makes this heading a higher-level heading than the wizard’s page title (<Typography variant="h4">Deploy Application</Typography> in DeployWizard.tsx), which is likely to worsen heading hierarchy (h4 -> h2). If the goal is to avoid skipping levels while keeping the visual style, consider using a semantic level directly below the page title (e.g., component="h5" with variant="h6"), and align the other step headers similarly so the Configure/Deploy steps don’t remain h6 headings under an h4.
| <Typography variant="h6" component="h2" gutterBottom> | |
| <Typography variant="h6" component="h5" gutterBottom> |
Description
This PR fixes an a11y issue identified by Lighthouse where headings were not in sequential order for the "Configure Container Deployment" section.
The title component was visually styled as an h6 header with no larger headers present on the screen. This caused Lighthouse to flag improper heading hierarchy which can negatively impact screen reader navigation.
Related Issues
Closes #205
Related to #219
Changes Made
"Heading elements are not in a sequentially-descending order"
"Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies."
How to test: