Image: Improve accessibility

[Pareder]

What problem does this feature solve?

There are several accessibility issues regarding Image component:

1. Preview cannot be opened by keyboard users because image does not receive focus. It does not fit WCAG success criterions 2.1.1 and 2.1.3.
2. When preview is opened the dialog does not receive focus. It does not fit WCAG success criterions 1.3.1 and 2.4.3.
3. Preview buttons like Close, Swap, Flip, Zoom, etc. cannot be focused via keyboard. It does not fit WCAG success criterions 2.1.1 and 2.1.3.

What does the proposed API look like?

1. Adding role="button" to image wrapper div should help. It can be done only if preview !== false.
2. Adding role="dialog" to modal dialog should help.
3. Use correct button elements or at least pass role="button". Also add some focus styles because current outline: none will overried default styles.

[afc163]

Thanks for the detailed accessibility analysis! These are valid concerns. We'll track this as a feature request. Community contributions are welcome — feel free to submit a PR if you'd like to work on this.

[claytonlin1110]

@afc163 Let me take this issue.

[Pareder]

@zombieJ @claytonlin1110 From what I see on https://ant.design/components/image:

• issues 1 and 2 were not fixed: the image cannot be focused and opened via keyboard and the preview do not get focus on open
• the demo page (and component as well) is broken:
  • any button cannot be focused via keyboard except "Semantic DOM" section
  • after opening some preview once and then closing it any preview cannot be opened again

[Pareder]

@zombieJ @claytonlin1110 Ping. Have you tried it?

[Pareder]

Probably this PR react-component/image#505 will fix it.