feat: Add keyboard navigation #225

ellinge · 2019-03-27T16:25:59Z

Work in progress.

Adds keyboard navigation as an option. Inspired by:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-1/treeview-1a.html
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html
Also have looked at react-select

Also adds a11y-tests with axe. The only violation identified is missing label for seachInput though.
Added possibility to pass label with id which sets aria-labelledby or else aria-label on searchInput.

Added some related aria-attributes based on examples. Probably more needed though. This is mostly covered to handle traversing of nodes with keyboard and not how we should handle tags and actions by keyboard. This is something to start with at least.

Sample up and running here:
https://ellinge.github.io/react-dropdown-tree-select-test/#DevelopTemp-nocheckeddefault

Turned off can be seen here:
https://ellinge.github.io/react-dropdown-tree-select-test/#DevelopTemp-keyboardnavigationoff

Partly addresses #216

New feature

src/utils/keyboardNavigation.js

src/tree-manager/index.js

src/utils/keyboardNavigation.js

src/tree-manager/index.js

codeclimate

The PR diff size of 25743 lines exceeds the maximum allowed for the inline comments feature.

…ree-select into feat/dowjones#216

# Conflicts: # .codeclimate.yml # .prettierrc # src/index.js # src/input/index.js # src/tag/index.js # src/tree-node/index.js # src/tree-node/index.test.js # src/tree/index.js # yarn.lock

This reverts commit 4145f8c.

This reverts commit 6aa4beb.

This reverts commit 4256ce2.

This reverts commit a4fc033.

mrchief · 2019-04-22T17:40:59Z

@ellinge, help me figure out the merge sequence, please! Ideally, it shouldn't matter, but since we have overlapping PRs, I'm trying to minimize the effort here. What do you say to this order:

225, followed by
233 - do a release
230, followed by
242 - do a release

ellinge · 2019-04-22T18:06:56Z

@mrchief sounds good. Will probably need more tweaking (WCAG) but perhaps it’s better to start off with something than waiting forever for the perfect PR. Haven’t really had the time or energy to do any more tries with actions and the tag-navigation.

The good thing is that even if we need to change something with aria or keyboard no one should really rely on them (css selectors or from outside in code I mean).

mrchief · 2019-04-22T18:31:33Z

@mrchief sounds good. Will probably need more tweaking (WCAG) but perhaps it’s better to start off with something than waiting forever for the perfect PR. Haven’t really had the time or energy to do any more tries with actions and the tag-navigation.

The good thing is that even if we need to change something with aria or keyboard no one should really rely on them (css selectors or from outside in code I mean).

Yep & Yep! So I'm gonna start in that order and try to close the PRs.

# Conflicts: # __snapshots__/src/index.test.js.snap

mrchief

Left a few comments. In the interest of time, we can get this merged and have those addressed as future improvements if fixing them takes longer than a few minutes. The regex one, in particular, should be looked upon as once we release it as such, it sort of creates an expectation and would be harder to pull back in future releases.

mrchief · 2019-04-24T03:08:11Z

src/index.js

