Fix pagination: make previous and next buttons accessible

[MewenLeHo]

Related issues

Closes #2008

Description

We currently have an a11y problem in pagination related to WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (Level A) and WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence (Level A). It stated that all content must be available in text even when the CSS stylesheets are disabled.

If we disabled our stylesheets, the result is:

So:

• 'Previous' and 'Next' are not displayed at all (please note that it's the case for all examples, not only the current one)

It appears that the < and > are conveying informations so they need to be focusable even when CSS is off.

With this prototype:

Please note that I made the change only on the previous button to show the difference with the next button.

Motivation & Context

Improve a11y of pagination component

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2102--boosted.netlify.app/docs/5.3/components/pagination/#working-with-icons

Checklist

Contribution

• [x] I have read the contributing guidelines

Accessibility

• [x] My change follows accessibility good practices; I have at least run axe

Design

• [x] My change respects the design guidelines defined in Orange Design System
• [x] My change is compatible with responsive display

Development

• [x] My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• (NA) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• [x] My change introduces changes to the migration guide
• (NA) My new component is added in Storybook
• [x] My new component is compatible with RTL
• [x] Manually run BrowserStack tests
• [x] Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• [x] Code review
• [x] Design review
• [x] A11y review

After the merge

• [ ] Manually launch Percy tests

[netlify[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	eec7fb154a5eb389e02e9f3110d600a6a359b921
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6596c0010eca56000872b24f
😎 Deploy Preview	https://deploy-preview-2102--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MewenLeHo]

To do after prototype validation

• [x] Make the change everywhere
• [ ] Update migration guide

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[Aniort]

ok, fine

[Aniort]

ok, with the "title", i think, it's usable :)

[Franco-Riccitelli]

The pagination buttons with the icon only look good. The space between the buttons is ok for both variants. For the pagination buttons with the icons and labels, please follow the spacing guide attached. Thanks Next_Previous_Spacing.zip

[Franco-Riccitelli]

All looks good to me.