From 146b180b8d57dd67ab248f57b6db64e21fd73840 Mon Sep 17 00:00:00 2001
From: Dickson Tan <neurrone@users.noreply.github.com>
Date: Sun, 4 Aug 2019 21:02:11 +0800
Subject: [PATCH] Add support for the `aria-label` attribute.

---
 README.md                                   | 2 ++
 examples/src/js/BasicExample.js             | 1 +
 examples/src/js/ClickableLabelsExample.js   | 1 +
 examples/src/js/CustomIconsExample.js       | 1 +
 examples/src/js/DisabledExample.js          | 1 +
 examples/src/js/ExpandAllExample.js         | 1 +
 examples/src/js/FilterExample.js            | 1 +
 examples/src/js/HiddenCheckboxesExample.js  | 1 +
 examples/src/js/LargeDataExample.js         | 1 +
 examples/src/js/NoCascadeExample.js         | 1 +
 examples/src/js/PessimisticToggleExample.js | 1 +
 src/js/CheckboxTree.js                      | 3 +++
 12 files changed, 15 insertions(+)

diff --git a/README.md b/README.md
index 9a569230..165182a8 100644
--- 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
index 4741b40b..f53a020b 100644
--- 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
index 6ecbc6ff..21c1f472 100644
--- 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
index 0fd819f1..5eff976c 100644
--- 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
index b72bc32b..bfae684a 100644
--- 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
index d7167d09..98877bdc 100644
--- 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
index 823f0bd6..60a606db 100644
--- 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
index 6a49dc64..435fce68 100644
--- 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
index b1a4b9de..eed9e07c 100644
--- 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
index 3adfe573..9ffd1520 100644
--- 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
index 5d47e8be..c926a91b 100644
--- 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
index 6cf71e79..fe7e1a61 100644
--- 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"