Repository navigation
Consider improving accessibility support with aria-role #22
Description
Adding an aria role would improve accessibility of this component.
I think the best fit for this component would be to add the switch role per the Mozilla guidelines here.
The gist of it would be to add:
role="switch"aria-checked={checked}
on the outer span.
In render method:
...
const checked = this.state.checked;
...
<span
{...restProps}
role="switch"
aria-checked={checked}
className={switchClassName}
tabIndex={switchTabIndex}
ref={this.saveNode}
onKeyDown={this.handleKeyDown}
onClick={this.toggle}
onMouseUp={this.handleMouseUp}
>
<span className={`${prefixCls}-inner`}>
{checked ? checkedChildren : unCheckedChildren}
</span>
</span>Reacted by Michael サイトー 中村 Bashurov
Activity
saitonakamura commentedon Sep 6, 2018
Also it's a good idea to use
buttoninstead ofspancause button includes a lot of a11y stuff out of the box, like tab index, reacting to space and enter etc. so you can save some codelinessaitonakamura commentedon Sep 6, 2018
Heydon Pickering has a really good blog about a11y btw https://inclusive-components.design/toggle-button/#theswitchrole
zombieJ commentedon Sep 6, 2018
Welcome PR for this : )
saitonakamura commentedon Sep 10, 2018
Here you go #26