Issue #47: fix a11y eslint errors #53
Conversation
| className='carousel-track' | ||
| style={ trackStyle } | ||
| ref={ t => { this._track = t; } } | ||
| onTransitionEnd={ this.slideTransitionEnd } | ||
| onMouseDown={ this.onMouseDown } | ||
| onMouseLeave={ this.onMouseLeave } | ||
| onMouseOver={ this.onMouseOver } | ||
| onFocus={ this.onMouseOver } |
There was a problem hiding this comment.
Would this also need an onBlur/onFocusOut handler as well?
| @@ -471,13 +467,15 @@ export default class Carousel extends Component { | |||
| } | |||
| <div className='carousel-viewport' ref={ v => { this._viewport = v; } } style={ viewportStyle }> | |||
| <ul | |||
| role='tablist' | |||
There was a problem hiding this comment.
Is tablist/tab the right role here?
From https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute#ARIA_1.0_Pre-Defined_Roles
tab
A header for a tabpanel.
tablist
A list of tabs, which are references to tabpanels.
tabpanel
Tabpanel is a container for the resources associated with a tab.
There was a problem hiding this comment.
it has to be an interactive role. I'm not sure where to find a comprehensive list of which ones are interactive - but I found this list https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md#rule-details
and tab seems correct if you replace the word tab with slide in "selecting a different tab changes the content and makes the selected tab more prominent than the other tabs" https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
is there a better interactive role?
There was a problem hiding this comment.
I'm not opposed to this role, and it's certainly better than whats already there. My only concern is that there's no "content" being shown, just the "tab" itself. i.e. a tab is supposed to effectively swap out the primary tabpanel(or make it more prominent) and there's no tabpanel here.
There was a problem hiding this comment.
If each image was a tabpanel and there were "dots" or some positional indicator that the user can click on/keyboard to activate a specific image, then those "dots" would be tabs. In the absence of dots/indicators, maybe tablist/tabpanel makes the most sense here?
There was a problem hiding this comment.
@msluther @thumbsupep this is probably a good example to base off of https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html
There was a problem hiding this comment.
I think this is probably fine, but it might be a good idea to add aria-roledescription attributes of carousel and slide just to be a bit more descriptive for screen readers. I did see this page that recommended that: https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html
addresses issue #47