feat: Add keyboard navigation (#225)

* feat: Test try a11y in test with axe

* fix: Initial commit (non working)

* fix: Working keyboard navigation

* fix: Backspace only on empty search

* fix: Adjust code to check codeclimate

* fix: Refactored some parts to utils

* fix: Refactored some parts to utils

* fix: Code refactoring

* fix: Add documentation

* fix: Refactor

* fix: Refactor

* fix: Refactor

* fix: Refactor

* fix: Refactor

* fix: Add to typings

* fix: Close on Enter

* fix: Refactor

* fix: Added test

* fix: Added some aria

* fix: Add label option

* fix: Render until node on pagedown

* fix: More tests added and fix pagedown on large search result

* fix: Modify output on violations

* fix: Code smells

* fix: Updated doc and center scrollIntoView, fix hasMore()

* fix: Trigger on*-events properly, only open for chars and whitelist

* fix: Skip som aria in this branch

* fix: Add tests and fix snapshot

* fix: Add tests and fix snapshot

* fix: Enabled by default

* fix: Avoid scroll of whole page, only dropdown

* fix: Remember focus during prop updates

* fix: Delete unintentional dist-file

* fix: Do not select readOnly/disabled

* fix: Switch to babel-plugin-transform-runtime instead

* fix: Add label to trigger as well

* fix: Highlight tag on focus, ad aria-labels

* fix: Highlight tag on focus, ad aria-labels

* fix: Update snapshots, match default

* fix: Allow navigate to disabled/readonly

* fix: Code review/smells fixes

* fix: Code smell

* fix: Code smell

* fix: Move to a11y-folder, shared onKeyDown test method

* fix: Build error and tabIndex

* fix: Set new focus after delete

* fix: Code climate

* fix: Code climate

* fix: Select on tab for simpleSelect

* fix: Add more tests

* fix: Add prop for setting remove aria-label

* fix: Code climate

* fix: Add typing for labelRemove

* fix: Adjust timeout

* style: Bring prettier manually to reduce conflicts

* fix: Prettier and removed comment

* fix: Added migration guide

* fix: Bundle text props

* fix: Typing errors

* fix: Renamed prop

* Revert "fix: Renamed prop"

This reverts commit 4145f8c.

* Revert "fix: Typing errors"

This reverts commit 6aa4beb.

* Revert "fix: Bundle text props"

This reverts commit 4256ce2.

* Revert "fix: Added migration guide"

This reverts commit a4fc033.

* fix: Validate radioSelect also

* fix: Moved around methods

* refactor: Separate out test utils from exported ones

* refactor: Use ES6 getter instead of custom method for accessing tags

Author: ellinge

.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": [["es2015", { "modules": false }], "stage-0", "react"],
-  "plugins": ["transform-class-properties"],
+  "plugins": [
+    "transform-class-properties",
+    ["transform-runtime", { "polyfill": false, "regenerator": true }]
+  ],
   "env": {
     "test": {
       "presets": ["es2015", "stage-0", "react"],

.codeclimate.yml

@@ -41,9 +41,8 @@ plugins:
         javascript:
           mass_threshold : 50
 exclude_patterns:
-  - 'docs/'
-  - 'snapshots/'
-  - '**/tests/*'
-  - '**/node_modules/'
-  - '**/*.test.js'
-  - 'postcss.config.js'
+- "docs/"
+- "snapshots/"
+- "**/tests/*"
+- "**/node_modules/"
+- "**/*.test.js"

README.md

@@ -57,6 +57,8 @@ A lightweight and fast control to render a select component that can display hie
   - [showDropdownAlways](#showDropdownAlways)
   - [form states (disabled|readOnly)](#formstates)
   - [id](#id)
+  - [label](#label)
+  - [labelRemove](#labelRemove)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -65,6 +67,7 @@ A lightweight and fast control to render a select component that can display hie
   - [Search debouncing](#search-debouncing)
   - [Virtualized rendering](#virtualized-rendering)
   - [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations)
+- [Keyboard navigation](#keyboard-navigation)
 - [FAQ](#faq)
 - [Doing more with HOCs](/docs/HOC.md)
 - [Development](#development)
@@ -363,6 +366,18 @@ Specific id for container. The container renders with a default id of `rdtsN` wh
 
 Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)
 
+### label
+
+Type: `string`
+
+Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
+
+### labelRemove
+
+Type: `string`
+
+The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
+
 ## Styling and Customization
 
 ### Default styles
@@ -414,6 +429,12 @@ Once you import default styles, it is easy to add/override the provided styles t
 - [With Bootstrap](/docs/examples/bootstrap)
 - [With Material Design ](/docs/examples/material)
 
+## Keyboard navigation
+
+Adds navigation with `arrow` keys, `page down/up` / `home/end` and toggle of selection with `enter`. `Arrow/page up/down` also toggles open of dropdown if closed.
+
+To close open dropdown `escape` or `tab` can be used and `backspace` can be used for deletion of tags on empty search input.
+
 ## Performance
 
 ### Search optimizations