Fix accessibility issues with checkbox nodes

Resolves #281.

Author: jakezatecky

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## [v1.7.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.1...v1.7.2) (2021-08-09)
+
+### Bug Fixes
+
+* [#281]: Fix accessibility issues with checkbox nodes
+
 ## [v1.7.1](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.0...v1.7.1) (2021-06-08)
 
 ### Build

src/js/TreeNode.js

@@ -51,6 +51,8 @@ class TreeNode extends React.PureComponent {
         super(props);
 
         this.onCheck = this.onCheck.bind(this);
+        this.onCheckboxKeyPress = this.onCheckboxKeyPress.bind(this);
+        this.onCheckboxKeyUp = this.onCheckboxKeyUp.bind(this);
         this.onClick = this.onClick.bind(this);
         this.onExpand = this.onExpand.bind(this);
     }
@@ -61,6 +63,23 @@ class TreeNode extends React.PureComponent {
         onCheck({ value, checked: this.getCheckState({ toggle: true }) });
     }
 
+    onCheckboxKeyPress(event) {
+        const { which } = event;
+
+        // Prevent browser scroll when pressing space on the checkbox
+        if (which === 32) {
+            event.preventDefault();
+        }
+    }
+
+    onCheckboxKeyUp(event) {
+        const { keyCode } = event;
+
+        if ([13, 32].includes(keyCode)) {
+            this.onCheck();
+        }
+    }
+
     onClick() {
         const {
             expandOnClick,
@@ -217,7 +236,15 @@ class TreeNode extends React.PureComponent {
                     onClick={this.onCheck}
                     onChange={() => {}}
                 />
-                <span className="rct-checkbox">
+                <span
+                    aria-checked={checked === 1}
+                    aria-disabled={disabled}
+                    className="rct-checkbox"
+                    role="checkbox"
+                    tabIndex={0}
+                    onKeyPress={this.onCheckboxKeyPress}
+                    onKeyUp={this.onCheckboxKeyUp}
+                >
                     {this.renderCheckboxIcon()}
                 </span>
                 {!clickable ? children : null}

src/less/react-checkbox-tree.less

@@ -28,10 +28,6 @@
     line-height: normal;
     color: inherit;
 
-    &:focus {
-      outline: none;
-    }
-
     &:disabled {
       cursor: not-allowed;
     }
@@ -49,7 +45,8 @@
       background: @rct-label-hover;
     }
 
-    &:active {
+    &:active,
+    &:focus {
       background: @rct-label-active;
     }
   }
@@ -127,6 +124,7 @@
 }
 
 .rct-collapse {
+  align-self: stretch;
   border: 0;
   background: none;
   line-height: normal;

src/scss/react-checkbox-tree.scss

@@ -34,10 +34,6 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
     line-height: normal;
     color: inherit;
 
-    &:focus {
-      outline: none;
-    }
-
     &:disabled {
       cursor: not-allowed;
     }
@@ -55,7 +51,8 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
       background: $rct-label-hover;
     }
 
-    &:active {
+    &:active,
+    &:focus {
       background: $rct-label-active;
     }
   }
@@ -133,6 +130,7 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
 }
 
 .rct-collapse {
+  align-self: stretch;
   border: 0;
   background: none;
   line-height: normal;

test/TreeNode.js

@@ -226,10 +226,8 @@ describe('<TreeNode />', () => {
                 <TreeNode {...baseProps} icons={{ uncheck: <span className="other-uncheck" /> }} />,
             );
 
-            assert.isTrue(wrapper.contains(
-                <span className="rct-checkbox">
-                    <span className="other-uncheck" />
-                </span>,
+            assert.isTrue(wrapper.find('.rct-checkbox').contains(
+                <span className="other-uncheck" />,
             ));
         });
     });
@@ -254,10 +252,8 @@ describe('<TreeNode />', () => {
                 <TreeNode {...baseProps} />,
             );
 
-            assert.isTrue(wrapper.contains(
-                <span className="rct-checkbox">
-                    <span className="rct-icon rct-icon-uncheck" />
-                </span>,
+            assert.isTrue(wrapper.find('.rct-checkbox').contains(
+                <span className="rct-icon rct-icon-uncheck" />,
             ));
         });
 
@@ -392,6 +388,25 @@ describe('<TreeNode />', () => {
             assert.isTrue(actual.checked);
         });
 
+        it('should trigger on key press', () => {
+            let actual = {};
+
+            const wrapper = shallow(
+                <TreeNode
+                    {...baseProps}
+                    checked={2}
+                    value="jupiter"
+                    onCheck={(node) => {
+                        actual = node;
+                    }}
+                />,
+            );
+
+            wrapper.find('.rct-checkbox').simulate('keyup', { keyCode: 32 });
+
+            assert.isTrue(actual.checked);
+        });
+
         describe('optimisticToggle', () => {
             it('should toggle a partially-checked node to unchecked', () => {
                 let actual = {};