feat: Set the tabIndex on tree select (#439)

Co-authored-by: Marian Juhas <[email protected]>

Author: marianjuhas

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
 | [<img src="https://avatars3.githubusercontent.com/u/491877?v=4" width="100px;" alt="Lutz Lengemann"/><br /><sub><b>Lutz Lengemann</b></sub>](http://www.dealzeit.de)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=mobilutz "Code") | [<img src="https://avatars0.githubusercontent.com/u/26381655?v=4" width="100px;" alt="Akshay Dipta"/><br /><sub><b>Akshay Dipta</b></sub>](https://github.com/Eainde)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3AEainde "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/137158?v=4" width="100px;" alt="Ian Langworth ☠"/><br /><sub><b>Ian Langworth ☠</b></sub>](https://langworth.com/)<br />[🤔](#ideas-statico "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/5932031?v=4" width="100px;" alt="Stoyan Berov"/><br /><sub><b>Stoyan Berov</b></sub>](https://github.com/stoberov)<br />[🐛](https://github.com/dowjones/react-dropdown-tree-select/issues?q=author%3Astoberov "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/17863113?v=4" width="100px;" alt="ellinge"/><br /><sub><b>ellinge</b></sub>](https://github.com/ellinge)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=ellinge "Code") [🤔](#ideas-ellinge "Ideas, Planning, & Feedback") [🚧](#maintenance-ellinge "Maintenance") | [<img src="https://avatars3.githubusercontent.com/u/5017449?v=4" width="100px;" alt="Sandy M"/><br /><sub><b>Sandy M</b></sub>](https://github.com/moonjy1993)<br />[💻](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") | [<img src="https://avatars1.githubusercontent.com/u/529614?v=4" width="100px;" alt="Gustav Tonér"/><br /><sub><b>Gustav Tonér</b></sub>](https://www.gazab.se)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=gazab "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/3390897?v=4" width="100px;" alt="Kestutis Kasiulynas"/><br /><sub><b>Kestutis Kasiulynas</b></sub>](http://kYem.net)<br />[🐛](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") | [<img src="https://avatars3.githubusercontent.com/u/20484267?v=4" width="100px;" alt="Jesus Cabrera Gonzalez"/><br /><sub><b>Jesus Cabrera Gonzalez</b></sub>](https://github.com/isuscbrmid)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=isuscbrmid "Code") | [<img src="https://avatars2.githubusercontent.com/u/27359753?v=4" width="100px;" alt="MJRuskin"/><br /><sub><b>MJRuskin</b></sub>](https://github.com/MJRuskin)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=MJRuskin "Code") | [<img src="https://avatars1.githubusercontent.com/u/64946671?v=4" width="100px;" alt="akarshjairaj"/><br /><sub><b>akarshjairaj</b></sub>](https://github.com/akarshjairaj)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=akarshjairaj "Code") | [<img src="https://avatars1.githubusercontent.com/u/539090?v=4" width="100px;" alt="Artem Berdyshev"/><br /><sub><b>Artem Berdyshev</b></sub>](https://github.com/berdyshev)<br />[💻](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") | [<img src="https://avatars3.githubusercontent.com/u/42154031?v=4" width="100px;" alt="Matheus Wichman"/><br /><sub><b>Matheus Wichman</b></sub>](https://matheushw.com/)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=m4theushw "Code") | [<img src="https://avatars1.githubusercontent.com/u/60662654?v=4" width="100px;" alt="aarce-uncharted"/><br /><sub><b>aarce-uncharted</b></sub>](https://github.com/aarce-uncharted)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=aarce-uncharted "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/1795294?v=4" width="100px;" alt="Mohamad Othman"/><br /><sub><b>Mohamad Othman</b></sub>](http://osmancode.me)<br />[💻](https://github.com/dowjones/react-dropdown-tree-select/commits?author=osmancode "Code") [🤔](#ideas-osmancode "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/8286468?v=4" width="100px;" alt="kathleenlu"/><br /><sub><b>kathleenlu</b></sub>](https://github.com/smurfs2549)<br />[💻](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") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

__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={{}}
     >
       <div
@@ -481,6 +485,7 @@ Generated by [AVA](https://ava.li).
             mode="radioSelect"
             onTrigger={Function {}}
             showDropdown={false}
+            tabIndex={0}
             tags={[]}
             texts={{}}
           >
@@ -619,6 +624,7 @@ Generated by [AVA](https://ava.li).
       onChange={Function onChange {}}
       onFocus={Function onFocus {}}
       showDropdown="default"
+      tabIndex={0}
       texts={{}}
     >
       <div
@@ -632,6 +638,7 @@ Generated by [AVA](https://ava.li).
             clientId="rdts"
             onTrigger={Function {}}
             showDropdown={false}
+            tabIndex={0}
             tags={[]}
             texts={{}}
           >
@@ -702,6 +709,7 @@ Generated by [AVA](https://ava.li).
           clientId="rdts"
           onTrigger={Function {}}
           showDropdown={true}
+          tabIndex={0}
           tags={[]}
           texts={{}}
         >

__snapshots__/src/index.test.js.snap

@@ -16,5 +16,4 @@ Generated by [AVA](https://ava.li).
       onClick={Function {}}
       onKeyDown={Function {}}
       role="button"
-      tabIndex={0}
     />

__snapshots__/src/trigger/index.test.js.md

@@ -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(' ')}
         >
-          <Trigger onTrigger={this.onTrigger} showDropdown={showDropdown} {...commonProps} tags={tags}>
+          <Trigger
+            onTrigger={this.onTrigger}
+            showDropdown={showDropdown}
+            {...commonProps}
+            tags={tags}
+            tabIndex={tabIndex}
+          >
             <Tags tags={tags} onTagRemove={this.onTagRemove} {...commonProps}>
               {!inlineSearchInput && searchInput}
             </Tags>

__snapshots__/src/trigger/index.test.js.snap

@@ -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(<DropdownTreeSelect id="rdts" data={tree} />)
+  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(<DropdownTreeSelect id="rdts" data={tree} tabIndex={5} />)
+  t.deepEqual(wrapper.find('.dropdown-trigger').prop('tabIndex'), 5)
+})
+
 test('select correct focused node when using external state data container', t => {
   let data = [
     {

src/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,