Add tab indexes, role=button and aria-labels to TabbedViews for a11y
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
3672832d38
commit
d588e709e5
|
@ -82,12 +82,19 @@ export class TabbedView extends React.Component {
|
||||||
|
|
||||||
const onClickHandler = () => this._setActiveTab(tab);
|
const onClickHandler = () => this._setActiveTab(tab);
|
||||||
|
|
||||||
|
const label = _t(tab.label);
|
||||||
return (
|
return (
|
||||||
<span className={classes} key={"tab_label_" + tab.label}
|
<span
|
||||||
onClick={onClickHandler}>
|
className={classes}
|
||||||
|
key={"tab_label_" + tab.label}
|
||||||
|
onClick={onClickHandler}
|
||||||
|
role="button"
|
||||||
|
aria-label={label}
|
||||||
|
tabIndex={0}
|
||||||
|
>
|
||||||
{tabIcon}
|
{tabIcon}
|
||||||
<span className="mx_TabbedView_tabLabel_text">
|
<span className="mx_TabbedView_tabLabel_text">
|
||||||
{_t(tab.label)}
|
{ label }
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue