Refactor/pagination a11y

[ChrisPaj]

• @media screen and (max-width: 639px): width 100%
• no doubled button borders
• introduce prop 'small'
• button:focus with visible outlines
• adapt font size to 12px
• introduce button:active state

[render]

Your Render PR Server URL is https://scale-storybook-staging-pr-516.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-c498mbs6fj33r8n61i20.

[acstll]

Thanks @ChrisPaj

I left some comments 🤓

Please make sure all checks pass (prettier is failing because of the index.html, but you can leave that one alone).

Also, we don't want to merge this in main yet, we need the a11y approval first. So we keep the branch, and keep it up-to-date with main so it's easier to merge when the time comes.

[acstll]

Thank you @ChrisPaj, one more small thing 🙏

[acstll]

@ChrisPaj the prettier check is not passing… it complaints about the index.html file, maybe you can try running yarn format once more?

[AnnaKuchtin]

In HCM the icons are not being displayed anymore 🙈

[timheiler-ico]

we are not using scale icons for next / prev?
Icon / Navigation / Right
Icon / Navigation / Left
would be great?

[timheiler-ico]

• icons on mobile: 16x16 px (like desktop)
• total mobile navigation height: 80px (40px top, 40px bottom part)

[acstll]

we are not using scale icons for next / prev?
Icon / Navigation / Right
Icon / Navigation / Left
would be great?

I left them all inlined because they behave differently in HCM, would it be possible to add the other "double arrow" icons added to the library?

I did reduce the size of the inlined svgs to match the 16 size of the scale-icon icons…

[acstll]

We're sending it out and closing for now until we get more feedback.

(The visual tests need to be updated!)

[render]

Your Render PR Server URL is https://scale-storybook-staging-pr-516.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-c4k9i84objd2e88g9i50.

[acstll]

The visual tests need to be updated.