Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(pagination): support accessible markup #1870

Merged
merged 3 commits into from
Dec 12, 2024
Merged

fix(pagination): support accessible markup #1870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69e7635
fix(pagination): support accessible markup
dancormier Dec 11, 2024
60849a1
Remove reference to Stacks 2.6.1 in markup deprecation notice
dancormier Dec 11, 2024
2604c4e
Update docs with review suggestions
dancormier Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 114 additions & 1 deletion docs/product/components/pagination.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Chromium/baseline/s-pagination-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-dark-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Firefox/baseline/s-pagination-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-dark-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
3 changes: 3 additions & 0 deletions screenshots/Webkit/baseline/s-pagination-light-legacy.ico
View file
Open in desktop
Git LFS file not shown
Loading