Button with child label about eslint-plugin-jsx-a11y

[ljharb]

i'm not sure why a button needs a label, but yes, the button would need an ID, and the label would need to enclose the button and have an htmlFor that points to it.

[kevinSuttle]

Use case: A button would need a label if say, there were only an icon.

[ljharb]

Why wouldn't you just make it not only be an icon? Icons should always have accompanying text, and ideally inside the clickable region since small target areas are problematic for, say, people with arthritis.

[kevinSuttle]

Because it still needs button behavior. It's getting a title via aria-labelled-by, and the icon's title is in the SVG along with the graphics.

[ljharb]

So the title is impossible-to-translate image-based text? O.o

[kevinSuttle]

What? No.

https://egghead.io/lessons/css-accessible-icon-buttons

[ljharb]

Right - so typical users won't see any text, just an icon. That doesn't seem very UX-friendly to me :-/

Either way, I'd expect the label to wrap the button, not the other way around.