search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.42k stars 389 forks source link

<summary role=button> is not recommended by ARIA spec #398

Open shadow-identity opened 1 year ago

shadow-identity commented 1 year ago

Describe the issue

Pico.css documentation implements the "button" look of the <summary> element and recommends to use role=button property on the <summary> tag.

role=button can be used to turn <summary> into a button.

This behavior is explicitly not recommended by the W3C ARIA in HTML specification:

The following uses a role=button on a summary element. This is unnecessary and can result in cross-platform issues. For instance, preventing the element from correctly exposing its state, and forcing the role of button, when it might otherwise be exposed with a platform or browser specific role.

Current Behavior

role=button is recommended to use

Expected Behavior

The Pico.css documentation and implementation should not encourage users to use deprecated practices.

Reproduction URL

https://picocss.com/docs/accordions.html https://www.w3.org/TR/html-aria/#side-effects

valokammi commented 1 year ago

In PageSpeed Insights I can´t reproduce this in accordions, BUT in drop down there is a drop in accessibility for same reasons.

This is strange because when I use basic menu still accordions in page, NO reports of this and no accessibility drop.

Report says " Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children. Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions.

Affected lines: <details role="list"> and <summary role="button" aria-haspopup="listbox">"

and

" Values assigned to role="" are not valid ARIA roles. ARIA roles enable assistive technologies to know the role of each element on the web page. If the role values are misspelled, not existing ARIA role values, or abstract roles, then the purpose of the element will not be communicated to users of assistive technologies.

Affected lines: <details role="list">"

nagutabby commented 10 months ago

<details> includes implicit role=group semantics, and roles other than group is not recommended. https://www.w3.org/TR/html-aria/ In short, browsers may ignore roles other than group, such as list role in <details>.

lucaslarroche commented 7 months ago

I might close this issue because <details role="list"> has been removed with v2. https://picocss.com/docs/dropdown

role="button" is still used but we should avoid a breaking change.

shadow-identity commented 7 months ago

Major version update (1. -> 2.) means it has breaking changes, so I think it's perfect time to fix it exactly now.

BTW it's amazing that you released the v2, thanks a lot!