From 36dfa547fb3a66b58852345af2b5f084c79636d9 Mon Sep 17 00:00:00 2001 From: Marian Juhas Date: Tue, 3 Nov 2020 19:48:39 +0100 Subject: [PATCH] feat: Set the tabIndex on tree select --- README.md | 8 ++++++++ __snapshots__/src/index.test.js.md | 8 ++++++++ __snapshots__/src/index.test.js.snap | Bin 4747 -> 4755 bytes __snapshots__/src/trigger/index.test.js.md | 1 - __snapshots__/src/trigger/index.test.js.snap | Bin 354 -> 343 bytes src/index.js | 12 ++++++++++-- src/index.test.js | 14 ++++++++++++++ src/trigger/index.js | 3 ++- 8 files changed, 42 insertions(+), 4 deletions(-) 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 bfe7e359dcc49c629a6df201dec5d7646fbfe5a9..26a52e1b61aed1de3d841d7e624f503fbbaf70c7 100644 GIT binary patch literal 4755 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 ZZPw5mLUf!z-<5ak{}-ebhoc;R000ub7(@U7 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 a7535f7fc1c62993b7da60c9ad62fe88c0ae394f..90b072ae8fc01b5c60b46e57bef6ba6a3f90ab64 100644 GIT binary patch literal 343 zcmV-d0jT~#RzV&A=32X~Tbsvie00000000AR zkiSmDFc8M?(x!hTN)r_%7%F98V9CmkKrBe`0!WpUxWSOvmg7*ESa=A;#=^u?uprnN zk$4y`5eX>5@+aHh{mwpL000QDJ6|7rZ_CB!!`Azwd$);Djb~bVFs}&o(PLLE)LEGd z85+)Fiw+`bloF7W?ny5-46sYuC!LXI=z2aPn|d=G_&7L?E;walyY)N|Z~{04oD%J9 zU=Pssal(vXA-~p4COm0ecgeDX|BIfpLMvVB#_e0fyW}{|SW%p?oHx!qF-j+DB|~dO znsO5`W7H~$l(j1Fq&uQ5WX;&5Sp4Jwt|Q*kZ=2{)$%9P9mv!LjPhhO%F~2#a_c~Yi pjmp}h22n|`6S7?)KGdxn9hEY+LP>Id4|V%!I^T$9*+$F(001nTn&$uj literal 354 zcmV-o0iFIqRzVV9s5<-F_lu6=-(9{l&L(3XYf!M%dKxKniB5@cd z5eX>5@{{fN-ptrzpD_mPb@%IIe>I(aK5V}|S@&DOs_{-skBut_c;Mm<26{PPH>dxB7rHFJY1u?&ey1O)uZ}TJhtnUE;0MneG A!T - + {!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,