docs(pagination): put current page on link element for a11y

[MarkoOleksiyenko]

Description

Update the Pagination examples to have the aria-current="page" on the link elements. Modify the part where the active pagination element can be replaced with span.

Motivation & Context

Focusable pagination element should be marked with aria-current for the SR to read it properly (NVDA works with the attribute set on li but JAWS needs it to be on element).

Active pagination element should not be a span as assistive technology won't read it as active page.

reference of the aria-current and recommended usage:

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#example
• https://a11ysupport.io/tests/tech__aria__aria-current#assertion-aria-aria-current_attribute-convey_value_page-html-a(href)_element
• https://a11ysupport.io/tests/html/aria/aria-current.html

Type of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Refactoring (non-breaking change)
• [ ] Breaking change (fix or feature that would change existing functionality)

Checklist

• [x] I have read the contributing guidelines
• [x] My code follows the code style of the project (using npm run lint)
• [x] My change introduces changes to the documentation
• [x] I have updated the documentation accordingly
• [] I have added tests to cover my changes
• [x] All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

[mdo]

@patrickhlauke Mind giving your guidance here?

[patrickhlauke]

only partially agree here. yes, aria-current should be on the links, not their parent list items.

however, it's the author's choice whether or not they want to have the current page's pagination as an active link or not. it's perfectly valid to decide not to make the current page's indicator a link at all. at that point, you can also omit the aria-current altogether.

[MarkoOleksiyenko]

Hello @patrickhlauke and @mdo, thank you for the replies :) Indeed it's the author's choice to put the pagination elements as link or not. The idea here is to provide an accessible example in Bootstrap that is aligned with major SRs (JAWS, NVDA) so that by default their code is a11y compliant.

[mdo]

Slating for v5.4.0 for me to revisit. This will need a rebase to bring it up to speed with the move to `.mdx.

[MarkoOleksiyenko]

Hello, @mdo , PR rebased and aligned with .mdx move :)

[mdo]

Wonderful! Pushed some copy edits to make the examples and optional span/a swap a little clearer. Re-slating for v5.3.6.

[patrickhlauke]

Indeed it's the author's choice to put the pagination elements as link or not. The idea here is to provide an accessible example in Bootstrap that is aligned with major SRs (JAWS, NVDA) so that by default their code is a11y compliant.

coming back in late to say: a page that chooses not to make the marker for the current page an actionable element is not somehow "non-compliant"