Accessible Accordion component for React
Array.prototype.findIndex in favour of Array.prototype.indexOf to reinstate IE 11 compatibility without use of a polyfill (https://github.com/springload/react-accessible-accordion/issues/237, https://github.com/springload/react-accessible-accordion/issues/224).This release is the culmination of a massive amount of work, resulting in some new features and significantly stronger and more reliable WAI ARIA spec compliance. Notably, the project has been migrated from Flow to Typescript, and a full accessibility audit has been performed - revealing a few holes in our compliance which have now been entirely addressed.
Thanks to everyone who has contributed to this release - and not just those who have written code. Contribution by way of issues relating to spec compliance, pull-request commentary, advice and assistance is all greatly appreciated. Thanks also to the patient users who have endured an extended period without a release while we made sure to get this 100% right! Release cadence should return to normal again now.
Rename all of your AccordionItemTitle components to AccordionItemHeading
and then nest an AccordionItemButton directly inside of each one. Note that
in order for your Accordion to remain spec-compliant, you may not put any
other children inside AccordionItemHeading.
// Before:
import { AccordionItemTitle } from 'react-accessible-accordion';
const headingBefore = <AccordionItemTitle>Foo</AccordionItemTitle>;
// After:
import {
AcccordionItemHeading,
AccordionItemButton,
} from 'react-accessible-accordion';
const headingAfter = (
<AccordionItemHeading>
<AccordionItemButton>Foo</AccordionItemButton>
</AccordionItemHeading>
);
Rename all of your AccordionItemBody components to AccordionItemPanel.
// Before:
import { AccordionItemBody } from 'react-accessible-accordion';
const panelBefore = (
<AccordionItemBody>
Voluptate elit eiusmod laborum proident esse officia dolor laboris
laboris amet nulla officia cillum.
</AccordionItemBody>
);
// After:
import { AccordionItemPanel } from 'react-accessible-accordion';
const panelAfter = (
<AccordionItemPanel>
Voluptate elit eiusmod laborum proident esse officia dolor laboris
laboris amet nulla officia cillum.
</AccordionItemPanel>
);
Remove all instances of hideBodyClassName. This prop is no longer valid, as
AccordionItemPanel components are now hidden without additional styling. If
you must have a different className prop when an item is collapsed, then
you may leverage the new AccordionItemState component.
// Before
import { AccordionItemPanel } from 'react-accessible-accordion';
const panelBefore = (
<AccordionItemPanel className="foo" hideBodyClassName="foo--hidden" />
);
// After:
import {
AccordionItemPanel,
AccordionItemState,
} from 'react-accessible-accordion';
const panelAfter = (
<AccordionItemState>
{({ expanded }) => (
<AccordionItemPanel
className={expanded ? 'foo' : 'foo foo--hidden'}
/>
)}
</AccordionItemState>
);
Remove all instances of AccordionItem’s expanded prop and instead use
Accordion’s preExpanded prop. Note that this means that ‘controlled’
accordions are no longer a supported pattern. Please raise an issue if you
have a use-case which calls for the ability to manually control expanded
state.
// Before
import { Accordion, AccordionItem } from 'react-accessible-accordion';
const accordionBefore = (
<Accordion>
<AccordionItem expanded />
</Accordion>
);
// After:
import { Accordion, AccordionItem } from 'react-accessible-accordion';
const accordionAfter = (
<Accordion preExpanded={['foo']}>
<AccordionItem uuid="foo" />
</Accordion>
);
Remove all instances of Accordion’s accordion prop. Instead, use a
combination of allowZeroExpanded and allowMultipleExpanded props to suit
your requirements. If you were not explicitly setting accordion to false
then you probably are not required to make any changes here.
// Before
import { Accordion } from 'react-accessible-accordion';
const accordionBefore = <Accordion accordion={false} />;
// After:
import { Accordion } from 'react-accessible-accordion';
const accordionAfter = <Accordion allowMultipleExpanded />;
Upgrade to React v16.3+
Remove your minimal-example.css import. These styles only applied
display: none to panels when collapsed, but browsers apply these styles to
elements with the hidden attribute, which the AccordionItemPanel
component now has (when collapsed).
AccordionItemButton component.AccordionItemState component.allowZeroExpanded prop to Accordion.allowMultipleExpanded prop to Accordion.AccordionItemTitle to AccordionItemHeading to be consistent with
the language used in the WAI ARIA spec.AccordionItemBody to AccordionItemPanel to be consistent with
the language used in the WAI ARIA spec.AccordionItemPanel to have a hidden attribute.onChange to always be called with an array of the currently
expanded items.expanded mechanism for AccordionItems.disabled mechanism for AccordionItems.hideBodyClassName prop.This release addresses some performance concerns, and should result in lower memory usage and prevented crashes.
This release brings support for React 16.3+ by way of some minor refactoring to remove deprecated lifecycle methods.
unstated (internal dependency) to latest major release.AccordionItem - suggested by https://github.com/springload/react-accessible-accordion/issues/70
dist folder to list of Flow ignores, so Flow doesn’t error after a build.