From bf94e8d329d26c8eb2a0b67aadaef1f8e93a0261 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustav=20Ton=C3=A9r?= Date: Tue, 2 Apr 2019 09:12:52 +0200 Subject: [PATCH 01/31] feat: Add aria roles and attributes --- src/index.js | 2 +- src/tree-node/index.js | 2 +- src/tree-node/index.test.js | 28 ++++++++++++++++++++++++++++ src/tree/index.js | 4 ++-- src/tree/index.test.js | 6 ++++++ 5 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index e5bff6dc..7698f729 100644 --- a/src/index.js +++ b/src/index.js @@ -201,7 +201,7 @@ class DropdownTreeSelect extends Component { }} >
- + { this.searchInput = el diff --git a/src/tree-node/index.js b/src/tree-node/index.js index 7ad49dda..14a627ca 100644 --- a/src/tree-node/index.js +++ b/src/tree-node/index.js @@ -88,7 +88,7 @@ class TreeNode extends PureComponent { const style = keepTreeOnSearch || !searchModeOn ? { paddingLeft: `${(_depth || 0) * 20}px` } : {} return ( -
  • +
  • { t.is(wrapper.prop('data-first'), 'john') t.is(wrapper.prop('data-last'), 'smith') }) + +test('should set aria-selected to true for checked nodes', t => { + const node = { + _id: '0-0-0', + _parent: '0-0', + label: 'item0-0-0', + value: 'value0-0-0', + className: 'cn0-0-0', + checked: true + } + + const wrapper = mount() + t.is(wrapper.prop('aria-selected', true)) +}) + +test('should set aria-selected to false for unchecked nodes', t => { + const node = { + _id: '0-0-0', + _parent: '0-0', + label: 'item0-0-0', + value: 'value0-0-0', + className: 'cn0-0-0', + checked: false + } + + const wrapper = mount() + t.is(wrapper.prop('aria-selected', false)) +}) diff --git a/src/tree/index.js b/src/tree/index.js index dd46ab58..19bdf7f2 100644 --- a/src/tree/index.js +++ b/src/tree/index.js @@ -99,10 +99,10 @@ class Tree extends Component { } render() { - const { searchModeOn } = this.props + const { readOnly, searchModeOn } = this.props return ( -
    • @@ -446,14 +451,9 @@ Generated by [AVA](https://ava.li).
    - - +
    diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap index 0418d2331989a4e8c9139610a0339cb5486e45fc..b045a40463f714ab6274e79f16e686df270522cd 100644 GIT binary patch literal 3483 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 J!`+%#005r^xjg^? literal 3396 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 aRuHkDcb19RHJR6%%==%Ua9bMHSO5Uq?1f4I diff --git a/__snapshots__/src/trigger/index.test.js.md b/__snapshots__/src/trigger/index.test.js.md new file mode 100644 index 00000000..07d7dc47 --- /dev/null +++ b/__snapshots__/src/trigger/index.test.js.md @@ -0,0 +1,19 @@ +# Snapshot report for `src\trigger\index.test.js` + +The actual snapshot is saved in `index.test.js.snap`. + +Generated by [AVA](https://ava.li). + +## Trigger component + +> Snapshot 1 + + diff --git a/__snapshots__/src/trigger/index.test.js.snap b/__snapshots__/src/trigger/index.test.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..5136123cf735ddc769c61c893803cb4380307eab GIT binary patch literal 344 zcmV-e0jK^!RzV1QGP^MJCC%M$_G}+1U2v#i!`4;K}C@L~kAi z-$f^dloDL{+1-D>nPFxO00{3#KVQcmliTmr@N?aM9w1cbl`jiM6@dYI^hjZzmD5y) zT2O4TIu^Pq1B$g`y|HXgJ7k@(ZdiS61&HMNeRKlsTu1k!O5Q$w-?x6B0QUeLz$QY_E7P@`o_t8Ck?6O~-HiMWQM q3!ZYZF>K!Xki&KW-ezs?c`0L)Dv8$4r(WFwp!ElY6x4~z0RR9-prD=r literal 0 HcmV?d00001 diff --git a/src/index.js b/src/index.js index e2b2b2c3..387ddac4 100644 --- a/src/index.js +++ b/src/index.js @@ -11,8 +11,8 @@ import PropTypes from 'prop-types' import React, { Component } from 'react' import { isOutsideClick, clientIdGenerator } from './utils' -import { getAriaLabel } from './a11y' import Input from './input' +import Trigger from './trigger' import Tree from './tree' import TreeManager from './tree-manager' import keyboardNavigation from './tree-manager/keyboardNavigation' @@ -210,34 +210,7 @@ class DropdownTreeSelect extends Component { this.keepDropdownActive = false } - getAriaAttributes = () => { - const { showDropdown } = this.state - const { simpleSelect, label } = this.props - - const attributes = { - role: 'button', - tabIndex: 0, - 'aria-haspopup': simpleSelect ? 'listbox' : 'tree', - 'aria-expanded': showDropdown ? 'true' : 'false', - ...getAriaLabel(label), - } - - return attributes - } - - handleTrigger = e => { - // Just return if triggered from keyDown and the key isn't enter, space or arrow down - if (e.key && e.keyCode !== 13 && e.keyCode !== 32 && e.keyCode !== 40) { - return - } else if (e.key && this.triggerNode && this.triggerNode !== document.activeElement) { - // Do not trigger if not activeElement - return - } else if (!this.state.showDropdown && e.keyCode === 32) { - // Avoid adding space to input on open - e.preventDefault() - } - - // Else this is a key press that should trigger the dropdown + onTrigger = e => { this.handleClick(e, () => { // If the dropdown is shown after key press, focus the input if (this.state.showDropdown) { @@ -289,19 +262,13 @@ class DropdownTreeSelect extends Component { } render() { - const { disabled, readOnly, simpleSelect, radioSelect } = this.props + const { disabled, readOnly, simpleSelect, radioSelect, label } = this.props const { showDropdown } = this.state - const dropdownTriggerClassname = cx({ - 'dropdown-trigger': true, - arrow: true, - disabled, - readOnly, - top: showDropdown, - bottom: !showDropdown, - }) const activeDescendant = this.state.currentFocus ? `${this.state.currentFocus}_li` : undefined + const commonProps = { disabled, readOnly, activeDescendant, label, simpleSelect, radioSelect } + return (
    - { - this.triggerNode = node - }} - className={dropdownTriggerClassname} - onClick={!this.props.disabled ? this.handleTrigger : undefined} - onKeyDown={!this.props.disabled ? this.handleTrigger : undefined} - {...this.getAriaAttributes()} - > + { this.searchInput = el @@ -331,13 +290,10 @@ class DropdownTreeSelect extends Component { onBlur={this.onInputBlur} onTagRemove={this.onTagRemove} onKeyDown={this.onKeyboardKeyDown} - disabled={disabled} - readOnly={readOnly} - activeDescendant={activeDescendant} - label={this.props.label} labelRemove={this.props.labelRemove} + {...commonProps} /> - + {showDropdown && (
    {this.state.allNodesHidden ? ( @@ -351,12 +307,9 @@ class DropdownTreeSelect extends Component { onAction={this.onAction} onCheckboxChange={this.onCheckboxChange} onNodeToggle={this.onNodeToggle} - simpleSelect={simpleSelect} - radioSelect={radioSelect} showPartiallySelected={this.props.showPartiallySelected} - readOnly={readOnly} clientId={this.clientId} - activeDescendant={activeDescendant} + {...commonProps} /> )}
    diff --git a/src/trigger/index.js b/src/trigger/index.js new file mode 100644 index 00000000..9ae70e5f --- /dev/null +++ b/src/trigger/index.js @@ -0,0 +1,78 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import cn from 'classnames/bind' + +import { getAriaLabel } from '../a11y' + +import styles from '../index.css' + +const cx = cn.bind(styles) + +class Trigger extends PureComponent { + static propTypes = { + onTrigger: PropTypes.func, + disabled: PropTypes.bool, + readOnly: PropTypes.bool, + showDropdown: PropTypes.bool, + label: PropTypes.string, + } + + getAriaAttributes = () => { + const { simpleSelect, label, showDropdown } = this.props + + const attributes = { + role: 'button', + tabIndex: 0, + 'aria-haspopup': simpleSelect ? 'listbox' : 'tree', + 'aria-expanded': showDropdown ? 'true' : 'false', + ...getAriaLabel(label), + } + + return attributes + } + + handleTrigger = e => { + // Just return if triggered from keyDown and the key isn't enter, space or arrow down + if (e.key && e.keyCode !== 13 && e.keyCode !== 32 && e.keyCode !== 40) { + return + } else if (e.key && this.triggerNode && this.triggerNode !== document.activeElement) { + // Do not trigger if not activeElement + return + } else if (!this.props.showDropdown && e.keyCode === 32) { + // Avoid adding space to input on open + e.preventDefault() + } + + // Else this is a key press that should trigger the dropdown + this.props.onTrigger(e) + } + + render() { + const { disabled, readOnly, showDropdown } = this.props + + const dropdownTriggerClassname = cx({ + 'dropdown-trigger': true, + arrow: true, + disabled, + readOnly, + top: showDropdown, + bottom: !showDropdown, + }) + + return ( + { + this.triggerNode = node + }} + className={dropdownTriggerClassname} + onClick={!disabled ? this.handleTrigger : undefined} + onKeyDown={!disabled ? this.handleTrigger : undefined} + {...this.getAriaAttributes()} + > + {this.props.children} + + ) + } +} + +export default Trigger diff --git a/src/trigger/index.test.js b/src/trigger/index.test.js new file mode 100644 index 00000000..f510af7f --- /dev/null +++ b/src/trigger/index.test.js @@ -0,0 +1,11 @@ +import { shallow } from 'enzyme' +import React from 'react' +import test from 'ava' +import toJson from 'enzyme-to-json' + +import Trigger from './index' + +test('Trigger component', t => { + const input = toJson(shallow()) + t.snapshot(input) +}) From 0a89cd39b31e3d9d769681c3cc68312f99f8f7ec Mon Sep 17 00:00:00 2001 From: Magnus Ellinge Date: Thu, 2 May 2019 00:49:27 +0200 Subject: [PATCH 28/31] fix: Add comment for removing hash --- src/a11y/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/a11y/index.js b/src/a11y/index.js index c6aba6fd..20d54df3 100644 --- a/src/a11y/index.js +++ b/src/a11y/index.js @@ -2,6 +2,7 @@ export function getAriaLabel(label) { if (!label) return undefined if (label && label[0] === '#') { + // If input label reference ids (hash), use a labelledby without hashes return { 'aria-labelledby': label.replace(/#/g, '') } } return { 'aria-label': label } From 11b8ce79688d205b787dddc0ea923763e91380d3 Mon Sep 17 00:00:00 2001 From: Magnus Ellinge Date: Thu, 2 May 2019 00:52:44 +0200 Subject: [PATCH 29/31] fix: Raise duplicate threshold --- .codeclimate.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 477883ad..707a839e 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -39,7 +39,7 @@ plugins: config: languages: javascript: - mass_threshold : 50 + mass_threshold : 60 exclude_patterns: - "docs/" - "snapshots/" From 6ece934d531a936fed8f6f681caf9102df9b0ab8 Mon Sep 17 00:00:00 2001 From: Magnus Ellinge Date: Thu, 2 May 2019 09:41:14 +0200 Subject: [PATCH 30/31] fix: Expand on comment for hash replacement --- src/a11y/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/a11y/index.js b/src/a11y/index.js index 20d54df3..00410ab3 100644 --- a/src/a11y/index.js +++ b/src/a11y/index.js @@ -2,7 +2,8 @@ export function getAriaLabel(label) { if (!label) return undefined if (label && label[0] === '#') { - // If input label reference ids (hash), use a labelledby without hashes + /* See readme for label. When label starts with # it references ids of dom nodes instead. + When used on aria-labelledby, they should reference the nodes with a starting hash/# */ return { 'aria-labelledby': label.replace(/#/g, '') } } return { 'aria-label': label } From 791ff7576fdafa934248cff3bfd8a6f46095dbc5 Mon Sep 17 00:00:00 2001 From: Magnus Ellinge Date: Thu, 2 May 2019 09:44:51 +0200 Subject: [PATCH 31/31] fix: Expand on comment for hash replacement --- src/a11y/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/a11y/index.js b/src/a11y/index.js index 00410ab3..fac78b08 100644 --- a/src/a11y/index.js +++ b/src/a11y/index.js @@ -3,7 +3,7 @@ export function getAriaLabel(label) { if (label && label[0] === '#') { /* See readme for label. When label starts with # it references ids of dom nodes instead. - When used on aria-labelledby, they should reference the nodes with a starting hash/# */ + When used on aria-labelledby, they should be referenced without a starting hash/# */ return { 'aria-labelledby': label.replace(/#/g, '') } } return { 'aria-label': label }