frontend: Fix CPU resources & Memory Resources headers#259
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes accessibility issues related to heading hierarchy on the Create AKS Project workflow's "Compute Quota" tab. The changes ensure heading elements follow a sequentially-descending order, improving navigation for users relying on assistive technologies.
Changes:
- Added
component="h3"prop to Typography elements in ResourceCard to establish proper semantic heading structure - Resolves Lighthouse accessibility warnings about non-sequential heading order
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
skoeva
left a comment
skoeva
left a comment
There was a problem hiding this comment.
see #257 (review)
I also think for continued work on fixing these headers, they could all be committed in the same PR since they are all small & related changes
As per the audit effort, each of the issues sourced in #219 are individual wrongs that need correcting. They also require an organized paper trail, complete with sufficient testing instructions and a direct resolution. Plus, most of these issues are rooted in their own workflow, so the "how to test" section for a combined PR would be massive. I have already grouped together fixes that share a common workflow / view ( #246 and #259) to reduce review workload |
|
I think running lighthouse locally should be good enough to test - but also since these are all in-line changes related entirely to a11y we could probably group them together under that umbrella to merge all at once |
Description
This PR fixes a collection of a11y issues identified by Lighthouse where headings were not in sequential order for the Create AKS Project workflow "Compute Quota" tab.
The ResourceCard component is used for sub categories "CPU Resources" and "Memory Resource" on the "Compute Quota" tab of the Create AKS Project workflow. Both of the sub categories lack a proper semantic header order. This PR introduces a fix for both of these issues by adding a component prop to the titles.
Related Issues
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:
Images