Add support for the aria-label attribute.

Author: Neurrone

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`     |

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}

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}

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}

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}

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}

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}

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}

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}

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

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}

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,
@@ -447,6 +449,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"