[Issue #1885]: fix heading level a11y issue #1923
Conversation
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🟢 | Statements | 83.89% | 854/1018 |
| 🟡 | Branches | 64.9% | 220/339 |
| 🟡 | Functions | 75.34% | 165/219 |
| 🟢 | Lines | 83.89% | 797/950 |
Test suite run success
166 tests passing in 55 suites.
Report generated by 🧪jest coverage report action from c44f8d0
| @@ -68,7 +68,7 @@ const SearchOpportunityStatus: React.FC<SearchOpportunityStatusProps> = ({ | |||
|
|
|||
| return ( | |||
| <> | |||
| <h4 className="margin-bottom-1">Opportunity status</h4> | |||
| <h2 className="margin-bottom-1">Opportunity status</h2> | |||
There was a problem hiding this comment.
Does this make the heading larger? If so, you can apply utility classes so the h4 is h2-sized
There was a problem hiding this comment.
@andycochran - this did become slightly larger to h2 size - are you suggesting using a div with a utility class that makes it h2 sized? We can't have the h4 tag anymore if we want to avoid the a11y flagged error
There was a problem hiding this comment.
Use the h2 (not a div) with font size utility classes to make it look like an h4
There was a problem hiding this comment.
Hmm. Brainstorming here…
We could use the same <h2 class="usa-accordion__heading"> so it matches the accordion headings. But that might be a hacky.
.usa-accordion__heading uses:
@include typeset($theme-accordion-font-family, $theme-body-font-size, 1);
…so we'd need to apply utility classes to make it match.
I think just <h2 class="margin-bottom-1 font-sans-md"> will do it.
There was a problem hiding this comment.
font-sans-xs is what was closest to an h4
| @@ -116,7 +116,7 @@ export function SearchFilterAccordion({ | |||
| content: getAccordionContent(), | |||
| expanded: false, | |||
| id: "funding-instrument-filter", | |||
| headingLevel: "h4", | |||
| headingLevel: "h2", | |||
There was a problem hiding this comment.
This did not increase the size surprisingly - there's some other css that overrides this I think - I didn't investigate further since it just works here
There was a problem hiding this comment.
Oh! Yeah, this component lets you use whatever heading level you want, but styles them all the same (as consistently-sized accordion headings)
Summary
Fixes #1885
Time to review: 2 min
Changes proposed
Context for reviewers
Lighthouse recommended this article about setting heading levels : https://dequeuniversity.com/rules/axe/4.8/heading-order
Opportunity status becomes larger in the new, but the accordion filter aren't really impacted by the heading level (even though they changed from h4 to h2):