Link to component: https://elastic.github.io/eui/#/navigation/button#button-groups

When EuiButtonGroup is a single selection component (vs multi-select), it becomes an <input type="radio"> group under the hood. However, a recent Twitter discussion by Lea Verou and Léonie Watson (both prominent members of the frontend/accessibility community) have come to the conclusion that this is in fact unintuitive and should not be done (emphasis in quotes is mine):

Unsurprisingly, most people thought the best solution is radio buttons and labels. After all, it works without CSS, right? Progressive enhancement and everything?

That’s what I thought too. I had contorted my component to generate labels and radios in the Shadow DOM from buttons in the light DOM, which resulted in awkward code and awkward CSS, but I felt I was fighting the good fight and doing the best thing for accessibility.

All this was challenged when the actual accessibility expert, Léonie Watson chimed in. For those of you who don’t know her, she is pretty much the expert when it comes to web accessibility and standards. She is also visually impaired herself, giving her a firsthand experience many other a11y aficionados lack. Her recommendation was contrary to what most others were saying: https://twitter.com/LeonieWatson/status/1545745436740313089

She went on to make the point that if a design looks like buttons, it should act like buttons, otherwise there are mismatched expectations and poor UX for AT users:

Copying a Tweet from Leonie with implementation details:

If the grouping is also important, putting each group of buttons inside a <section> element with aria-label to give it an accessible name should do the trick. Has the added bonus of turning each section into a navigable landmark.

Full article and writeup: https://lea.verou.me/blog/2022/07/button-group/