Accessibility issues

[darekkay]

🐛 Bug Report

The framework advertises "Accessibility" and WAI-ARIA compliance. While in general it looks quite good, I have found multiple a11y issues.

• While the focus ring looks great for input components, it's completely missing for buttons. Keyboard users won't know which element is currently focused.
• Some Button colors do not pass the contrast-ratio as per WCAG (e.g. the green Success button)
• Form inputs shouldn't use both aria-labelledby and aria-describedby if the content is equal. It will be announced twice via the screen reader.

[gregberge]

Hello @darekkay, thanks for reporting it! PR are welcome to fix this issues, else we will take care of fixing them as soon as possible!

[gregberge]

• Some Button colors do not pass the contrast-ratio as per WCAG (e.g. the green Success button)

Do you have an idea to fix it?

[darekkay]

Do you have an idea to fix it?

1. Find all contrast ratio issues using any tool ( e.g. Chrome DevTools Audit or pa11y)
2. Choose better values, either with https://contrast-ratio.com/ or again using the Chrome Dev Tools

[darekkay]

Here's a result from web.dev (which uses Google Lighthouse)

[gregberge]

Thanks, but the color generated is automatic. So I would need a function that uses the best approaching color to meet the contrast requirement.

[diegohaz]

Not sure if it helps, but we're experimenting with automatic generation of contrast colors in Reakit.

Some usage examples can be seen here and here.

There's a lot to improve though.

[gregberge]

Hello @diegohaz, thanks it is very interesting! Also the current approach need to be rethink with CSS Custom Properties. We will have to create a transformation and to pre-generate it, not at runtime.

[diegohaz]

Babel macros may help.

[linus-amg]

I would like to add 2 more bugs to this issue:

• when using SSR (for example with Next.js) the smooth-ui's useRandomId method is getting in the way of proper react component rehydration as soon as the developer starts implementing a form, since label and input ids get generated randomly, they differ on the serverside rendered and client side rendered component, so every component using a form needs to get re-rendered on the client, which is not beneficial when using SSR. (this is happening because unlinke babel-plugin-styled-components, smooth-ui does not generate those ids in some incremental fashion). To fix this issue it would be nice to let the developer customize the useRandomId method, or create a plugin which does what babel-plugin-styled-components does in the ssr: true regard.

• accessibility is broken because of former mentioned bug, the aria-labelledby value contains a different id (probably the serverside one? no idea.. actually) than the id of the label itself from the client-side, so there is no real connection made by aria-labelledby.

To be clear, those issues only happen when trying to use smooth-ui serverside and clientside at the same time, like when implementing something with Next.js, styled-components had the same issue and fixed it with the ssr: true option using the babel-plugin-styled-components.

relevant lines from babel-plugin-styled-components to fix that issue:

• https://github.com/styled-components/babel-plugin-styled-components/blob/f308f5c9db323712c502e21eaae579f76f3962cf/src/visitors/displayNameAndId.js#L160
• https://github.com/styled-components/babel-plugin-styled-components/blob/f308f5c9db323712c502e21eaae579f76f3962cf/src/visitors/displayNameAndId.js#L133
• https://github.com/styled-components/babel-plugin-styled-components/blob/f308f5c9db323712c502e21eaae579f76f3962cf/src/visitors/displayNameAndId.js#L125
• https://www.styled-components.com/docs/tooling#serverside-rendering

relevant lines from smooth-ui:

• smooth-ui/packages/shared/core/Form.js

  Line 25 in 2a9be0f

  const randomId = useRandomId(type)

• smooth-ui/packages/shared/core/util/hooks.js

  Line 3 in 48a23d3

  export function useRandomId(prefix) {

EDIT: I found that giving the <Form> element a custom id solves the problem, because then, no random id needs to get generated. 👍