Skip to content

Commit

Permalink
refactor: replacing div with role=heading with native heading element…
Browse files Browse the repository at this point in the history 
… issue #5120 (#5189)

#### Details

Refactoring the codebase to use native heading elements instead of div elements with role = heading  as per issue #5120 

##### Motivation

addresses issue #5120 

##### Context

I replaced previously hardcoded levels with the corosponding h element directly and the previously dynamic levels with the element HeadingElementForLevel as this elemnt seems to serve the purpose of dynamically creating a native h-element of a given level.

I intentionally left out the tests (both e2e and unit) as I am not certain what the correct action is here. 

#### Pull request checklist

- [x] Addresses an existing issue: #5120 
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [n/a] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage`
- [ x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`.
- [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS
  • Loading branch information
@majaokholm
majaokholm authored Apr 6, 2022
1 parent 4189f1d commit 6bcef71
Show file tree
Hide file tree
Showing 20 changed files with 197 additions and 185 deletions.
45 changes: 25 additions & 20 deletions packages/report-e2e-tests/src/examples/axe-results-with-issues.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,11 @@
.results-container {
margin-top: 56px;
}
.results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
font-weight: unset;
margin-block: 0;
margin-inline: 0;
}
@media screen and (max-width: 640px) {
.outcome-past-tense {
display: none;
Expand Down Expand Up @@ -1836,7 +1841,7 @@
data-automation-id="rule-details-group"
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -1891,7 +1896,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-bypass"
class="collapsible-content"
Expand Down Expand Up @@ -1966,7 +1971,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -2021,7 +2026,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-color-contrast"
class="collapsible-content"
Expand Down Expand Up @@ -2507,7 +2512,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -2561,7 +2566,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-html-has-lang"
class="collapsible-content"
Expand Down Expand Up @@ -2634,7 +2639,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -2688,7 +2693,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-image-alt"
class="collapsible-content"
Expand Down Expand Up @@ -2962,7 +2967,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -3015,7 +3020,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-label"
class="collapsible-content"
Expand Down Expand Up @@ -3770,7 +3775,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -3825,7 +3830,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-landmark-one-main"
class="collapsible-content"
Expand Down Expand Up @@ -3897,7 +3902,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -3951,7 +3956,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-page-has-heading-one"
class="collapsible-content"
Expand Down Expand Up @@ -4023,7 +4028,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -4077,7 +4082,7 @@
></span
></span
></button
></div
></h3
><div
id="content-container-region"
class="collapsible-content"
Expand Down Expand Up @@ -4151,7 +4156,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="2"
><h2 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -4197,7 +4202,7 @@
></span
></span
></button
></div
></h2
><div
id="content-container-passed-checks-section"
class="collapsible-content"
Expand Down Expand Up @@ -4700,7 +4705,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="2"
><h2 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -4752,7 +4757,7 @@
></span
></span
></button
></div
></h2
><div
id="content-container-not-applicable-checks-section"
class="collapsible-content"
Expand Down
13 changes: 9 additions & 4 deletions packages/report-e2e-tests/src/examples/axe-results-without-issues.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,11 @@
.results-container {
margin-top: 56px;
}
.results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
font-weight: unset;
margin-block: 0;
margin-inline: 0;
}
@media screen and (max-width: 640px) {
.outcome-past-tense {
display: none;
Expand Down Expand Up @@ -1832,7 +1837,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="2"
><h2 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -1878,7 +1883,7 @@
></span
></span
></button
></div
></h2
><div
id="content-container-passed-checks-section"
class="collapsible-content"
Expand Down Expand Up @@ -3019,7 +3024,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="2"
><h2 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -3071,7 +3076,7 @@
></span
></span
></button
></div
></h2
><div
id="content-container-not-applicable-checks-section"
class="collapsible-content"
Expand Down
25 changes: 15 additions & 10 deletions packages/report-e2e-tests/src/examples/combined-results-with-baseline-aware-issues.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -702,6 +702,11 @@
.results-container {
margin-top: 56px;
}
.results-container .title-container :is(h1, h2, h3, h4, h5, h6) {
font-weight: unset;
margin-block: 0;
margin-inline: 0;
}
@media screen and (max-width: 640px) {
.outcome-past-tense {
display: none;
Expand Down Expand Up @@ -1787,7 +1792,7 @@
><div class="results-heading--pyS7R"><h2>Rules</h2></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand All @@ -1798,7 +1803,7 @@
>Failed rules (2)</span
></span
></button
></div
></h3
><div
id="content-container-combined-report-failed-section"
class="collapsible-content"
Expand All @@ -1808,7 +1813,7 @@
data-automation-id="rule-details-group"
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="4"
><h4 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -1865,7 +1870,7 @@
></span
></span
></button
></div
></h4
><div
id="content-container-bypass"
class="collapsible-content"
Expand Down Expand Up @@ -2166,7 +2171,7 @@
></div
><div
class="collapsible-container collapsible-rule-details-group--h0lvd collapsed"
><div class="title-container" role="heading" aria-level="4"
><h4 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand Down Expand Up @@ -2223,7 +2228,7 @@
></span
></span
></button
></div
></h4
><div
id="content-container-color-contrast"
class="collapsible-content"
Expand Down Expand Up @@ -2477,7 +2482,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand All @@ -2488,7 +2493,7 @@
>Passed rules (2)</span
></span
></button
></div
></h3
><div
id="content-container-pass-checks-section"
class="collapsible-content"
Expand Down Expand Up @@ -2636,7 +2641,7 @@
></div
><div class="result-section"
><div class="collapsible-container collapsed"
><div class="title-container" role="heading" aria-level="3"
><h3 class="title-container"
><button
class="collapsible-control"
aria-expanded="false"
Expand All @@ -2648,7 +2653,7 @@
>Not applicable rules (3)</span
></span
></button
></div
></h3
><div
id="content-container-inapplicable-checks-section"
class="collapsible-content"
Expand Down
Loading

0 comments on commit 6bcef71

Please sign in to comment.