Skip to content

Commit

Permalink
fix(pagination): support accessible markup (#1870)
Browse files Browse the repository at this point in the history 
* fix(pagination): support accessible markup

[STACKS-687](https://stackoverflow.atlassian.net/browse/STACKS-687)

* Remove reference to Stacks 2.6.1 in markup deprecation notice

* Update docs with review suggestions

Addresses review: #1870 (review)
  • Loading branch information
@dancormier
dancormier authored Dec 12, 2024
1 parent 456693d commit 001a452
Show file tree
Hide file tree
Showing 16 changed files with 216 additions and 11 deletions.
115 changes: 114 additions & 1 deletion docs/product/components/pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,119 @@
{% header "h2", "Example" %}
<div class="stacks-preview">
{% highlight html %}
<nav class="s-pagination" aria-label="pagination">
<ul>
<li>
<a class="s-pagination--item is-selected" href="…" aria-current="page">
<span class="v-visible-sr">page</span>
1
</a>
</li>
<li>
<a class="s-pagination--item" href="…">
<span class="v-visible-sr">page</span>
2
</a>
</li>
<li>
<a class="s-pagination--item" href="…">
<span class="v-visible-sr">page</span>
3
</a>
</li>
<li>
<a class="s-pagination--item" href="…">
<span class="v-visible-sr">page</span>
4
</a>
</li>
<li>
<a class="s-pagination--item" href="…">
<span class="v-visible-sr">page</span>
5
</a>
</li>
<li>
<span class="s-pagination--item s-pagination--item__clear">…</span>
</li>
<li>
<a class="s-pagination--item" href="…">
<span class="v-visible-sr">page</span>
122386
</a>
</li>
<li>
<a class="s-pagination--item" href="…">
Next
<span class="v-visible-sr">page</span>
</a>
</li>
</ul>
</nav>
{% endhighlight %}
<div class="stacks-preview--example overflow-x-auto">
<nav class="s-pagination" role="presentation">
<ul>
<li>
<a class="s-pagination--item is-selected" href="#" aria-current="page">
<span class="v-visible-sr">page</span>
1
</a>
</li>
<li>
<a class="s-pagination--item" href="#">
<span class="v-visible-sr">page</span>
2
</a>
</li>
<li>
<a class="s-pagination--item" href="#">
<span class="v-visible-sr">page</span>
3
</a>
</li>
<li>
<a class="s-pagination--item" href="#">
<span class="v-visible-sr">page</span>
4
</a>
</li>
<li>
<a class="s-pagination--item" href="#">
<span class="v-visible-sr">page</span>
5
</a>
</li>
<li>
<span class="s-pagination--item s-pagination--item__clear">…</span>
</li>
<li>
<a class="s-pagination--item" href="#">
<span class="v-visible-sr">page</span>
122386
</a>
</li>
<li>
<a class="s-pagination--item" href="#">
Next
<span class="v-visible-sr">page</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>

<section class="stacks-section">
{% header "h2", "Legacy example" %}

{% tip, "warning", "mb24" %}
<strong>Note:</strong>The below markup has been deprecated due to insufficient accessibility. Please use the new markup above.
{% endtip %}

<div class="stacks-preview">
{% highlight html %}
<div class="s-pagination">
<a class="s-pagination--item is-selected" href="…" aria-current="page">
<span class="v-visible-sr">page</span>
Expand Down Expand Up @@ -64,7 +177,7 @@
</div>
{% endhighlight %}
<div class="stacks-preview--example overflow-x-auto">
<div class="s-pagination">
<div class="s-pagination" role="presentation">
<a class="s-pagination--item is-selected" href="#" aria-current="page">
<span class="v-visible-sr">page</span>
1
Expand Down
31 changes: 24 additions & 7 deletions lib/components/pagination/pagination.a11y.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,32 @@ describe("pagination", () => {
baseClass: "s-pagination",
children: {
default: `
<a class="s-pagination--item" href="#">Prev</a>
<a class="s-pagination--item" href="#">1</a>
<span class="s-pagination--item is-selected" aria-current="page">2</span>
<a class="s-pagination--item" href="#">3</a>
<span class="s-pagination--item s-pagination--item__clear">…</span>
<a class="s-pagination--item" href="#">100</a>
<a class="s-pagination--item" href="#">Next</a>
<ul>
<li>
<a class="s-pagination--item" href="#">Prev</a>
</li>
<li>
<a class="s-pagination--item" href="#">1</a>
</li>
<li>
<span class="s-pagination--item is-selected" aria-current="page">2</span>
</li>
<li>
<a class="s-pagination--item" href="#">3</a>
</li>
<li>
<span class="s-pagination--item s-pagination--item__clear">…</span>
</li>
<li>
<a class="s-pagination--item" href="#">100</a>
</li>
<li>
<a class="s-pagination--item" href="#">Next</a>
</li>
</ul>
`,
},
tag: "nav",
additionalAssertions: [WCAGNonTextContrast],
});
});
18 changes: 15 additions & 3 deletions lib/components/pagination/pagination.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
.s-pagination {
// reset list styles on ul.s-pagination and .s-pagination ul
ul,
ul& {
list-style: none;
margin: 0;
padding: 0;
}

& &--item {
--_pa-item-bg: transparent;
--_pa-item-bc: var(--bc-darker);
Expand Down Expand Up @@ -54,12 +62,16 @@
color: var(--_pa-item-fc);

border-radius: var(--br-sm);
display: inline-block;
font-size: var(--fs-body1);
line-height: var(--lh-xl);
padding: 0 var(--su8);
}

display: flex;
flex-wrap: wrap;
gap: var(--su4);
&,
ul {
display: flex;
flex-wrap: wrap;
gap: var(--su4);
}
}
27 changes: 27 additions & 0 deletions lib/components/pagination/pagination.visual.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,32 @@ describe("pagination", () => {
baseClass: "s-pagination",
children: {
default: `
<ul>
<li>
<a class="s-pagination--item" href="#">Prev</a>
</li>
<li>
<a class="s-pagination--item" href="#">1</a>
</li>
<li>
<span class="s-pagination--item is-selected" aria-current="page">2</span>
</li>
<li>
<a class="s-pagination--item" href="#">3</a>
</li>
<li>
<span class="s-pagination--item s-pagination--item__clear">…</span>
</li>
<li>
<a class="s-pagination--item" href="#">100</a>
</li>
<li>
<a class="s-pagination--item" href="#">Next</a>
</li>
</ul>
`,
// legacy test for deprecated pagination component markup
legacy: `
<a class="s-pagination--item" href="#">Prev</a>
<a class="s-pagination--item" href="#">1</a>
<span class="s-pagination--item is-selected" aria-current="page">2</span>
Expand All @@ -16,6 +42,7 @@ describe("pagination", () => {
<a class="s-pagination--item" href="#">Next</a>
`,
},
tag: "nav",
template: ({ component, testid }) => html`
<div class="d-inline-block p8" data-testid="${testid}">
${component}
Expand Down
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-light-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-light-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-light-legacy.ico
View file
Git LFS file not shown

0 comments on commit 001a452

Please sign in to comment.