Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit cd2c041

Browse files
ArtBlueArtBlue
authored
fix(table): a11y fixes for table loading state (#2611)
1 parent 7351742 commit cd2c041

File tree

3 files changed

+120
-80
lines changed

3 files changed

+120
-80
lines changed

‎.changeset/tough-jobs-melt.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
fix(table): a11y fixes for table loading state

‎src/routes/_index/component/table/+page.marko‎

Lines changed: 73 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2257,7 +2257,32 @@ import imgLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
22572257
</p>
22582258

22592259
<p>
2260-
Additionally, in the loading state, the module should be inaccessible to the user. This can be achieved by setting <span class="highlight">tabindex="-1"</span> to the module container, and adding the <span class="highlight">inert</span> attribute to the <span class="highlight">table</span> inside the module. Since <span class="highlight">inert</span> is not fully supported in older browsers, it is recommended to either use a polyfill or use <span class="highlight">JavaScript</span> to disable all interactive elements inside the table when in loading state. Elements that support <span class="highlight">disabled</span> should be disabled. Anchors should have their <span class="highlight">href</span> attributes removed.
2260+
Additionally, in the loading state, the module should be inaccessible to the user. This can be achieved by adding the <span class="highlight">inert</span> attribute to the <span class="highlight">&lt;table&gt;</span> as well as <highlight>aria-hidden="true"</highlight>. Since <span class="highlight">inert</span> is not fully supported in older browsers, it is recommended to either use a polyfill or use <span class="highlight">JavaScript</span> to disable all interactive elements inside the table when in loading state. Elements that support <span class="highlight">disabled</span> should be disabled. Anchors should have their <span class="highlight">href</span> attributes removed.
2261+
</p>
2262+
2263+
<p>
2264+
<section
2265+
class="section-notice"
2266+
role="region"
2267+
aria-label="Information"
2268+
aria-roledescription="Notice"
2269+
>
2270+
<div class="section-notice__header" id="section-notice-information">
2271+
<svg
2272+
class="icon icon--16 icon--information-filled"
2273+
height="16"
2274+
width="16"
2275+
aria-label="Information"
2276+
>
2277+
<use href="#icon-information-filled-16" />
2278+
</svg>
2279+
</div>
2280+
<div class="section-notice__main">
2281+
<p>
2282+
Anchors that need to have their <highlight>href</highlight> attributes removed during loading, may require those href attributes to be restored once the loading state is done. For example, table head anchors that do server-side sorting/filtering. A good way to make those links inaccessible is to rename <highlight>href</highlight> to some other attribute, such as <highlight>data-href</highlight> during loading, and then revert them all back to <highlight>href</highlight> when loading state is complete.
2283+
</p>
2284+
</div>
2285+
</section>
22612286
</p>
22622287

22632288
<p>
@@ -2271,13 +2296,13 @@ import imgLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
22712296
</p>
22722297

22732298
<p>
2274-
The loading state should be displayed until the data is fully loaded. In addition to the loading state being set on the table, a progress bar expressive should be added to relay the loading state both visually and for screen readers. The live examples that follow use <span class="highlight">aria-live="off"</span> to prevent the status element from proactively announcing new content. This is only for demo purposes, so that this documentation page does not overwhelm the viewer with example status updates. The <span class="highlight">aria-live</span> override should not be included in implementations of this pattern.
2299+
The loading state should be displayed until the data is fully loaded. In addition to the loading state being set on the table, a progress bar expressive should be added to relay the loading state both visually and for screen readers. The progress bar expressive should be placed inside an a live region, such as <highlight>&lt;div role="status" aria-live="polite"&gt;&lt;/div&gt;</highlight>.
22752300
</p>
22762301

22772302
<div class="demo">
22782303
<div class="demo__inner">
2279-
<div class="table table--loading-state" role="group" aria-label="Video games for sale" tabindex="-1">
2280-
<table inert>
2304+
<div class="table table--loading-state" role="group" aria-label="Video games for sale" tabindex="0">
2305+
<table aria-hidden="true" inert>
22812306
<thead>
22822307
<tr>
22832308
<th class="table-cell" aria-sort="descending">
@@ -2532,25 +2557,27 @@ import imgLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
25322557
</tr>
25332558
</tbody>
25342559
</table>
2535-
<div class="progress-bar-expressive" tabindex="0" aria-live="off">
2536-
<div
2537-
role="progressbar"
2538-
aria-label="Loading..."
2539-
class="progress-bar-expressive__progress"
2540-
>
2541-
<div class="progress-bar-expressive__lines">
2542-
<div class="progress-bar-expressive__line"></div>
2543-
<div class="progress-bar-expressive__line"></div>
2544-
<div class="progress-bar-expressive__line"></div>
2545-
<div class="progress-bar-expressive__line"></div>
2546-
<div class="progress-bar-expressive__line"></div>
2547-
<div class="progress-bar-expressive__line"></div>
2548-
<div class="progress-bar-expressive__line"></div>
2549-
<div class="progress-bar-expressive__line"></div>
2550-
<div class="progress-bar-expressive__line"></div>
2551-
<div class="progress-bar-expressive__line"></div>
2552-
<div class="progress-bar-expressive__line"></div>
2553-
<div class="progress-bar-expressive__line"></div>
2560+
<div role="status" aria-live="polite">
2561+
<div class="progress-bar-expressive">
2562+
<div
2563+
role="progressbar"
2564+
aria-label="Loading..."
2565+
class="progress-bar-expressive__progress"
2566+
>
2567+
<div class="progress-bar-expressive__lines">
2568+
<div class="progress-bar-expressive__line"></div>
2569+
<div class="progress-bar-expressive__line"></div>
2570+
<div class="progress-bar-expressive__line"></div>
2571+
<div class="progress-bar-expressive__line"></div>
2572+
<div class="progress-bar-expressive__line"></div>
2573+
<div class="progress-bar-expressive__line"></div>
2574+
<div class="progress-bar-expressive__line"></div>
2575+
<div class="progress-bar-expressive__line"></div>
2576+
<div class="progress-bar-expressive__line"></div>
2577+
<div class="progress-bar-expressive__line"></div>
2578+
<div class="progress-bar-expressive__line"></div>
2579+
<div class="progress-bar-expressive__line"></div>
2580+
</div>
25542581
</div>
25552582
</div>
25562583
</div>
@@ -2559,8 +2586,8 @@ import imgLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
25592586
</div>
25602587

25612588
<highlight-code type="html">
2562-
<div class="table table--loading-state" role="group" aria-label="Video games for sale" tabindex="-1" inert>
2563-
<table>
2589+
<div class="table table--loading-state" role="group" aria-label="Video games for sale" tabindex="0">
2590+
<table aria-hidden="true" inert>
25642591
<thead>
25652592
<tr>
25662593
<th class="table-cell" aria-sort="descending">
@@ -2687,25 +2714,27 @@ import imgLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
26872714
<puesdo-code-table-tr />
26882715
</tbody>
26892716
</table>
2690-
<div class="progress-bar-expressive">
2691-
<div
2692-
role="progressbar"
2693-
aria-label="Loading..."
2694-
class="progress-bar-expressive__progress"
2695-
>
2696-
<div class="progress-bar-expressive__lines">
2697-
<div class="progress-bar-expressive__line"></div>
2698-
<div class="progress-bar-expressive__line"></div>
2699-
<div class="progress-bar-expressive__line"></div>
2700-
<div class="progress-bar-expressive__line"></div>
2701-
<div class="progress-bar-expressive__line"></div>
2702-
<div class="progress-bar-expressive__line"></div>
2703-
<div class="progress-bar-expressive__line"></div>
2704-
<div class="progress-bar-expressive__line"></div>
2705-
<div class="progress-bar-expressive__line"></div>
2706-
<div class="progress-bar-expressive__line"></div>
2707-
<div class="progress-bar-expressive__line"></div>
2708-
<div class="progress-bar-expressive__line"></div>
2717+
<div role="status" aria-live="polite">
2718+
<div class="progress-bar-expressive">
2719+
<div
2720+
role="progressbar"
2721+
aria-label="Loading..."
2722+
class="progress-bar-expressive__progress"
2723+
>
2724+
<div class="progress-bar-expressive__lines">
2725+
<div class="progress-bar-expressive__line"></div>
2726+
<div class="progress-bar-expressive__line"></div>
2727+
<div class="progress-bar-expressive__line"></div>
2728+
<div class="progress-bar-expressive__line"></div>
2729+
<div class="progress-bar-expressive__line"></div>
2730+
<div class="progress-bar-expressive__line"></div>
2731+
<div class="progress-bar-expressive__line"></div>
2732+
<div class="progress-bar-expressive__line"></div>
2733+
<div class="progress-bar-expressive__line"></div>
2734+
<div class="progress-bar-expressive__line"></div>
2735+
<div class="progress-bar-expressive__line"></div>
2736+
<div class="progress-bar-expressive__line"></div>
2737+
</div>
27092738
</div>
27102739
</div>
27112740
</div>

‎src/sass/table/stories/table.loading.stories.js‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export default { title: "Skin/Table/Loading" };
22

33
export const base = () => `
44
<div class="table table--loading-state" role="group" aria-label="Video games for sale" tabindex="0">
5-
<table>
5+
<table aria-hidden="true" inert>
66
<thead>
77
<tr>
88
<th class="table-cell" aria-sort="descending">
@@ -257,13 +257,14 @@ export const base = () => `
257257
</tr>
258258
</tbody>
259259
</table>
260-
<div class="progress-bar-expressive" tabindex="0">
261-
<div
262-
role="progressbar"
263-
aria-label="Loading..."
264-
class="progress-bar-expressive__progress"
265-
>
266-
<div class="progress-bar-expressive__lines">
260+
<div role="status" aria-live="polite">
261+
<div class="progress-bar-expressive" tabindex="0">
262+
<div
263+
role="progressbar"
264+
aria-label="Loading..."
265+
class="progress-bar-expressive__progress"
266+
>
267+
<div class="progress-bar-expressive__lines">
267268
<div class="progress-bar-expressive__line"></div>
268269
<div class="progress-bar-expressive__line"></div>
269270
<div class="progress-bar-expressive__line"></div>
@@ -276,6 +277,7 @@ export const base = () => `
276277
<div class="progress-bar-expressive__line"></div>
277278
<div class="progress-bar-expressive__line"></div>
278279
<div class="progress-bar-expressive__line"></div>
280+
</div>
279281
</div>
280282
</div>
281283
</div>
@@ -284,7 +286,7 @@ export const base = () => `
284286

285287
export const compact = () => `
286288
<div class="table table--density-compact table--loading-state" role="group" aria-label="Video games for sale" tabindex="0">
287-
<table>
289+
<table aria-hidden="true" inert>
288290
<thead>
289291
<tr>
290292
<th class="table-cell" aria-sort="descending">
@@ -539,13 +541,14 @@ export const compact = () => `
539541
</tr>
540542
</tbody>
541543
</table>
542-
<div class="progress-bar-expressive" tabindex="0" aria-live="off">
543-
<div
544-
role="progressbar"
545-
aria-label="Loading..."
546-
class="progress-bar-expressive__progress"
547-
>
548-
<div class="progress-bar-expressive__lines">
544+
<div role="status" aria-live="polite">
545+
<div class="progress-bar-expressive" tabindex="0">
546+
<div
547+
role="progressbar"
548+
aria-label="Loading..."
549+
class="progress-bar-expressive__progress"
550+
>
551+
<div class="progress-bar-expressive__lines">
549552
<div class="progress-bar-expressive__line"></div>
550553
<div class="progress-bar-expressive__line"></div>
551554
<div class="progress-bar-expressive__line"></div>
@@ -558,6 +561,7 @@ export const compact = () => `
558561
<div class="progress-bar-expressive__line"></div>
559562
<div class="progress-bar-expressive__line"></div>
560563
<div class="progress-bar-expressive__line"></div>
564+
</div>
561565
</div>
562566
</div>
563567
</div>
@@ -566,7 +570,7 @@ export const compact = () => `
566570

567571
export const relaxed = () => `
568572
<div class="table table--density-relaxed table--loading-state" role="group" aria-label="Video games for sale" tabindex="0">
569-
<table>
573+
<table aria-hidden="true" inert>
570574
<thead>
571575
<tr>
572576
<th class="table-cell" aria-sort="descending">
@@ -821,25 +825,27 @@ export const relaxed = () => `
821825
</tr>
822826
</tbody>
823827
</table>
824-
<div class="progress-bar-expressive" tabindex="0" aria-live="off">
825-
<div
826-
role="progressbar"
827-
aria-label="Loading..."
828-
class="progress-bar-expressive__progress"
829-
>
830-
<div class="progress-bar-expressive__lines">
831-
<div class="progress-bar-expressive__line"></div>
832-
<div class="progress-bar-expressive__line"></div>
833-
<div class="progress-bar-expressive__line"></div>
834-
<div class="progress-bar-expressive__line"></div>
835-
<div class="progress-bar-expressive__line"></div>
836-
<div class="progress-bar-expressive__line"></div>
837-
<div class="progress-bar-expressive__line"></div>
838-
<div class="progress-bar-expressive__line"></div>
839-
<div class="progress-bar-expressive__line"></div>
840-
<div class="progress-bar-expressive__line"></div>
841-
<div class="progress-bar-expressive__line"></div>
842-
<div class="progress-bar-expressive__line"></div>
828+
<div role="status" aria-live="polite">
829+
<div class="progress-bar-expressive" tabindex="0">
830+
<div
831+
role="progressbar"
832+
aria-label="Loading..."
833+
class="progress-bar-expressive__progress"
834+
>
835+
<div class="progress-bar-expressive__lines">
836+
<div class="progress-bar-expressive__line"></div>
837+
<div class="progress-bar-expressive__line"></div>
838+
<div class="progress-bar-expressive__line"></div>
839+
<div class="progress-bar-expressive__line"></div>
840+
<div class="progress-bar-expressive__line"></div>
841+
<div class="progress-bar-expressive__line"></div>
842+
<div class="progress-bar-expressive__line"></div>
843+
<div class="progress-bar-expressive__line"></div>
844+
<div class="progress-bar-expressive__line"></div>
845+
<div class="progress-bar-expressive__line"></div>
846+
<div class="progress-bar-expressive__line"></div>
847+
<div class="progress-bar-expressive__line"></div>
848+
</div>
843849
</div>
844850
</div>
845851
</div>

0 commit comments

Comments
 (0)