Button guidance accessibility issue

[aardrian]

Describe the issue

The button documentation says this:

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.

Reproduction URL

https://picocss.com/docs/buttons.html

• Fire up a screen reader and hear how the links are announced as buttons.
• Attempt to interact with it as if it was a button.

Understand that buttons fire on Enter and Space. Links only fire on Enter. Further, one is reversible and the other is not. Demonstration: https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.html

Environment

Example: All browsers, with or without a screen reader.

[lucaslarroche]

I agree.
It wasn't a good idea.

I won't do a breaking change on v1, but it will probably be removed in v2 (work in progress).

[Leftium]

I worked around this by using a regular <button> and overriding Pico's styling like this:

button {
  display: inline;
  width: auto;
}

• See the buttons here: https://m.leftium.com/
• Source code

[thcrt]

@lucaslarroche This doesn't seem to have been addressed, is there any way to style a link like a button without breaking accessibility?