react-accessible-accordion v3.0.0 Release Notes
Release Date: 2019-03-31 // about 5 years ago-
π 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.
π₯ Breaking Changes - Upgrade Guide:
Rename all of your
AccordionItemTitle
components toAccordionItemHeading
and then nest anAccordionItemButton
directly inside of each one. Note that in order for your Accordion to remain spec-compliant, you may not put any other children insideAccordionItemHeading
.// 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 toAccordionItemPanel
.// 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> );
π 3. Remove all instances of
hideBodyClassName
. This prop is no longer valid, asAccordionItemPanel
components are now hidden without additional styling. If you must have a differentclassName
prop when an item is collapsed, then you may leverage the newAccordionItemState
component.```tsx // Before import { AccordionItemPanel } from 'react-accessible-accordion'; const panelBefore = ( <AccordionItemPanel className="foo" hideBodyClassName="foo--hidden" /> ); ``` ```tsx // After: import { AccordionItemPanel, AccordionItemState, } from 'react-accessible-accordion'; const panelAfter = ( <AccordionItemState> {({ expanded }) => ( <AccordionItemPanel className={expanded ? 'foo' : 'foo foo--hidden'} /> )} </AccordionItemState> ); ```
π 4. Remove all instances of
AccordionItem
βsexpanded
prop and instead useAccordion
βspreExpanded
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.```tsx // Before import { Accordion, AccordionItem } from 'react-accessible-accordion'; const accordionBefore = ( <Accordion> <AccordionItem expanded /> </Accordion> ); ``` ```tsx // After: import { Accordion, AccordionItem } from 'react-accessible-accordion'; const accordionAfter = ( <Accordion preExpanded={['foo']}> <AccordionItem uuid="foo" /> </Accordion> ); ```
π 5. Remove all instances of
Accordion
βsaccordion
prop. Instead, use a combination ofallowZeroExpanded
andallowMultipleExpanded
props to suit your requirements. If you were not explicitly settingaccordion
tofalse
then you probably are not required to make any changes here.```tsx // Before import { Accordion } from 'react-accessible-accordion'; const accordionBefore = <Accordion accordion={false} />; ``` ```tsx // After: import { Accordion } from 'react-accessible-accordion'; const accordionAfter = <Accordion allowMultipleExpanded />; ```
β¬οΈ 6. Upgrade to React v16.3+
π 7. Remove your
minimal-example.css
import. These styles only applieddisplay: none
to panels when collapsed, but browsers apply these styles to elements with thehidden
attribute, which theAccordionItemPanel
component now has (when collapsed).β Added
- Added
AccordionItemButton
component. - Added
AccordionItemState
component. - Added
allowZeroExpanded
prop toAccordion
. - Added
allowMultipleExpanded
prop toAccordion
. - π Out-of-the-box Typescript support.
- β Integration tests to explicitly assert every line of the WAI ARIA 'Accordion' spec.
- Additional keyboard functionality (Up, Down, Left, Right, Home, End).
π Changed
- Renamed
AccordionItemTitle
toAccordionItemHeading
to be consistent with the language used in the WAI ARIA spec. - Renamed
AccordionItemBody
toAccordionItemPanel
to be consistent with the language used in the WAI ARIA spec. - β‘οΈ Updated
AccordionItemPanel
to have ahidden
attribute. - β‘οΈ Roles and aria attributes all audited and updated to match the WAI ARIA spec.
- β‘οΈ Update
onChange
to always be called with an array of the currently expanded items.
π Fixed
- π Fixes SSR (server-side rendering).
- π Fixes incorrect roles and attributes as per the WAI ARIA spec.
β Removed
- π Removed Flow support (but we hope to reinstate typing in the future. Track progress here).
- π Removed undocumented
expanded
mechanism forAccordionItems
. - π Removed undocumented
disabled
mechanism forAccordionItems
. - π Remove
hideBodyClassName
prop.