You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Buttons are width: 100%; by default. Use role="button" on an inline element if you need an inline button.
The example shows a link with a button role, which overrides how the control is exposed to assistive technology. Essentially it is lying to users about its purpose and operation solely to visually not be 100% width.
Current Behavior
The documentation conflates a link with a button, with no warnings nor guidance on the different affordances nor accessibility API exposure.
Expected Behavior
Guide users to code that assigns a style to a styling issue instead of an ARIA role. For example, inline-block.
Describe the issue
The button documentation says this:
The example shows a link with a
button
role, which overrides how the control is exposed to assistive technology. Essentially it is lying to users about its purpose and operation solely to visually not be 100% width.Current Behavior
The documentation conflates a link with a button, with no warnings nor guidance on the different affordances nor accessibility API exposure.
Expected Behavior
Guide users to code that assigns a style to a styling issue instead of an ARIA role. For example,
inline-block
.Reproduction URL
https://picocss.com/docs/buttons.html
Understand that buttons fire on
Enter
andSpace
. Links only fire onEnter
. Further, one is reversible and the other is not. Demonstration: https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.htmlEnvironment
Example: All browsers, with or without a screen reader.
The text was updated successfully, but these errors were encountered: