An EuiHealth EuiIcon element is "just" a color circle SVG image. For a screen reader user, this will read out as "image" if no aria-label was specified, which is not very helpful at all.
I think we should have a prop type check, that checks that one of the following conditions is true:
aria-hidden is true
aria-label was set
aria-labelledby was set
That way we could ensure, that we never end up with a blank SVG without any label that is still visible to screen readers. Inspired by elastic/kibana#17410
An
EuiHealthEuiIconelement is "just" a color circle SVG image. For a screen reader user, this will read out as "image" if noaria-labelwas specified, which is not very helpful at all.I think we should have a prop type check, that checks that one of the following conditions is true:
aria-hiddenistruearia-labelwas setaria-labelledbywas setThat way we could ensure, that we never end up with a blank SVG without any label that is still visible to screen readers. Inspired by elastic/kibana#17410