Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slight improvement - accessibility #367

Open
chris-gds opened this issue Sep 29, 2023 · 0 comments
Open

Slight improvement - accessibility #367

chris-gds opened this issue Sep 29, 2023 · 0 comments

Comments

@chris-gds
Copy link

chris-gds commented Sep 29, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant