diff --git a/README.md b/README.md index 2d5ba5d6..6a01f51f 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,7 @@ A lightweight and fast control to render a select component that can display hie - [id](#id) - [searchPredicate](#searchpredicate) - [inlineSearchInput](#inlinesearchinput) + - [tabIndex](#tabIndex) - [Styling and Customization](#styling-and-customization) - [Using default styles](#default-styles) - [Customizing with Bootstrap, Material Design styles](#customizing-styles) @@ -414,6 +415,12 @@ Type: `bool` (default: `false`) `inlineSearchInput=true` makes the search input renders **inside** the dropdown-content. This can be useful when your UX looks something like [this comment](https://github.com/dowjones/react-dropdown-tree-select/issues/308#issue-526467109). +### tabIndex + +Type: `number` (default: `0`) + +`tabIndex=0` attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. + ## Styling and Customization ### Default styles @@ -602,6 +609,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds | [Lutz Lengemann
Lutz Lengemann](http://www.dealzeit.de)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=mobilutz "Code") | [Akshay Dipta
Akshay Dipta](https://github.com/Eainde)
[πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AEainde "Bug reports") | [Ian Langworth ☠
Ian Langworth ☠](https://langworth.com/)
[πŸ€”](#ideas-statico "Ideas, Planning, & Feedback") | [Stoyan Berov
Stoyan Berov](https://github.com/stoberov)
[πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Astoberov "Bug reports") | [ellinge
ellinge](https://github.com/ellinge)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=ellinge "Code") [πŸ€”](#ideas-ellinge "Ideas, Planning, & Feedback") [🚧](#maintenance-ellinge "Maintenance") | [Sandy M
Sandy M](https://github.com/moonjy1993)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=moonjy1993 "Code") [πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Amoonjy1993 "Bug reports") | [Gustav TonΓ©r
Gustav TonΓ©r](https://www.gazab.se)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=gazab "Code") | | [Kestutis Kasiulynas
Kestutis Kasiulynas](http://kYem.net)
[πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AkYem "Bug reports") [πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=kYem "Code") | [Jesus Cabrera Gonzalez
Jesus Cabrera Gonzalez](https://github.com/isuscbrmid)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=isuscbrmid "Code") | [MJRuskin
MJRuskin](https://github.com/MJRuskin)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=MJRuskin "Code") | [akarshjairaj
akarshjairaj](https://github.com/akarshjairaj)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=akarshjairaj "Code") | [Artem Berdyshev
Artem Berdyshev](https://github.com/berdyshev)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=berdyshev "Code") [πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Aberdyshev "Bug reports") | [Matheus Wichman
Matheus Wichman](https://matheushw.com/)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=m4theushw "Code") | [aarce-uncharted
aarce-uncharted](https://github.com/aarce-uncharted)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=aarce-uncharted "Code") | | [Mohamad Othman
Mohamad Othman](http://osmancode.me)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=osmancode "Code") [πŸ€”](#ideas-osmancode "Ideas, Planning, & Feedback") | [kathleenlu
kathleenlu](https://github.com/smurfs2549)
[πŸ’»](https://github.com/dowjones/react-dropdown-tree-select/commits?author=smurfs2549 "Code") [πŸ›](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Asmurfs2549 "Bug reports") | + This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome! diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md index abf14839..dd9b4f7c 100644 --- a/__snapshots__/src/index.test.js.md +++ b/__snapshots__/src/index.test.js.md @@ -19,6 +19,7 @@ Generated by [AVA](https://ava.li). clientId="rdts" onTrigger={Function {}} showDropdown={true} + tabIndex={0} tags={[]} texts={{}} > @@ -189,6 +190,7 @@ Generated by [AVA](https://ava.li). clientId="rdts" onTrigger={Function {}} showDropdown={true} + tabIndex={0} tags={[]} texts={{}} > @@ -359,6 +361,7 @@ Generated by [AVA](https://ava.li). disabled={true} onTrigger={Function {}} showDropdown={false} + tabIndex={0} tags={[]} texts={{}} > @@ -467,6 +470,7 @@ Generated by [AVA](https://ava.li). onChange={Function onChange {}} onFocus={Function onFocus {}} showDropdown="default" + tabIndex={0} texts={{}} >
@@ -619,6 +624,7 @@ Generated by [AVA](https://ava.li). onChange={Function onChange {}} onFocus={Function onFocus {}} showDropdown="default" + tabIndex={0} texts={{}} >
@@ -702,6 +709,7 @@ Generated by [AVA](https://ava.li). clientId="rdts" onTrigger={Function {}} showDropdown={true} + tabIndex={0} tags={[]} texts={{}} > diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap index bfe7e359..26a52e1b 100644 Binary files a/__snapshots__/src/index.test.js.snap and b/__snapshots__/src/index.test.js.snap differ diff --git a/__snapshots__/src/trigger/index.test.js.md b/__snapshots__/src/trigger/index.test.js.md index 3dc10dfc..8e944f63 100644 --- a/__snapshots__/src/trigger/index.test.js.md +++ b/__snapshots__/src/trigger/index.test.js.md @@ -16,5 +16,4 @@ Generated by [AVA](https://ava.li). onClick={Function {}} onKeyDown={Function {}} role="button" - tabIndex={0} /> diff --git a/__snapshots__/src/trigger/index.test.js.snap b/__snapshots__/src/trigger/index.test.js.snap index a7535f7f..90b072ae 100644 Binary files a/__snapshots__/src/trigger/index.test.js.snap and b/__snapshots__/src/trigger/index.test.js.snap differ diff --git a/src/index.js b/src/index.js index 5871bac2..dc11f08d 100644 --- a/src/index.js +++ b/src/index.js @@ -48,6 +48,7 @@ class DropdownTreeSelect extends Component { id: PropTypes.string, searchPredicate: PropTypes.func, inlineSearchInput: PropTypes.bool, + tabIndex: PropTypes.number, } static defaultProps = { @@ -58,6 +59,7 @@ class DropdownTreeSelect extends Component { texts: {}, showDropdown: 'default', inlineSearchInput: false, + tabIndex: 0, } constructor(props) { @@ -290,7 +292,7 @@ class DropdownTreeSelect extends Component { } render() { - const { disabled, readOnly, mode, texts, inlineSearchInput } = this.props + const { disabled, readOnly, mode, texts, inlineSearchInput, tabIndex } = this.props const { showDropdown, currentFocus, tags } = this.state const activeDescendant = currentFocus ? `${currentFocus}_li` : undefined @@ -325,7 +327,13 @@ class DropdownTreeSelect extends Component { .filter(Boolean) .join(' ')} > - + {!inlineSearchInput && searchInput} diff --git a/src/index.test.js b/src/index.test.js index 68b43c6e..81bbabd7 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -326,6 +326,20 @@ test('appends selected tags to aria-labelledby with text label', t => { t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-label'), 'hello world') }) +test('default tabIndex value is 0', t => { + const { tree } = t.context + tree[0].checked = true + const wrapper = mount() + t.deepEqual(wrapper.find('.dropdown-trigger').prop('tabIndex'), 0) +}) + +test('set tabIndex value', t => { + const { tree } = t.context + tree[0].checked = true + const wrapper = mount() + t.deepEqual(wrapper.find('.dropdown-trigger').prop('tabIndex'), 5) +}) + test('select correct focused node when using external state data container', t => { let data = [ { diff --git a/src/trigger/index.js b/src/trigger/index.js index ddead5c6..e6f91256 100644 --- a/src/trigger/index.js +++ b/src/trigger/index.js @@ -14,6 +14,7 @@ class Trigger extends PureComponent { texts: PropTypes.object, clientId: PropTypes.string, tags: PropTypes.array, + tabIndex: PropTypes.number, } getAriaAttributes = () => { @@ -36,7 +37,7 @@ class Trigger extends PureComponent { const attributes = { id: triggerId, role: 'button', - tabIndex: 0, + tabIndex: this.props.tabIndex, 'aria-haspopup': mode === 'simpleSelect' ? 'listbox' : 'tree', 'aria-expanded': showDropdown ? 'true' : 'false', ...labelAttributes,