IMO, it would be a good idea to provide a .css in the distribution. When you use npm to install this, there is no .css installed. This forces the user to look into the demo sources and its .css and to basically clone it in the project's css.

Ideally, you'd include the react-accessible-accordion/dist/accordion.min.css (or whatever) and then expand on the default rules with project specific ones.

Given the actual behavior of the accordion still missing a prop to expand only from the arrow button since is required to put some buttons in the header

I get a warning

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I checked all my components and figured out that error occurred after adding this accordion component.

Could you fix this?

Hello!

I tried to create dynamically accordion with condition.

But I got an ERROR:

accordion.js?96e3:69 Uncaught TypeError: Cannot read property 'props' of null
at eval (accordion.js?96e3:69)
at mapSingleChildIntoContext (react.development.js?99ee:914)
at traverseAllChildrenImpl (react.development.js?99ee:787)
at traverseAllChildrenImpl (react.development.js?99ee:803)
at traverseAllChildren (react.development.js?99ee:858)
at mapIntoWithKeyPrefixInternal (react.development.js?99ee:934)
at Object.mapChildren [as map] (react.development.js?99ee:956)
at Accordion.preExpandedItems (accordion.js?96e3:68)
at new Accordion (accordion.js?96e3:40)
at constructClassInstance (react-dom.development.js?cada:9760)

The example of my code:

const isCompany = false;

<Accordion>
  <AccordionItem>
    <AccordionItemTitle className={styles.item}>
      <div className={styles.accordionArrow} role="presentation" />
      <h3 className={styles.itemHeader}>
        Accordion Header 1
      </h3>
    </AccordionItemTitle>
    <AccordionItemBody>
      <p>
        Accordion Body Content 1
      </p>
    </AccordionItemBody>
  </AccordionItem>
  
  {isCompany && (<AccordionItem>
    <AccordionItemTitle className={styles.item}>
      <div className={styles.accordionArrow} role="presentation" />
      <h3 className={styles.itemHeader}>
        Accordion Header 2
      </h3>
    </AccordionItemTitle>
    <AccordionItemBody>
      <p>
        Accordion Body Content 2
      </p>
    </AccordionItemBody>
  </AccordionItem>)}
</Accordion>

Could you please help me to resolve this problem?

In the demo https://springload.github.io/react-accessible-accordion/ as well, in the default settings, the accordion arrow doesn't change direction on expanding.

When using react-accessible-accordion in combination with Next.js I get the following warning on occasion Prop 'id' did not match. Server: "accordion__title-X" Client: "accordion__title-X". I have multiple pages with different react-accessible-accordions, and this is what causes the issue I believe. The server uuid is mismatched with the client uuid.

Would it be possible to add a ResetIdCounter similar to react-tabs? Or is there already a solution I am unaware of?

I am using React V16.3.1 from a create-react-app and the version 2.3.0 release causes the build to break with the error: babelhelpers is not defined

Workaround: roll back to 2.2.1 due to this error

React have published this package for library maintainers to ease the transition: https://github.com/reactjs/react-lifecycles-compat/blob/master/index.js

1034 |
1035 | var createReactContext = unwrapExports(lib);
1036 |

