Add support for the aria-label attribute.

jakezatecky · Aug 13, 2019 · 146b180 · 146b180
1 parent b03f44b
commit 146b180
Show file tree

Hide file tree

Showing 12 changed files with 15 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -71,6 +71,7 @@ class Widget extends React.Component {
     render() {
         return (
             <CheckboxTree
+                aria-label='Moons'
                 nodes={nodes}
                 checked={this.state.checked}
                 expanded={this.state.expanded}
@@ -135,6 +136,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 | Property             | Type     | Description                                                                                                            | Default     |
 | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `nodes`              | array    | **Required**. Specifies the tree nodes and their children.                                                             |             |
+| `aria-label`         | string   | a short label that describes the purpose of the tree                                                                   | `null`      |
 | `checked`            | array    | An array of checked node values.                                                                                       | `[]`        |
 | `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                                                   | `false`     |
 | `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                                                 | `false`     |

diff --git a/examples/src/js/BasicExample.js b/examples/src/js/BasicExample.js
@@ -114,6 +114,7 @@ class BasicExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Basic Example'
                 checked={checked}
                 expanded={expanded}
                 nodes={nodes}

diff --git a/examples/src/js/ClickableLabelsExample.js b/examples/src/js/ClickableLabelsExample.js
@@ -123,6 +123,7 @@ class ClickExample extends React.Component {
         return (
             <div className="clickable-labels">
                 <CheckboxTree
+                    aria-label='Clickable Labels Example'
                     checked={checked}
                     expanded={expanded}
                     nodes={nodes}

diff --git a/examples/src/js/CustomIconsExample.js b/examples/src/js/CustomIconsExample.js
@@ -69,6 +69,7 @@ class CustomIconsExamples extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Custom Icons Example'
                 checked={checked}
                 expanded={expanded}
                 nodes={nodes}

diff --git a/examples/src/js/DisabledExample.js b/examples/src/js/DisabledExample.js
@@ -114,6 +114,7 @@ class DisabledExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Disabled Example'
                 checked={checked}
                 disabled
                 expanded={expanded}

diff --git a/examples/src/js/ExpandAllExample.js b/examples/src/js/ExpandAllExample.js
@@ -115,6 +115,7 @@ class ExpandAllExample extends React.Component {
         return (
             <div className="expand-all-container">
                 <CheckboxTree
+                    aria-label='Expand All/Collapse All Example'
                     checked={checked}
                     expanded={expanded}
                     nodes={nodes}

diff --git a/examples/src/js/FilterExample.js b/examples/src/js/FilterExample.js
@@ -170,6 +170,7 @@ class FilterExample extends React.Component {
                     onChange={this.onFilterChange}
                 />
                 <CheckboxTree
+                    aria-label='Filter Example'
                     checked={checked}
                     expanded={expanded}
                     nodes={nodesFiltered}

diff --git a/examples/src/js/HiddenCheckboxesExample.js b/examples/src/js/HiddenCheckboxesExample.js
@@ -120,6 +120,7 @@ class HiddenCheckboxesExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Hide Checkboxes Example'
                 checked={checked}
                 expanded={expanded}
                 nodes={nodes}

diff --git a/examples/src/js/LargeDataExample.js b/examples/src/js/LargeDataExample.js
@@ -52,6 +52,7 @@ class LargeDataExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Large Data Example'
                 checked={checked}
                 expanded={expanded}
                 nodes={nodes}

diff --git a/examples/src/js/NoCascadeExample.js b/examples/src/js/NoCascadeExample.js
@@ -115,6 +115,7 @@ class NoCascadeExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='No Cascading Example'
                 checked={checked}
                 expanded={expanded}
                 noCascade

diff --git a/examples/src/js/PessimisticToggleExample.js b/examples/src/js/PessimisticToggleExample.js
@@ -114,6 +114,7 @@ class PessimisticToggleExample extends React.Component {
 
         return (
             <CheckboxTree
+                aria-label='Pessimistic Toggle Example'
                 checked={checked}
                 expanded={expanded}
                 nodes={nodes}

diff --git a/src/js/CheckboxTree.js b/src/js/CheckboxTree.js
@@ -30,6 +30,7 @@ class CheckboxTree extends React.Component {
     static propTypes = {
         nodes: PropTypes.arrayOf(nodeShape).isRequired,
 
+        'aria-label': PropTypes.string,
         checked: listShape,
         disabled: PropTypes.bool,
         expandDisabled: PropTypes.bool,
@@ -53,6 +54,7 @@ class CheckboxTree extends React.Component {
     };
 
     static defaultProps = {
+        'aria-label': null,
         checked: [],
         disabled: false,
         expandDisabled: false,
@@ -450,6 +452,7 @@ class CheckboxTree extends React.Component {
                 {this.renderExpandAll()}
                 {this.renderHiddenInput()}
                 <div
+                    aria-label={this.props['aria-label']}
                     onFocus={this.onFocus}
                     onKeyDown={this.onKeyDown}
                     role="tree"