Changelog

All notable changes to this project are documented in this file. This project adheres to Semantic Versioning.

[v5.0.0]

React Accessible Accordion now supports React 18 with its out-of-order streaming feature.

The new out-of-order streaming feature required using React 18's useId hook. This affects the DOM ids that RAA generates, changing from accordion__heading-raa-0 (React 16 and 17) to accordion__heading-:r0: (React 18). Although this change shouldn't affect most users, if you have any code that selects ids with DOM APIs such as document.querySelector() then the : characters will need escaping with \\ eg. document.querySelector('#accordion__heading-\\:r0\\:').

When using older versions of React 16 or 17 the same DOM ids will be generated.

Because of this change in behaviour this is a major version upgrade.

[v4.0.0]

Making role="region" optional on panels.

The new behaviour has no role="region" by default, and developers can opt-in using the region prop as <AccordionItemPanel region>.

The previous behaviour had every panel as a role="region" which created an excessive amount of regions for the screen reader.

Because of this change in behaviour this is a major version upgrade.

[v3.3.0]

Changed

Bundle size reduction

[v3.2.0]

Added

Use console.error when provided with invalid HTML5 ids

[v3.1.1]

Fixed

Use hidden capabilities rather than something needing custom css everywhere.

[v3.1.0]

Added

New AccordionItem property: dangerouslySetExpanded enabling external control of the expansion.
New AccordionItem property: activeClassName to support expansion-related styles

Fixed

hidden support on Microsoft Edge

[v3.0.1]

FIXED

Refactor away Array.prototype.findIndex in favour of Array.prototype.indexOf to reinstate IE 11 support without use of a polyfill (#237, #224).

[v3.0.0]

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 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).

Added

Added AccordionItemButton component.
Added AccordionItemState component.
Added allowZeroExpanded prop to Accordion.
Added allowMultipleExpanded prop to Accordion.
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 to AccordionItemHeading to be consistent with the language used in the WAI ARIA spec.
Renamed AccordionItemBody to AccordionItemPanel to be consistent with the language used in the WAI ARIA spec.
Updated AccordionItemPanel to have a hidden 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 for AccordionItems.
Removed undocumented disabled mechanism for AccordionItems.
Remove hideBodyClassName prop.

[v2.4.5]

Fixed

Fixes SSR.

[v2.4.4]

Fixed

Fixes performance issue with not re-instantiating render-prop callbacks on each re-render.

[v2.4.3]

Fixed

Fixes issue with spacebar scrolling the page (see PR#99)
Fixes IE compatibility by replacing uses of Array.prototype.find.

[v2.4.2]

Changed

Removes invalid test
Minor change to package.json to remove some redundant Jest config.
Upgrade one forgotten devDependency.

Fixed

Emergency bug fix to remove asyc/await from the code (see PR#95)

[v2.4.1]

This release brings support for React 16.3+ by way of some minor refactoring to remove deprecated lifecycle methods.

Changed

Replace deprecated lifecycle methods 'componentWillReceiveProps', 'componentWillUpdate' and 'componentWillMount'.
Updated unstated (internal dependency) to latest major release.
Updated all devDependencies.

[v2.4.0]

Added

Possibility to have custom uuid on AccordionItem - suggested by #70

Fixed

Fix rollup config after version bump - https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32
Adds existing arrow animation for aria-selected=true in fancy CSS

[v2.3.1]

Fixed

Add dist folder to list of Flow ignores, so Flow doesn’t error after a build.
Issue with babel helpers. Just reverted commit 6f9f2c324a6fad4a35a84307241f4f710407f242 for now.

Changed

Removed a couple of old npm scripts from the days before we introduced rollup to the build pipeline.
Upgraded a bunch of devDependencies, including Webpack which required a bit of a config refactor.

[v2.3.0]

Changed

Refactored to use unstated for state-management instead of mobx + mobx-react, cutting the size of the bundle by approximately 60% 🎉.

[v2.2.1]

Changed

Fixes mixed up filenames in the README

[v2.2.0]

Added

Demo styles added to the bundle as two optional files:
- minimal-example.css: 'Minimal' theme - hide/show the AccordionBody component
- fancy-example.css: 'Fancy' theme - boilerplate styles for all components, as seen on our demo

[v2.1.0]

Added

Publish flow types.

Changed

Update all React components to accept arbitrary HTMLDivElement props (eg. 'lang', 'role' etc).
Upgrade all dev-dependencies except the eslint configs.
Replace snapshot tests with explicit assertions in AccordionItemBody and AccordionItemTitle.
Add specific assertions to tests in accordionStore.
Minor syntax change in AccordionItemBody

[v2.0.0]

Version 2.0 represents a total refactor, with a new context-based approach which should make this library more flexible, more maintainable and more comprehensively testable.

As this is a major release, users should expect some breaking changes - though they should be limited to the removal of the activeItems prop (read more below).

Added

Exports resetNextId (#41).

Fixed

Defect where controlled components' props were overridden by React.Children.map (#33).
Defect where accordion crashed with unexpected children types (#45).
Defect where React Accessible Accordion's components could not be extended.
Defect where the children of Accordion or AccordionItem could not be arbitrary.
Defect where AccordionItem had to be a child of Accordion (as opposed to to an arbitrary-level descendant).
Defect where AccordionItemBody and AccordionItemTitle had to be children of AccordionItem (as opposed to arbitrary-level descendants).

Removed:

🚨 Breaking change 🚨 activeItems property is no longer supported.

Control at the Accordion level (via the activeItems prop) and AccordionItem level (via the expanded prop) fought against one another, and choosing which control mechanism to give preference to would have been an arbitrary decision - and whichever way we went, we would have had test cases which demonstrated unusual/unpredictable behaviour. The activeItems mechanism was the obvious one to remove - it was arguably the "less React-y way", and we considered it more of a convenience than a feature. Crucially though, it fought too hard against the new architecture of the library, and keeping it would have prevented us enabling lots of other new features or resolving some of the issues that our users had raised.

If you're currently using activeItems, you're upgrade path might look like this:

const items = ['Foo', 'Bar'];
const activeItems = [0];

return (
-    <Accordion activeItems={activeItems} />
+    <Accordion />
        {activeItems.forEach((item, i) => (
-            <AccordionItem key={item}>{item}</AccordionItem>
+            <AccordionItem key={item} expanded={activeItems.includes(i)}>{item}</AccordionItem>
        )}
    </Accordion>
);

Please don't hesitate to reach out to one of the maintainers (or raise an issue) if you're having trouble upgrading - we're happy to help!

[v1.0.1]

Renders predictable id attributes.(#29)

[v1.0.0]

Replace prop-types implementation with flow-types (#22) Thanks @ryami333 for the great contribution

NB: This version is backward compatible. It's just bumping to 1.0 to represent maturity rather than API changes.

[v0.6.0]

Improved accessibility support (Following #19)
Adds possibility to programmatically open items(#13) Thanks @epotockiy for the contribution
Improved accessibility status on demo page
Documentation about accessibility for this component

[v0.5.0]

Possibility to add a CSS class to hidden blocks (Following #16)
Githooks are executable (#15)
Bump to Node 8 / NPM 5

[v0.4.0]

Supports React 15.5+

[v0.3.0]

No warnings when you have only one item in the accordion

[v0.2.0]

Possibility to have extra blocks in AccordionItem

[v0.1.2]

Accordion mode / Collapse mode
Possibility to pre expand items
100% coverage with unit tests
Possibility to customise CSS.
Clean CSS for the demo/github page.

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

Changelog

Changed

Added

Fixed

Added

Fixed

FIXED

Breaking Changes - Upgrade Guide:

Added

Changed

Fixed

Removed

Fixed

Fixed

Fixed

Changed

Fixed

Changed

Added

Fixed

Fixed

Changed

Changed

Changed

Added

Added

Changed

Added

Fixed

Removed:

[vx.y.z] Template from http://keepachangelog.com/

Added

Changed

Fixed

Removed