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

• 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

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

Live previews

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

Related issues