diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md index 725140576147..bbf6d85a6fa9 100644 --- a/site/content/docs/5.3/components/pagination.md +++ b/site/content/docs/5.3/components/pagination.md @@ -52,6 +52,8 @@ Looking to use an icon or symbol in place of text for some pagination links? Be Pagination links are customizable for different circumstances. Use `.disabled` for links that appear un-clickable and `.active` to indicate the current page. +`aria-current="page"` should be put on the link element for the assistive technology to recognize the active element. + While the `.disabled` class uses `pointer-events: none` to _try_ to disable the link functionality of ``s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, you should always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality. {{< example >}} @@ -61,8 +63,8 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the Previous
  • 1
  • -
  • - 2 +
  • + 2
  • 3
  • @@ -72,7 +74,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the {{< /example >}} -You can optionally swap out active or disabled anchors for ``, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles. +You can optionally swap out disabled anchors for ``, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles. {{< example >}}
  • 1
  • -
  • - 2 +
  • + 2
  • 3
  • @@ -99,8 +101,8 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for {{< example >}}