Improving EuiImage accessibility

[elizabetdev]

Summary

Improves EuiImage accessibility. Closes #2347

With this PR I'm trying to remove the figure element from inside the buttonto provide a better accessibility.

I also:

• Removed repetitive CSS. euiImage class is now being shared when the image is in fullscreen or not. When the image is in fullscreen some specific styles are added by using the modifier euiImage--isFullScreen
• Moved the outline styles to the button rather than the image
• The button is now only wrapping the <img /> and <EuiIcon />

Checklist

• Checked in dark mode
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[cchaos]

The markup is as was agreed on in the issue. I just found one underline bug, a BEM change, and a translation needed.

[cchaos]

Markup looks good to me and the behavior is the same as before. I'd like to get @myasonik to check the a11y works as expected.

[myasonik]

Found a problem while testing - there's no way to navigate "into" a button...

So, right now, when you land on a button it reads out the aria-label and there's no way to get to the image. Removing the aria-label reads out the image's alt which isn't too bad but it doesn't say it's an image, it keeps the role of button and you don't know what the button does.

I see two paths we can take (if someone else has a proposal, please throw it in because I'm not a huge fan of either):

• Revert back to the HTML I proposed earlier in the ticket though this will force some hacky CSS
• We can add some hacky HTML to make this read a little better. Something like this:

<button> 
  <img alt="" src={`Image of ${altProp}`} />
  <EuiScreenReaderOnly>Open in full screen</EuiScreenReaderOnly>
</button>

@cchaos @miukimiu - thoughts?

[cchaos]

I think the second option (with the EuiScreenReaderOnly) is totally valid and is better than hacky CSS that is hard to maintain and ensure correct rendering in all browsers.

However, there is a third option that I like best, which @miukimiu just implemented which is to add the alt text to the aria-label of the button. Therefore we can completely control the full sentence and how the button is read out.

[myasonik]

🎉 Big improvement! Awesome!

[elizabetdev]

Thanks @myasonik! What do you think of these changes @cchaos?

[cchaos]

If @myasonik's happy, I'm happy 😜