Improve documentation pagination accessibility #26355

ngyikp · 2018-04-21T05:53:37Z

Fixes #22009:

~~Add rel="prev" and rel="next", also good for SEO!~~
Remove .sr-only span for previous/next page, there is already aria-label
Add aria-disabled="true" and aria-current="page"

Also fix the active state on the Sizing section, the current page number was using the disabled look, it should be the active look instead.

patrickhlauke · 2018-04-22T23:30:27Z

docs/4.1/components/pagination.md

@@ -15,36 +15,34 @@ In addition, as pages likely have more than one such navigation section, it's ad
 {% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination">
-    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+    <li class="page-item"><a class="page-link" href="#" rel="prev">Previous</a></li>


only information on these rel="..." attributes being of some use i came across in the past related to them being used on <link rel="..." ...> elements in the <head>. e.g. https://support.google.com/webmasters/answer/1663744?hl=en

if authors want to add this to their code, cool (assuming the attributes on actual links, rather than <link...> elements, does anything). but i don't think it's necessary for our example code

patrickhlauke · 2018-04-22T23:31:25Z

docs/4.1/components/pagination.md

    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
-    <li class="page-item"><a class="page-link" href="#">Next</a></li>
+    <li class="page-item"><a class="page-link" href="#" rel="next">Next</a></li>


patrickhlauke · 2018-04-22T23:31:34Z

docs/4.1/components/pagination.md


 {% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
-      <a class="page-link" href="#" aria-label="Previous">
+      <a class="page-link" href="#" rel="prev" aria-label="Previous">


patrickhlauke · 2018-04-22T23:31:41Z

docs/4.1/components/pagination.md

      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
-      <a class="page-link" href="#" aria-label="Next">
+      <a class="page-link" href="#" rel="next" aria-label="Next">


patrickhlauke · 2018-04-22T23:32:28Z

docs/4.1/components/pagination.md

@@ -61,16 +59,16 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
 {% capture example %}
 <nav aria-label="...">
  <ul class="pagination">
-    <li class="page-item disabled">
-      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    <li class="page-item disabled" aria-disabled="true">


would make more sense to add aria-disabled="true" to the actual link

patrickhlauke · 2018-04-22T23:35:43Z

docs/4.1/components/pagination.md

    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
-      <a class="page-link" href="#">Next</a>
+      <a class="page-link" href="#" rel="next">Next</a>


patrickhlauke · 2018-04-22T23:35:51Z

docs/4.1/components/pagination.md

-    <li class="page-item disabled">
-      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    <li class="page-item disabled" aria-disabled="true">
+      <a class="page-link" href="#" rel="prev" tabindex="-1">Previous</a>


patrickhlauke · 2018-04-22T23:35:58Z

docs/4.1/components/pagination.md

    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
-      <a class="page-link" href="#">Next</a>
+      <a class="page-link" href="#" rel="next">Next</a>


patrickhlauke · 2018-04-22T23:37:04Z

docs/4.1/components/pagination.md

@@ -82,19 +80,19 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 {% capture example %}
 <nav aria-label="...">
  <ul class="pagination">
-    <li class="page-item disabled">
+    <li class="page-item disabled" aria-disabled="true">


as there's nothing focusable nor operable inside here, aria-disabled is mostly useless here

patrickhlauke · 2018-04-22T23:37:12Z

docs/4.1/components/pagination.md

@@ -138,14 +142,14 @@ Change the alignment of pagination components with [flexbox utilities]({{ site.b
 {% capture example %}
 <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
-    <li class="page-item disabled">
-      <a class="page-link" href="#" tabindex="-1">Previous</a>
+    <li class="page-item disabled" aria-disabled="true">


would make more sense to add aria-disabled="true" to the actual link

ngyikp · 2018-04-23T03:17:55Z

Feedback addressed, please take another look

I added rel="prev" and rel="next" because another framework added them, I can't find much blogs/sites suggesting to put them on <a> tag instead of <link> either, so yeah, let's remove them.

mdo · 2018-07-20T23:26:55Z

Punting on this for v4.2 since I'm unsure of its status and we're hoping to launch v4.1.3 next week for some timely quality of life improvements and bug fixes.

mdo · 2018-10-21T06:06:01Z

@patrickhlauke Can you review and see if this is mergeable?

patrickhlauke

LGTM

patrickhlauke

LGTM

patrickhlauke

LGTM

patrickhlauke · 2018-10-22T12:09:39Z

(crikey, apologies for the multiple messages...was trying to combat github's hickup this morning, and thought they hadn't actually gone through)

- Remove `.sr-only` span for previous/next page, there is already`aria-label` - Add `aria-disabled="true"` and `aria-current="page"`

site/docs/4.1/components/pagination.md

…lity

Should be like that

pepelsbey · 2020-08-12T11:41:37Z

@patrickhlauke, I know this thing is quite outdated, but still :) Wouldn’t it be easier to solve by removing a single href attribute instead of adding a bunch of ARIA with some extra CSS? I mean:

<li><a>1</a></li>
<li><a href>2</a></li>
<li><a href>3</a></li>

XhmikosR requested a review from patrickhlauke April 22, 2018 07:31

XhmikosR added docs v4 labels Apr 22, 2018

patrickhlauke reviewed Apr 22, 2018

View reviewed changes

ngyikp force-pushed the improve-documentation-pagination-accessibility branch from 5babc0e to 944a05c Compare April 23, 2018 03:14

XhmikosR assigned patrickhlauke May 25, 2018

patrickhlauke approved these changes Oct 22, 2018

View reviewed changes

Improve pagination's documentation accessibility.

29783e0

- Remove `.sr-only` span for previous/next page, there is already`aria-label` - Add `aria-disabled="true"` and `aria-current="page"`

XhmikosR force-pushed the improve-documentation-pagination-accessibility branch from 944a05c to 29783e0 Compare October 22, 2018 12:20

XhmikosR previously requested changes Oct 22, 2018

View reviewed changes

site/docs/4.1/components/pagination.md Show resolved Hide resolved

Merge branch 'v4-dev' into improve-documentation-pagination-accessibi…

b22b971

…lity

mdo mentioned this pull request Oct 23, 2018

v4.2.0 shiplist #26952

Closed

XhmikosR merged commit 47ef0a8 into twbs:v4-dev Oct 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve documentation pagination accessibility #26355

Improve documentation pagination accessibility #26355

ngyikp commented Apr 21, 2018 •

edited

Loading

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

patrickhlauke Apr 22, 2018

ngyikp commented Apr 23, 2018

mdo commented Jul 20, 2018 •

edited

Loading

mdo commented Oct 21, 2018

patrickhlauke left a comment

patrickhlauke left a comment

patrickhlauke left a comment

patrickhlauke commented Oct 22, 2018

pepelsbey commented Aug 12, 2020

Improve documentation pagination accessibility #26355

Improve documentation pagination accessibility #26355

Conversation

ngyikp commented Apr 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngyikp commented Apr 23, 2018

mdo commented Jul 20, 2018 • edited Loading

mdo commented Oct 21, 2018

patrickhlauke left a comment

Choose a reason for hiding this comment

patrickhlauke left a comment

Choose a reason for hiding this comment

patrickhlauke left a comment

Choose a reason for hiding this comment

patrickhlauke commented Oct 22, 2018

pepelsbey commented Aug 12, 2020

ngyikp commented Apr 21, 2018 •

edited

Loading

mdo commented Jul 20, 2018 •

edited

Loading