Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-accessible-accordion

Package Overview
Dependencies
Maintainers
7
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-accessible-accordion - npm Package Versions

134

3.1.0

Diff

Changelog

Source

[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
ryami333
published 3.0.1 •

Changelog

Source

[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 (https://github.com/springload/react-accessible-accordion/issues/237, https://github.com/springload/react-accessible-accordion/issues/224).
ryami333
published 3.0.0 •

Changelog

Source

[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:

  1. 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>
    );
    
  2. 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>
    );
    
  3. 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>
    );
    
  4. 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>
    );
    
  5. 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 />;
    
  6. Upgrade to React v16.3+

  7. 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.
ryami333
published 2.4.5 •

Changelog

Source

[v2.4.5]

Fixed

  • Fixes SSR.
ryami333
published 2.4.4 •

Changelog

Source

[v2.4.4]

Fixed

  • Fixes performance issue with not re-instantiating render-prop callbacks on each re-render.
ryami333
published 2.4.4-beta.1 •

vincentaudebert
published 2.4.3 •

Changelog

Source

[v2.4.3]

Fixed

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

Changelog

Source

[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)
vincentaudebert
published 2.4.1 •

Changelog

Source

[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.
vincentaudebert
published 2.4.0 •

Changelog

Source

[v2.4.0]

Added

  • Possibility to have custom uuid on AccordionItem - suggested by https://github.com/springload/react-accessible-accordion/issues/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
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc