[Pagination]: improve order of select labeling for screen readers

[laurenmrice]

Acceptance criteria

From Michael Gower as part of omnibus website doc issue #3238

Pagination a11y issues

Labeling

• The labeling is not great for a screen reader, and I think there could be ways of making it better. The simplest is:
• "Page: [12 of 40] v" instead of "[12] v of 40 pages"
• I've used the "[ ] v" to represent where the input and down chevron is/could be. That would need to be tested, but with zero real difference to a sighted user could likely be a much better screen reader or magnified result. Note that this also works when the unknown variant is enabled

• Speaking of putting "Page" in front of the right-side input, almost all the variations in Figma already show that, so it would result in a more consistent layout

---

Other dev improvements to consider There are more holistic changes that could be made, but this would be a pretty easy one to do.

• The current design also requires you to do something with the 'orphan' text when it comes to building a label. At the moment, Carbon has used a hidden aria label that is populated based on values on screen, but I think an aria-describedby is more elegant and also better supports internationalization.

<label for="cds-pagination-select-id-5-right" class="cds--label cdes--visually hidden">Page number, of 6 pages</label>

• They could just take the select itself and use aria-describedby to link it with an ID they assign to

<span class"cds--pagination__text">of 6 pages</span>

• The speech output with Jaws is much smoother, IMO.

• I've made a small recording of current and improved screen reader behavior. If combined with the above suggestion on labeling changes, this would result in real improvement.

• The chunk of text after the first input ("1 to 10 of 103 items" in the image above) should be tested as a live region. The advantages of this: when a user incremented the prior or next pages, or when a user changed the number of records shown OR potentially when the filtering was altered, this would be announced by the screen reader. Could be VERY useful.

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.