pico

pico copied to clipboard

Describe the issue

First of all thank you so much for Pico, I love it!

According to the docs:

role="group" is used to stack children horizontally.

The examples there use a fieldset element, but the implicit role of fieldset is already group and a11y complains about a redundant role: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#technical_summary

This kind of issue might affect other elements too, I haven't checked.

Current Behavior

Explicitly specifying the default role of a fieldset element changes the styling.

Expected Behavior

It should not make a difference to the style whether the role of an element is implicit or explicit. I'm not sure what the best solution is, but maybe the default styling for a fieldset should be the group styling (ie horizontal), and the other styling (ie vertical) can be triggered by setting the role to none or presentation?

Reproduction URL

n/a

Environment

n/a

@willclarktech, thanks. What tool do you use to see some a11y complains? I can't see any in Chrome or with Visual Studio linting tools.

I would not remove role="group" now to avoid a breaking change. But eventually we could change the documentation to use a div instead of a fieldset. Not sure yet.

Hm, I thought it was standard a11y linting, but it seems this is raised by Svelte for VSCode: https://svelte.dev/docs/accessibility-warnings#a11y-no-redundant-roles

To be clear, this isn't a blocker for me. I just thought default roles were worth considering.

As role="group" can be used with a div, and we can't ship a breaking change, we should not change anything. Perhaps the documentation could be improved.

Hello,

As ARIA selectors are already in Pico, shouldn't we use aria-orientation ?