mui
[joy-ui][Accordion] Fix AccordionDetails tabindex when expanding
Description:
This PR addresses an issue where the tabindex of elements inside AccordionDetails is incorrectly managed upon expanding the accordion, leading to focus navigation issues. Specifically, elements lose their tabindex, causing improper tab order navigation.
Changes Made:
- Introduced the use of data-prev-tabindex="unset" to handle elements that originally did not have a tabindex, ensuring that these elements' tabindex attributes are removed correctly when necessary.
Closes #40116
Netlify deploy preview
https://deploy-preview-43246--material-ui.netlify.app/
Bundle size report
Details of bundle changes (Toolpad) Details of bundle changes
Generated by :no_entry_sign: dangerJS against 1f4a6c0a16237bb65dc9f67a9fdf4d0ae9ec2487
Would you prefer adding the hidden attribute in this PR, or should we create a new one to address this enhancement separately?
@Shreypatel13ll we can do the enhancement in another PR, but we should add some tests to this PR.
Changes made:
The previous logic for managing tabindex attributes in the Accordion component failed to handle React’s development mode correctly. In development, double-rendering caused elements to incorrectly retain tabindex="-1", even when they should have reverted to their original tabindex value. https://github.com/mui/material-ui/pull/43246/commits/96684a9e6002bd40d4461842b92afa6a9a28c9b9
Tests Added:
- Retaining Default tabindex If Not Explicitly Set:
This test verifies that an input element with no explicitly set tabindex defaults to -1 when the accordion is collapsed, and to 0 when expanded. It also checks that toggling the accordion correctly restores the tabindex values across multiple open/close cycles
- Retaining tabindex="-1" When Explicitly Set:
This test ensures that an input element explicitly set with tabindex="-1" retains it's non-focusable state regardless of the accordion's expanded or collapsed state. It confirms that the element does not incorrectly become focusable when the accordion is toggled open.
https://github.com/mui/material-ui/pull/43246/commits/b219a4d7107219a623f07e496817e47ff9c27ecd
Could you let me know when we might merge this issue? I'm currently working on a project where this component is essential. Thank you!
@Shreypatel13ll sorry for the late response, we're focused on supporting the Material UI v6 release at this moment. I'll get back to you soon.
@aarongarciah and @siriwatknp Thanks so much for reviewing and approving the changes! I really appreciate the support.
As for the previously discussed enhancement of using the hidden attribute for managing visibility in the AccordionDetails, I'm happy to work on it. I'll open a new PR to address that enhancement separately as suggested earlier.