Prevent text selection on Accordion headings / labels

[Chris LaChance]

Visually, the Accordion headings appear as buttons, yet unlike buttons they allow the heading text / labels to be selected. Would have expected that to be prevented.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

[Francesco Improta]

Hi @chrislachance

I've been thinking about it for a while and came to conclusion that selecting accordion heading could be an expected behavior by users.

I know it appears as button, but could host some meaningful content

[Omar Muscatello]

Most of the implementations I have seen on the web (Bootstrap, jQuery UI, WAI-ARIA) uses buttons without any text selection.

Also, from WAI-ARIA authoring practices:

The title of each accordion header is contained in an element with role button.

which natively wouldn't allow text-selection

@zetareticoli: I think that, if we have a valid use case like, we can leave it as it is. What do you think?

@chrislachance: As per your link, you can use the user-select property in the meanwhile if you want to prevent the text selection 👍