Accessibility enhancements

README.md

@@ -29,7 +29,7 @@ npm install --save react-collapse
 ### yarn
 
 ```sh
-yarn add react-collapse 
+yarn add react-collapse
 ```
 
 ### 1998 Script Tag:
@@ -42,7 +42,7 @@ yarn add react-collapse
 
 ## Usage
 
-Default behaviour, never unmounts content
+### 1. Content is always mounted (default)
 
 ```js
 import {Collapse} from 'react-collapse';
@@ -53,7 +53,11 @@ import {Collapse} from 'react-collapse';
 </Collapse>
 ```
 
-If you want to unmount collapsed content, use `Unmount` component provided as:
+---
+
+### 2. Content unmounts when collapsed
+
+Use `Unmount` component provided as:
 
 ```js
 import {UnmountClosed} from 'react-collapse';
@@ -66,6 +70,11 @@ import {UnmountClosed} from 'react-collapse';
 
 Example [example/App/AutoUnmount.js](example/App/AutoUnmount.js)
 
+---
+
+### 3. Controlled and accessible
+
+If you want a controlled and accessible implementation, check out this [example](example/App/Accessible.js)
 
 ## Options
 
@@ -130,7 +139,7 @@ const arg = {
   isFullyClosed: true || false, // `true` only when Collapse is fully closed and height is zero
   isOpened: true || false, // `true` if Collapse has any non-zero height
   containerHeight: 123, // current pixel height of Collapse container (changes until reaches `contentHeight`)
-  contentHeight: 123 // determined height of supplied Content 
+  contentHeight: 123 // determined height of supplied Content
 }
 ```
 
@@ -165,10 +174,10 @@ Example: [example/App/ForceInitialAnimation.js](example/App/ForceInitialAnimatio
 
 ### `checkTimeout`: PropTypes.number
 
-Number in `ms`. 
+Number in `ms`.
 
 Collapse will check height after thins timeout to determine if animation is completed, the shorter the number - the faster `onRest` will be triggered and the quicker `hight: auto` will be applied. The downside - more calculations.
-Default value is: `50`. 
+Default value is: `50`.
 
 
 ### Pass-through props
@@ -221,7 +230,7 @@ The implications is that you will need to update your CSS with transition:
     ```
 
 - `checkTimeout` number in `ms`. Collapse will check height after thins timeout to determine if animation is completed, the shorter the number - the faster `onRest` will be triggered and the quicker `hight: auto` will be applied. The downside - more calculations.
-    Default value is: `50`. 
+    Default value is: `50`.
 
 ### 3. Deprecated props (not available in `v5`)
 - ~~Pass-through props~~ - any unknown props passed to `Collapse` component will be ignored

example/App/Accessible.js

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import {Collapse} from '../../src';
+
+export function Accessible() {
+  const height = 100;
+
+  const accessibilityIds = {
+    checkbox: 'accessible-marker-example1',
+    button: 'accessible-marker-example2'
+  };
+
+  const [state, setState] = useState({
+    isCheckboxCollapseOpen: false,
+    isButtonCollapseOpen: false
+  });
+
+  return (
+    <div className="accessible">
+      <ul>
+        <li>
+          <div>
+            <h6>With a checkbox</h6>
+            <div className="config">
+              <label className="label">
+                Opened:
+                <input
+                  className="input"
+                  type="checkbox"
+                  aria-controls={accessibilityIds.checkbox}
+                  checked={state.isCheckboxCollapseOpen}
+                  onChange={({target: {checked}}) => setState({isCheckboxCollapseOpen: checked})} />
+              </label>
+            </div>
+            <Collapse isOpened={state.isCheckboxCollapseOpen}>
+              <div style={{height}} id={accessibilityIds.checkbox} className="blob" />
+            </Collapse>
+          </div>
+        </li>
+
+        <li>
+          <div>
+            <h6>With a button</h6>
+            <div className="config">
+              <button
+                aria-controls={accessibilityIds.button}
+                aria-expanded={state.isButtonCollapseOpen}
+                onClick={() => setState({isButtonCollapseOpen: !state.isButtonCollapseOpen})}
+                type="button">
+                Reveal content
+              </button>
+            </div>
+            <Collapse
+              isOpened={state.isButtonCollapseOpen}>
+              <div style={{height}} id={accessibilityIds.button} className="blob" />
+            </Collapse>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+}

example/App/index.js

@@ -4,6 +4,7 @@ import {VariableHeight} from './VariableHeight';
 import {InitiallyOpened} from './InitiallyOpened';
 import {Nested} from './Nested';
 import {Hooks} from './Hooks';
+import {Accessible} from './Accessible';
 import {AutoUnmount} from './AutoUnmount';
 import {ForceInitialAnimation} from './ForceInitialAnimation';
 
@@ -51,6 +52,11 @@ export const App = () => (
       <Hooks />
     </section>
 
+    <section className="section">
+      <h2>Accessible examples</h2>
+      <Accessible />
+    </section>
+
     <section className="section">
       <h2>Auto-unmount when closed</h2>
       <p>closed by default</p>

example/app.css

@@ -48,6 +48,11 @@ body {
   font-family: Menlo, Consolas, Monospaced, monospace;
 }
 
+.accessible ul {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
 .ReactCollapse--collapse {
   max-width: 800px;
   border: 1px solid rgba(3, 169, 244, 0.3);
@@ -58,4 +63,3 @@ body {
 
 .ReactCollapse--content {
 }
-

src/Collapse.js

@@ -164,9 +164,13 @@ export class Collapse extends React.Component {
 
 
   render() {
-    const {theme, children} = this.props;
+    const {theme, children, isOpened} = this.props;
     return (
-      <div ref={this.onRefContainer} className={theme.collapse} style={this.initialStyle}>
+      <div
+        ref={this.onRefContainer}
+        className={theme.collapse}
+        style={this.initialStyle}
+        aria-hidden={!isOpened}>
         <div ref={this.onRefContent} className={theme.content}>
           {children}
         </div>