+    if (!showDropdown && (keyboardNavigation.isValidKey(e.key, false) || /^\w$/i.test(e.key))) {
+      // Triggers open of dropdown and retriggers event
+      e.persist()
+      this.handleClick(null, () => this.onKeyboardKeyDown(e))


Help me understand why we're doing it this way - especially why we're calling onKeyboardKeyDown again within the onKeyboardKeyDown handler.

I believe you're trying to reuse the state setting logic and then react after that logic does its thing? If so, I think it's time to refactor handleClick.

I wait for the state to update and retrigger the event to select the first node in the now visible dropdown.

src/index.js

src/index.keyboardNav.test.js

src/index.js

codeclimate · 2019-04-24T03:54:00Z

Code Climate has analyzed commit 5edbc88 and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

* 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

mrchief · 2019-05-04T20:47:11Z

Looks like babel-runtime is getting bundled which caused the bundle size to jump to 19KB

I'm checking if we can get rid of it.

mrchief · 2019-06-10T23:04:27Z

🎉 This PR is included in version 3.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

ellinge and others added 3 commits March 25, 2019 00:52

feat: Test try a11y in test with axe

f6358a9

fix: Initial commit (non working)

a8d1fd9

fix: Working keyboard navigation

7ff51d2

ellinge changed the title ~~Feat/#216~~ feat: Add keyboard navigation Mar 27, 2019

codeclimate bot reviewed Mar 27, 2019

View reviewed changes

mrchief added the wip Work In Progress label Mar 27, 2019

codeclimate bot reviewed Mar 27, 2019

View reviewed changes

ellinge force-pushed the feat/#216 branch from d8ff22b to 7ff51d2 Compare March 27, 2019 21:23

fix: Backspace only on empty search

8d10c1d

ellinge closed this Mar 28, 2019

ellinge added 3 commits March 28, 2019 01:13

fix: Adjust code to check codeclimate

244a573

fix: Refactored some parts to utils

67dc346

fix: Refactored some parts to utils

b336ce0

mrchief removed the wip Work In Progress label Mar 28, 2019

Magnus Ellinge and others added 16 commits March 28, 2019 15:17

fix: Code refactoring

301ae28

Merge branch develop

221782a

fix: Add documentation

61d8699

fix: Refactor

c7c9bf3

fix: Refactor

0d47f9c

fix: Refactor

d35e7a8

fix: Refactor

bd1b120

fix: Refactor

366d639

Merge branch 'develop' of https://github.com/ellinge/react-dropdown-t…

0b4804c

…ree-select into feat/dowjones#216

fix: Add to typings

278d166

fix: Close on Enter

766311b

fix: Refactor

dd91e5d

fix: Added test

05be4df

fix: Added some aria

2650381

fix: Add label option

2109269

fix: Render until node on pagedown

a823d00

mrchief and others added 6 commits April 13, 2019 20:51

Merge remote-tracking branch 'upstream/develop' into feat/dowjones#216

a743931

# Conflicts: # .codeclimate.yml # .prettierrc # src/index.js # src/input/index.js # src/tag/index.js # src/tree-node/index.js # src/tree-node/index.test.js # src/tree/index.js # yarn.lock

fix: Prettier and removed comment

85f17fa

fix: Added migration guide

a4fc033

fix: Bundle text props

4256ce2

fix: Typing errors

6aa4beb

fix: Renamed prop

4145f8c

ellinge mentioned this pull request Apr 16, 2019

feat: Added support for single select in tree dropdown #217

Merged

2 tasks

ellinge and others added 8 commits April 17, 2019 07:42

Revert "fix: Renamed prop"

72dfa23

This reverts commit 4145f8c.

Revert "fix: Typing errors"

b3bd333

This reverts commit 6aa4beb.

Revert "fix: Bundle text props"

0191179

This reverts commit 4256ce2.

Revert "fix: Added migration guide"

f3060ba

This reverts commit a4fc033.

Merge devlop into 'feat/dowjones#216'

87cad68

fix: Validate radioSelect also

244e239

fix: Moved around methods

11513e8

Merge branch 'develop' into feat/dowjones#216

3d300f4

mrchief added 3 commits April 23, 2019 22:51

Merge remote-tracking branch 'upstream/develop' into feat/dowjones#216

23e50f8

# Conflicts: # __snapshots__/src/index.test.js.snap

refactor: Separate out test utils from exported ones

66d662c

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

5edbc88

mrchief reviewed Apr 24, 2019

View reviewed changes

mrchief approved these changes May 1, 2019

View reviewed changes

mrchief merged commit 96ff9c9 into dowjones:develop May 1, 2019

ellinge deleted the feat/#216 branch May 6, 2019 07:18

mrchief added the released label Jun 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add keyboard navigation #225

feat: Add keyboard navigation #225

ellinge commented Mar 27, 2019 •

edited by mrchief

Loading

codeclimate bot left a comment

mrchief commented Apr 22, 2019

ellinge commented Apr 22, 2019 •

edited

Loading

mrchief commented Apr 22, 2019

mrchief left a comment

mrchief Apr 24, 2019

ellinge Apr 27, 2019

codeclimate bot commented Apr 24, 2019

mrchief commented May 4, 2019

mrchief commented Jun 10, 2019

feat: Add keyboard navigation #225

feat: Add keyboard navigation #225

Conversation

ellinge commented Mar 27, 2019 • edited by mrchief Loading

codeclimate bot left a comment

Choose a reason for hiding this comment

mrchief commented Apr 22, 2019

ellinge commented Apr 22, 2019 • edited Loading

mrchief commented Apr 22, 2019

mrchief left a comment

Choose a reason for hiding this comment

mrchief Apr 24, 2019

Choose a reason for hiding this comment

ellinge Apr 27, 2019

Choose a reason for hiding this comment

codeclimate bot commented Apr 24, 2019

mrchief commented May 4, 2019

mrchief commented Jun 10, 2019

ellinge commented Mar 27, 2019 •

edited by mrchief

Loading

ellinge commented Apr 22, 2019 •

edited

Loading