mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-17 12:01:13 +02:00
Code Issues Releases Wiki Activity

Tabs: fix screen readering for tab switching

Browse Source
This commit is contained in:
Kushagra Gour
2018-11-13 18:46:07 +05:30
parent 097acc743a
commit 63cfa2d164
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Tabs.jsx
View File

@@ -22,7 +22,7 @@ function Tab({ label, isSelected, onKeyUp, onClick }) {
class={`tabs__tab ${isSelected ? 'tabs__tab--selected' : ''}`} class={`tabs__tab ${isSelected ? 'tabs__tab--selected' : ''}`}
role="tab" role="tab"
tabindex={isSelected ? null : -1} tabindex={isSelected ? null : -1}
aria-selected={isSelected} aria-selected={`${isSelected}`}
aria-controls={`${ID_PREFIX}${hyphenate(label)}`} aria-controls={`${ID_PREFIX}${hyphenate(label)}`}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
onClick={onClick} onClick={onClick}
@@ -41,18 +41,22 @@ export default class Tabs extends Component {
isSelected(index) { isSelected(index) {
return this.state.selectedTab === index; return this.state.selectedTab === index;
} }
switchTab(selectedTab) {
this.setState({ selectedTab: selectedTab });
this.tabListEl.querySelectorAll('[role=tab]')[selectedTab].focus();
}
keyUpHandler(e) { keyUpHandler(e) {
let { selectedTab } = this.state; let { selectedTab } = this.state;
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
selectedTab--; selectedTab--;
selectedTab = selectedTab =
selectedTab < 0 ? this.props.children.length - 1 : selectedTab; selectedTab < 0 ? this.props.children.length - 1 : selectedTab;
this.setState({ selectedTab: selectedTab }); this.switchTab(selectedTab);
e.preventDefault(); e.preventDefault();
} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
selectedTab++; selectedTab++;
selectedTab %= this.props.children.length; selectedTab %= this.props.children.length;
this.setState({ selectedTab: selectedTab }); this.switchTab(selectedTab);
e.preventDefault(); e.preventDefault();
} }
} }
@@ -60,7 +64,11 @@ export default class Tabs extends Component {
const tabs = this.props.children; const tabs = this.props.children;
return ( return (
<div class="tabs"> <div class="tabs">
<div class="tabs__tablist" role="tablist"> <div
class="tabs__tablist"
role="tablist"
ref={el => (this.tabListEl = el)}
>
{tabs.map((child, index) => ( {tabs.map((child, index) => (
<Tab <Tab
isSelected={this.isSelected(index)} isSelected={this.isSelected(index)}