Add tab indexes, role=button and aria-labels to TabbedViews for a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2019-09-25 18:55:18 +01:00
parent 3672832d38
commit d588e709e5
1 changed files with 10 additions and 3 deletions

View File

@ -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>
); );