feat(@clayui/css): Adds global classes to configure accessibility

[pat270]

This adds some global classes to configure accessibility outlined in https://issues.liferay.com/browse/LPS-178191. You add it to the body element.

class	description
c-prefers-link-underline	forces all anchor tags to be underlined unless it has role="button"
c-prefers-reduced-motion	removes all transitions and animations
c-prefers-letter-spacing-1	adds more spacing between characters
c-prefers-expanded-text	disables text-truncate
c-prefers-no-focus-outline	removes outline and box-shadows on focus

I have a doubt about the focus outline, c-prefers-no-focus-outline. A lot of stuff becomes unnavigable with keyboard due to no color/background-color change on focus. We rely on the outline to show focus for most areas. I feel like this will turn into an "accessibility" regression that will take some time to implement and will be fragile.

We have an old issue / pr, #5006, open where we explore implementing :focus-visible. In my opinion, we shouldn't offer Focus double border style in the accessibility menu and implement :focus-visible.

How it works: The browser doesn't show the focus outline when clicking with a mouse unless the user interacts with the site via keyboard. Then the focus outlines will show until page refresh.

Another alternative we have is the Clay utility c-inner. This is a hack that allows the focus to go to a span element on click preventing the outline being shown. But if you navigate by keyboard, the focus will travel to the correct elements.

fixes #5546

/cc @ethib137 @marcoscv-work @matuzalemsteles

[marcoscv-work]

Awesome!

[matuzalemsteles]

@pat270 I think we could try to merge the two here, for example using c-prefers-no-focus-outline to enable focus only visible via keyboard with the :focus-visible strategy we did in PR #5006, seems to be a more ideal solution in my view.

Just to remember that c-prefers-reduced-motion will not disable for all use cases, we need to configure the ClayProvider API in the root via JS to disable the animations that are done in JS.

[pat270]

@ethib137 @marcoscv-work here is what it looks like with focus visible on Chrome:

focus-visible-tab.mov

The focus outline is not shown on click only when you navigate with tab via keyboard. It works this way on Edge and FF. Safari has some inconsistencies, e.g., clicking a dropdown toggle shows focus outline. It might be due to our CSS, but I need to verify it.

@ethib137 regarding this issue #5006 (comment), we would need to supply a background-color or something to indicate focus without an outline.

Last thing, focus-visible does nothing for inputs. They will show the outline on click.

@marcoscv-work I was thinking if customers want the outline off by default, they could change the Sass variables $component-focus-box-shadow and $component-focus-inset-box-shadow. Those should cover most of the focus outlines in Clay or we can add a setting called $enable-focus-outlines where it would disable outlines across the project.

[ethib137]

Last thing, focus-visible does nothing for inputs. They will show the outline on click.

This seems appropriate to me. Inputs are a very different situation than buttons since a user will usually interact with them via the keyboard after clicking on them. As a result it's essential for a user to visually see where the focus is so they know where the characters they type will be added. The cursor alone is not very easy to see, when scanning inputs in a form.

[ethib137]

Is there anything else needed for this PR? It would be great if we could get it added to the next release today. Would that be possible? @pat270 @matuzalemsteles

[pat270]

@ethib137 I'm still working on the focus outline setting. I excluded it from this pr. I'll send another pull for the focus outline stuff.

[ethib137]

Thanks @pat270 , yeah it's better to get this merged sooner without focus outline if that is taking longer. 😄

[ethib137]

Thanks @pat270 , yeah it's better to get this merged sooner without focus outline if that is taking longer. 😄

[matuzalemsteles]

Ok, so will I go ahead and merge that PR for us to include in the release.