Skip to content

Slight improvement - accessibility  #367

@chris-gds

Description

@chris-gds

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 ✌🏼

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions