accede-web / accordion Goto Github PK

Hi there, thank you for this very promising library! We are using it in an upcoming project.

I have a specific use case and I'm wondering if this library is a good fit for it:

I have this button:

that takes focus from keyboard:

When I click it (or press Return/Space), I want to "replace" it visually with the following buttons:

(initially the focus is kept on the original button)

then when I press Tab the first item in the content gets the focus:

I managed to implement this with:

button[aria-expanded="true"] > * {
  visibility: hidden;
}

and absolute positioning to make the content visible on top of the button.

I only have one issue: in Firefox the behavior is not the same if I press Space or Return while focusing the button. Return works as expected, but Space displays the content for a millisecond then hides it. It's probably a browser bug because accordion handles Space and Return the same way.

Do you think it's a proper use of the accordion script? Do you see any potential accessibilty issue in this implementation?

(Thanks for this and the tabs implementation!)

It would be nice if there was an openAll method to complement closeAll.

Related

• w3c/aria-practices#304