Commit 0c2a785a authored by Robert Knight's avatar Robert Knight

Improve tab bar accessibility

 - Add ARIA roles to the tab bar and individual tabs
 - Make the tab items tab-focusable
 - Indicate the selected tab using `aria-selected`
parent 1c80ed66
...@@ -29,6 +29,9 @@ function Tab({ ...@@ -29,6 +29,9 @@ function Tab({
})} })}
onMouseDown={onChangeTab.bind(this, type)} onMouseDown={onChangeTab.bind(this, type)}
onTouchStart={onChangeTab.bind(this, type)} onTouchStart={onChangeTab.bind(this, type)}
role="tab"
tabIndex="0"
ariaSelected={selected}
> >
{children} {children}
{count > 0 && !isWaitingToAnchor && ( {count > 0 && !isWaitingToAnchor && (
...@@ -108,6 +111,7 @@ function SelectionTabs({ isLoading, settings, session }) { ...@@ -108,6 +111,7 @@ function SelectionTabs({ isLoading, settings, session }) {
className={classnames('selection-tabs', { className={classnames('selection-tabs', {
'selection-tabs--theme-clean': isThemeClean, 'selection-tabs--theme-clean': isThemeClean,
})} })}
role="tablist"
> >
<Tab <Tab
count={annotationCount} count={annotationCount}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment