springload / react-accessible-accordion

Accessible Accordion component for React
https://springload.github.io/react-accessible-accordion
MIT License
787 stars 113 forks source link

Slight improvement - accessibility #367

Open chris-gds opened 1 year ago

chris-gds commented 1 year ago

Hey there - if you alter the following code to use button instead of div you can remove the need for an role attribute as the button element is being used.

The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

Before

<div
            className={className}
            {...rest}
            role="button"
            tabIndex={0}
            onClick={toggleExpanded}
            onKeyDown={handleKeyPress}
            data-accordion-component="AccordionItemButton"
        />

After

<button
            className={className}
            {...rest}
            tabIndex={0}
            onClick={toggleExpanded}
            onKeyDown={handleKeyPress}
            data-accordion-component="AccordionItemButton"
        />

Other notes

There might be some styling and other changes but it would be a improvement ✌🏼