1037 | var _typeof = typeof Symbol === "function" && babelHelpers.typeof(Symbol.iterator) === "symbol" ? function (obj) {
1038 | return typeof obj === 'undefined' ? 'undefined' : babelHelpers.typeof(obj);
1039 | } : function (obj) {
1040 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === 'undefined' ? 'undefined' : babelHelpers.typeof(obj);

Now we can expand AccordionItem only on first render, after this we can't control item expand process via props or methods.
Could you please add functionality (prop on Accordion or AccorionItem) which will allow to change expand state of AccordionItem

This seems pretty fundamental to the whole idea of "accordion". I was surprised animation isn't part of this.

You might want to take a look at this, which gives you both callbacks and classes:

https://github.com/faceyspacey/animated-transition-group

There's some old scripts in package.json which look like they were from before we were using rollup, eg. js and js:watch. They ought to be removed now.

Looking at #43

I have fear that this PR will be merged.
I think this component should be as "dump" as possible.
And guy who will use these components should decide what state management to use. Redux, Mobx, mobx-state-tree or other flux like library. And wrap this into HoC

is it possible to open the accordion progammatically

Get inspiration (steal?! :D) from @katie-day 's work on Wellington Airport? :)

When adding a conditional component under <AccordionItem/> component I'm getting this error:

Warning: Failed prop type: Invalid prop `children[2]` of type `boolean` supplied to `AccordionItem`, expected a single ReactElement.

EDIT

@vincentaudebert sorry my description was hurried yesterday. Basically what I'm trying to do was add a conditional component inside the <AccordionItem> component. However when I try to do so I get an error as per the Warning message above.

So here's my use-case, I wanted to add a conditional child component, for example a <div/> tag inside the <AccordionItem>, like so:

<AccordionItem>
  {showDiv === true && <div/>}
</AccordionItem>

I believe the problem is because this statement {showDiv === true && <div/>} returns a boolean if showDiv === true is falsy. I could try the following:

{showDiv === true ? <div/> : null}

However, this throws error as well as null isn't the expected type of <AccordionItem/> so our workaround in the ACC project is to enclose everything inside a parent component.

<AccordionItem>
  <div className="parent-component">
    {showDiv === true && <div />}
  </div>
</AccordionItem>

I think the fix for this is to allow a mixed child type for the AccordionItem component. But I'm not sure if it's a thing this library is keen to support.

It would be awesome if the accordion could have a property that allows the accordion to collapse all Accordion Items upon entering a certain screen width (i.e. for mobile and tablet screen sizes).

Hello,

I'm using the 1.0.2 version of the accordion and I'm doing some testing using the keyboard (mac) only and when I open and close the accordion with my space bar the page seems to scroll down further each time. Is there any way to stop the page from scrolling when opening/closing the accordion with the keyboard?

I'm noticing the same behavior on your sample page. https://springload.github.io/react-accessible-accordion/

I see the same behavior in Chrome, FireFox and Safari....haven't tried IE yet.

Thanks,

Dave

I am trying to use react-accessible-accordion in .net core react js when i define packagein package.json file its not finding the module in my page.
please find the below details
Package.json file:
"dependencies": {
"react-accessible-accordion": "^2.4.1"
}
Home.tsx file:

import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';

Iam getting the following error

NodeInvocationException: Prerendering failed because of error: ReferenceError: regeneratorRuntime is not defined

Please help to resolve the error.

Eg. accordion__body-86700606-2479-457f-bf7b-129f806c918a. Unfortunately this means that during snapshot testing, RAA elements will render different ids on every run (which makes tests fail).

For internal testing purposes, we're mocking the uuid module such that it just returns the same string every time. At the very least, I think we should document this approach in our Readme so that our users can do the same.

Alternatively, we could replace the uuid package with the consecutive module. That way, id's will always be both unique and predictable.

At the moment the structure has to be:

Accordion
  AccordionItem
     AccordionTitle
     AccordionBody

It would be great to allow some other elements like div or anything in between.

At least between Accordion and the items as you might need to wrap items into another component.
For instance in my case I would like to wrap the Item into a FormSection from redux-form.

DEMO

step.1
In the editor casually modify the content, and then save.

step.2
Click AccordionItem. Pay attention to the change of key.

Following #93 it would be great to support TypeScript typing.

This is an issue to be picked by someone outside the core crew as we don't have enough experience with TypeScript.

I use the accordion version where only 1 item can be expanded at a time. I also want to add an onClick event on the tabs(that are the AccordionItemTitle tags i presume) that changes the state to something else. if i add the onclick event, the expand on click event is not working anymore.

Where can i add my custom onClick event to go together with the existing ones from this component? Thanks :)

We have an inconsistent file naming schema. Some are kebab-case, and some are camel-case. I think we should update the former to match the latter.

When i create dynamic AccordioItem by using map method, "expanded" props are not working.

Ex:

renderAccordian(list) {
const accordianData = list.map((update, index) => {
   let accorClassName = false;
   if(index === 1 )
     accorClassName = true;
  return (<AccordionItem  expanded={accorClassName }>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>
                    Body content
                </p>
            </AccordionItemBody>
        </AccordionItem>
        );
   }
  return accordianData ;
}
render(){
const showAccordian = this.renderAccordian(this.props.portalUpdates);
<Accordion onChange={this.onAccordionChange} >
        {showAccordian}
 </Accordion>
}

To fully respect accessbility contraintes, i have to add some properties on nodes :

• Accordion -> role="tablist"
• AccordionItemTitle -> aria-selected="true" when element is selected
• AccordionItemTitle -> aria-selected="false" otherwise
• AccordionItemBody -> aria-labelledby="[ID_tab]"
  Is it possible to add that please ?

Springload has a "no lorem ipsum" policy. While I wouldn't mind a quick dose of lorem in development, for the online demo it's a missed opportunity to make the accordions look more realistic by using real-world content.

I would suggest replacing the lorem with descriptions on how to use the accordion ("eat your own dog food"), potentially with code snippets powered by Prism.js.

Edit: here is a very basic example

unstated just released 2.0 and it requires some code modifications to work.

onChange function get only one parameter uuid which doesn't informative for outside components, could you replace it by an accordion item index or add this index as the second parameter of the onChange function

First of all, please forgive me for bad English, I have a problem.
This is my code.
When re-rendered, the expanded failure.
I want first accordion-item is actived.
Thank you.

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

class MainPanel extends Component{
    constructor(){
        super();
        this.state = {
            list:[],
        };
    }

    getData(){
        let {status,list} = {
            "status": "ok",
            "list": [{
                "p": [{
                    "text": "111111"
                },{
                    "text": "222222"
                }],
                "title": 100
            }, {
                "p": [{
                    "text": "33333"
                }],
                "title": 200
            },{
                "p": [{
                    "text": "444444"
                }],
                "title": 300
            }]
        };
        if(status === 'ok'){
            this.setState({list});
        }
    }

    render(){
        const {list} = this.state;
        let node = list.map(({p,title},i)=>{
            let p_node = p.map((d,j)=>{
                return <div key={j}>
                    {d.text}
                </div>
            });
            return <AccordionItem key={i} expanded={true}>
                <AccordionItemTitle>
                    <div className="u-position-relative">
                        <span className="am-text-success"><strong>{title}</strong></span>
                        <div className="am-fr am-text-success">
                            <i className="accordion__arrow" role="presentation"/>
                        </div>
                    </div>
                </AccordionItemTitle>
                <AccordionItemBody>
                    <div className="am-g">
                        {p_node}
                    </div>
                </AccordionItemBody>
            </AccordionItem>
            });
        return <div className="page">
            <form className="form">
                <div className="form-cell">
                    <div className="form-cell__bd">
                        <input type="tel" pattern="[0-9]*" maxLength="11" className="form-input" placeholder="Please Enter......"
                           onChange={this.getData.bind(this)}/>
                    </div>
                </div>
            </form>

            <div className="product">
                <Accordion>{node}</Accordion>
            </div>
        </div>
    }
}

It's currently not possible to use this component with complete control over which items are expanded, which is a pretty common use case in a lot of React components. This line below, with the use of activeItems and onChange causes onChange to be called twice if a title is clicked.

Why would you need to inform the parent that the items have changed, when the parent component is giving you activeItems?

Solution: Make a ControlledAccordion component that uses props.activeItems to render expanded items, so there's no regression if anybody is using this functionality for a different use case.

As @samanthaksanders has raised - there are ways you can use this package in a non-accessible way, so we should write a little about how to use this correctly.

Examples:

• Only using phrasing content in AccordionItemHeading. See also documentation for HTMLButtonElement.

I upgraded from 0.5.0 to 1.0.1 this morning and I am getting this message.

./node_modules/react-accessible-accordion/dist/AccordionItem/accordion-item.js

Module not found: Can't resolve 'uuid' in '/test/node_modules/react-accessible-accordion/dist/AccordionItem'

At the moment peerDependencies for react/react-dom are ^15.4.2

I think we can safely go for ^15.4.0

To be done on next release.

These linting errors were revealed by installing the enzyme Flow definitions. What this has actually uncovered though is that those two tests are actually invalid, so need to be refactored/rewritten. Also begs the question: shouldn't we have some merge protection against linting errors?

npm run coveralls is broken at the moment

npm run coveralls

> [email protected] coveralls /Users/vincentspringload/Development/sites/react-accessible-accordion
> cat ./coverage/lcov.info | coveralls


/Users/vincentspringload/Development/sites/react-accessible-accordion/node_modules/coveralls/bin/coveralls.js:18
        throw err;
        ^
Bad response: 422 {"message":"Couldn't find a repository matching this job.","error":true}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] coveralls: `cat ./coverage/lcov.info | coveralls`
npm ERR! Exit status 1

Start of investigation: lemurheavy/coveralls-public#703

As that lovely badge on our Readme is saying... our devDeps our out of date. Time for an upgrade.

I noticed that the tests are a bit messy.
For instance, Accordion tests end up testing some logic based in the AccordionItemTitle component.

I reckon we should keep the tests as close as possible to the component and restrict them to only test the component features.
Test coverage is here to help achieve this.

Investigate how to support Flow

When I import { AccordionItem } from 'react-accessible-accordion for example, and I want the resulting div to have an arbitrary data attribute for example, RAA currently swallows this instead of propagating it to the resulting div.

Eg.

<AccordionItem data-foo="bar">

Currently can navigate using tab, however we could build on this and add further keyboard support.

For reference on expected controls
https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html#kbd_label

Hey!

I'm creating a accordion component myself, and during the research I looked at the WAI-ARIA Authoring Practices 1.1 which contains a section about Accordion together with an example.

I just wanted to check with you guys, if you had read it, and if so, what you think about it.

Cheers

EDIT 2017-10-11: Added links.

Now i use your react-accessible-accordion, i found the default event is click. if i want to use mouseover but not click. how should i do?

I'm having difficulty closing the open accordion when the component re-renders. Is there an option for this?

Hi,
Accordion not loading in IE 11. May I know if there is workaround for this.

Thanks
Rama