Skip to content

Commit 00a8401

Browse files
CSilivestrudanez
CSilivestru
authored and
danez
committed
feat(tablist): Enable overwriting tabIndex on <Tab> and allow tabbing among <Tab>s by using tab key and enter/space.
1 parent cf25e79 commit 00a8401

File tree

7 files changed

+173
-2
lines changed

7 files changed

+173
-2
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,12 @@ Provide a custom class name for the active tab.
192192
193193
> This option can also be set for all `<Tab />` components with the prop `selectedTabClassName` on `<Tabs />`.
194194
195+
#### tabIndex: `string`
196+
197+
> default: if selected `"0"` otherwise `null`
198+
199+
Overrides the tabIndex to enabled tabbing between tabs.
200+
195201
### &lt;TabPanel /&gt;
196202
197203
If you specify additional props on the `<TabPanel />` component they will be forwarded to the rendered `<div />`.

‎examples/tab_enabled/app.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import { Tab, Tabs, TabList, TabPanel } from '../../src/index';
4+
import '../../style/react-tabs.css';
5+
6+
const App = () => {
7+
return (
8+
<div>
9+
<p><em>Hint:</em></p>
10+
<ul>
11+
<li>use keyboard tab to focus tabs</li>
12+
<li>use arrow keys to navigate focused tabs</li>
13+
</ul>
14+
15+
<Tabs forceRenderTabPanel={true}>
16+
<TabList>
17+
<Tab tabIndex="0">React</Tab>
18+
<Tab tabIndex="0">Ember</Tab>
19+
<Tab tabIndex="0">Angular</Tab>
20+
21+
<span>+</span>
22+
</TabList>
23+
24+
<TabPanel>
25+
<h2>Just The UI</h2>
26+
<p>Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.</p>
27+
28+
<h2>Virtual DOM</h2>
29+
<p>React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.</p>
30+
31+
<h2>Data Flow</h2>
32+
<p>React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.</p>
33+
34+
<p>Source: <a href="http://facebook.github.io/react/" target="_blank">React</a></p>
35+
</TabPanel>
36+
<TabPanel>
37+
<h2>Handlebars</h2>
38+
<p>Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.</p>
39+
40+
<h2>Architecture</h2>
41+
<p>Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.</p>
42+
43+
<h2>Productivity</h2>
44+
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.</p>
45+
46+
<p>Source: <a href="http://emberjs.com/" target="_blank">Ember</a></p>
47+
</TabPanel>
48+
<TabPanel>
49+
<h2>Why AngularJS?</h2>
50+
<p>HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.</p>
51+
52+
<h2>Alternatives</h2>
53+
<p>Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.</p>
54+
55+
<h2>Extensibility</h2>
56+
<p>AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.</p>
57+
58+
<p>Source: <a href="https://angularjs.org/" target="_blank">Angular</a></p>
59+
</TabPanel>
60+
</Tabs>
61+
62+
<Tabs>
63+
<TabList>
64+
<Tab>Mario</Tab>
65+
<Tab disabled>Luigi</Tab>
66+
<Tab>Peach</Tab>
67+
<Tab>Yoshi</Tab>
68+
</TabList>
69+
70+
<TabPanel>
71+
<p>Mario (Japanese: マリオ Hepburn: Mario?) is a fictional character in the Mario video game franchise by Nintendo, created by Japanese video game designer Shigeru Miyamoto. Serving as Nintendo's mascot and the eponymous protagonist of the series, he has a younger brother Luigi. Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, he repeatedly rescues Princess Peach from the Koopa villain Bowser and stops his numerous plans to destroy him and take over the kingdom.</p>
72+
<p>Source: <a href="http://en.wikipedia.org/wiki/Mario" target="_blank">Wikipedia</a></p>
73+
</TabPanel>
74+
<TabPanel>
75+
<p>Luigi (Japanese: ルイージ Hepburn: Ruīji?) is a fictional character featured in video games and related media released by Nintendo. Created by prominent game designer Shigeru Miyamoto, Luigi is portrayed as the slightly younger but taller fraternal twin brother of Nintendo's mascot Mario, and appears in many games throughout the Mario franchise, frequently as a sidekick to his brother.</p>
76+
<p>Source: <a href="http://en.wikipedia.org/wiki/Luigi" target="_blank">Wikipedia</a></p>
77+
</TabPanel>
78+
<TabPanel>
79+
<p>Princess Peach (Japanese: ピーチ姫 Hepburn: Pīchi-hime?) is a character in Nintendo's Mario franchise. Originally created by Shigeru Miyamoto, Peach is the princess of the fictional Mushroom Kingdom, which is constantly under attack by Bowser. She often plays the damsel in distress role within the series and is the lead female.[1] She is often portrayed as Mario's love interest and has appeared in nearly all the Mario games to date with the notable exception of Super Princess Peach, where she is the main playable character.</p>
80+
</TabPanel>
81+
<TabPanel>
82+
<p>Yoshi (ヨッシー Yosshī?) /ˈjoʊʃi/ or /ˈjɒʃi/, once romanized as Yossy, is a fictional anthropomorphic dinosaur (referred to as a dragon at times) who appears in video games published by Nintendo. He debuted in Super Mario World (1990) on the Super Nintendo Entertainment System as Mario and Luigi's sidekick (a role he has often reprised), and he later established his own series with several platform and puzzle games, including Super Mario World 2: Yoshi's Island. He has also appeared in many of the spin-off Mario games including the Mario Party, the Mario Kart, and the Super Smash Bros. series, as well as in other various Mario sports titles. Yoshi also appears in New Super Mario Bros. Wii (2009) as the characters' companion and steed, similar to his original debut role in Super Mario World. Yoshi belongs to the species of the same name which comes in various colors, with green being the most common.</p>
83+
<p>Source: <a href="http://en.wikipedia.org/wiki/Yoshi" target="_blank">Wikipedia</a></p>
84+
</TabPanel>
85+
</Tabs>
86+
87+
<Tabs>
88+
<TabList>
89+
<small style={{ padding: '0 10px' }}>Tabs:</small>
90+
<Tab>Tab A</Tab>
91+
<Tab>Tab B</Tab>
92+
<code style={{ padding: '0 10px' }}>(separator)</code>
93+
<Tab>Tab C</Tab>
94+
<span style={{ padding: '0 10px' }}><small>End of tabs</small></span>
95+
</TabList>
96+
97+
<TabPanel>
98+
<h2>This is Tab A</h2>
99+
<p>You can put arbitrary elements inside <code>{'<TabList>'}</code>.</p>
100+
</TabPanel>
101+
<TabPanel>
102+
<h2>This is Tab B</h2>
103+
<p>Navigating through the tabs with the keyboard will skip these arbitrary elements.</p>
104+
</TabPanel>
105+
<TabPanel>
106+
<h2>This is Tab C</h2>
107+
<p>Just mind that the output might be invalid HTML (<code>{'<div>'}</code> inside a <code>{'<ul>'}</code> for instance).</p>
108+
</TabPanel>
109+
</Tabs>
110+
</div>
111+
);
112+
};
113+
114+
render(<App />, document.getElementById('example'));
115+

‎examples/tab_enabled/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<meta charset="utf-8"/>
3+
<title>React Tabs</title>
4+
<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
5+
<style type="text/css">
6+
.react-tabs {
7+
margin-top: 50px;
8+
}
9+
</style>
10+
<body>
11+
<header class="branding padbox">
12+
<h1>react-tabs</h1>
13+
<h2>React tabs component</h2>
14+
</header>
15+
<div id="example" class="padbox"></div>
16+
<a href="https://github.com/reactjs/react-tabs" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
17+
<script src="/__build__/shared.js"></script>
18+
<script src="/__build__/tab_enabled.js"></script>

‎src/components/Tab.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export default class Tab extends Component {
1919
children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
2020
className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
2121
disabled: PropTypes.bool,
22+
tabIndex: PropTypes.string,
2223
disabledClassName: PropTypes.string,
2324
focus: PropTypes.bool, // private
2425
id: PropTypes.string, // private
@@ -53,6 +54,7 @@ export default class Tab extends Component {
5354
panelId,
5455
selected,
5556
selectedClassName,
57+
tabIndex,
5658
tabRef,
5759
...attributes
5860
} = this.props;
@@ -73,7 +75,7 @@ export default class Tab extends Component {
7375
aria-selected={selected ? 'true' : 'false'}
7476
aria-disabled={disabled ? 'true' : 'false'}
7577
aria-controls={panelId}
76-
tabIndex={selected ? '0' : null}
78+
tabIndex={tabIndex || (selected ? '0' : null)}
7779
>
7880
{children}
7981
</li>

‎src/components/UncontrolledTabs.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,23 +203,35 @@ export default class UncontrolledTabs extends Component {
203203
if (this.isTabFromContainer(e.target)) {
204204
let index = this.props.selectedIndex;
205205
let preventDefault = false;
206+
let useSelectedIndex = false;
207+
208+
if (e.keyCode === 32 || e.keyCode === 13) {
209+
preventDefault = true;
210+
useSelectedIndex = false;
211+
this.handleClick(e);
212+
}
206213

207214
if (e.keyCode === 37 || e.keyCode === 38) {
208215
// Select next tab to the left
209216
index = this.getPrevTab(index);
210217
preventDefault = true;
218+
useSelectedIndex = true;
211219
} else if (e.keyCode === 39 || e.keyCode === 40) {
212220
// Select next tab to the right
213221
index = this.getNextTab(index);
214222
preventDefault = true;
223+
useSelectedIndex = true;
215224
}
216225

217226
// This prevents scrollbars from moving around
218227
if (preventDefault) {
219228
e.preventDefault();
220229
}
221230

222-
this.setSelected(index, e);
231+
// Only use the selected index in the state if we're not using the tabbed index
232+
if (useSelectedIndex) {
233+
this.setSelected(index, e);
234+
}
223235
}
224236
};
225237

‎src/components/__tests__/Tab-test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,8 @@ describe('<Tab />', () => {
5656
it('should allow to be wrapped in higher-order-component', () => {
5757
expectToMatchSnapshot(<TabWrapper />);
5858
});
59+
60+
it('override the tabIndex if it was provided', () => {
61+
expectToMatchSnapshot(<Tab tabIndex="0">Hello</Tab>);
62+
});
5963
});

‎src/components/__tests__/__snapshots__/Tab-test.js.snap

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`<Tab /> override the tabIndex if it was provided 1`] = `
4+
<li
5+
aria-controls={null}
6+
aria-disabled="false"
7+
aria-selected="false"
8+
className="react-tabs__tab"
9+
id={null}
10+
role="tab"
11+
tabIndex="0"
12+
>
13+
Hello
14+
</li>
15+
`;
16+
317
exports[`<Tab /> should accept className 1`] = `
418
<li
519
aria-controls={null}

0 commit comments

Comments
 (0)