From f519ffd054fd6c50491dfda5f9206fac16d9bbf5 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 15 Feb 2020 19:51:58 -0800 Subject: [PATCH 1/5] Use aria-hidden and new prop to help facilitate a11y --- src/Collapse.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Collapse.js b/src/Collapse.js index 1bbc637..d14fe74 100644 --- a/src/Collapse.js +++ b/src/Collapse.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; export class Collapse extends React.Component { static propTypes = { + accessibilityId: PropTypes.string, theme: PropTypes.shape({ collapse: PropTypes.string, content: PropTypes.string @@ -21,6 +22,7 @@ export class Collapse extends React.Component { static defaultProps = { + accessibilityId: '', theme: { collapse: 'ReactCollapse--collapse', content: 'ReactCollapse--content' @@ -164,10 +166,14 @@ export class Collapse extends React.Component { render() { - const {theme, children} = this.props; + const {accessibilityId, theme, children, isOpened} = this.props; return ( -
-
+
+
{children}
From c09cc384926c288fba2855fd9f5e069fe94fcc53 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 15 Feb 2020 19:52:07 -0800 Subject: [PATCH 2/5] Create accessible examples --- example/App/Accessible.js | 64 +++++++++++++++++++++++++++++++++++++++ example/App/index.js | 6 ++++ example/app.css | 6 +++- 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 example/App/Accessible.js diff --git a/example/App/Accessible.js b/example/App/Accessible.js new file mode 100644 index 0000000..e172aef --- /dev/null +++ b/example/App/Accessible.js @@ -0,0 +1,64 @@ +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 ( +
+
    +
  • +
    +
    With a checkbox
    +
    + +
    + +
    + +
    +
    • + +
  • +
    +
    With a button
    +
    + +
    + +
    + +
    +
    • +
+
+ ); +} diff --git a/example/App/index.js b/example/App/index.js index fde3902..46b6b90 100644 --- a/example/App/index.js +++ b/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 = () => ( +
+

Accessible examples

+ +
+

Auto-unmount when closed

closed by default

diff --git a/example/app.css b/example/app.css index 988768e..d817dcc 100644 --- a/example/app.css +++ b/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 { } - From e4d3874c2884ff557b2ea18481788c68690a21e8 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Sat, 15 Feb 2020 19:52:17 -0800 Subject: [PATCH 3/5] Add documentation on accessibility with library --- README.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6f9648b..0e08612 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ npm install --save react-collapse ### yarn ```sh -yarn add react-collapse +yarn add react-collapse ``` ### 1998 Script Tag: @@ -118,6 +118,10 @@ Which ends up in the following markup: **IMPORTANT**: these are not style objects, but class names! +### `accessibilityId`: PropTypes.string + +The paradigm of this library is to not make a decision about how you want to toggle the collapse. +The trade-off here is that accessibility cannot be fully baked in. We provide [2 examples](./example/App/Accessible.js) on how to make an accessible collapse by tying together the control of the collapse and the collapse itself with `props.accessibilityId`. ### `onRest`, `onWork`: PropTypes.func @@ -130,7 +134,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 +169,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 +225,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 From f0f4171f9934160099f9df0eee3aae5f377b2dad Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Thu, 26 Mar 2020 22:17:54 -0700 Subject: [PATCH 4/5] Remove accessibilityId prop --- example/App/Accessible.js | 11 ++++------- src/Collapse.js | 6 ++---- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/example/App/Accessible.js b/example/App/Accessible.js index e172aef..a0eaa05 100644 --- a/example/App/Accessible.js +++ b/example/App/Accessible.js @@ -31,10 +31,8 @@ export function Accessible() { onChange={({target: {checked}}) => setState({isCheckboxCollapseOpen: checked})} />
- -
+ +
@@ -52,9 +50,8 @@ export function Accessible() {
-
+ isOpened={state.isButtonCollapseOpen}> +
diff --git a/src/Collapse.js b/src/Collapse.js index d14fe74..ecbb183 100644 --- a/src/Collapse.js +++ b/src/Collapse.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; export class Collapse extends React.Component { static propTypes = { - accessibilityId: PropTypes.string, theme: PropTypes.shape({ collapse: PropTypes.string, content: PropTypes.string @@ -22,7 +21,6 @@ export class Collapse extends React.Component { static defaultProps = { - accessibilityId: '', theme: { collapse: 'ReactCollapse--collapse', content: 'ReactCollapse--content' @@ -166,14 +164,14 @@ export class Collapse extends React.Component { render() { - const {accessibilityId, theme, children, isOpened} = this.props; + const {theme, children, isOpened} = this.props; return (
-
+
{children}
From 0b14b9c539d36a32477b253f788494999510e9a7 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Thu, 26 Mar 2020 22:17:58 -0700 Subject: [PATCH 5/5] Adjust README --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0e08612..2b8c097 100644 --- a/README.md +++ b/README.md @@ -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'; ``` -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 @@ -118,10 +127,6 @@ Which ends up in the following markup: **IMPORTANT**: these are not style objects, but class names! -### `accessibilityId`: PropTypes.string - -The paradigm of this library is to not make a decision about how you want to toggle the collapse. -The trade-off here is that accessibility cannot be fully baked in. We provide [2 examples](./example/App/Accessible.js) on how to make an accessible collapse by tying together the control of the collapse and the collapse itself with `props.accessibilityId`. ### `onRest`, `onWork`: PropTypes.func