fix(material/expansion-panel): Prevent focus issue during collapse animation #27684
Conversation
| default: | ||
| if (this.panel.accordion) { | ||
| this.panel.accordion._handleHeaderKeydown(event); | ||
| case TAB: |
There was a problem hiding this comment.
I don't think that preventing users from tabbing is the right way to solve this issue. E.g. one could trigger it by clicking quickly as well. Instead we should not allow the panel to be toggled while an animation is running.
There was a problem hiding this comment.
The primary issue is that when a panel collapses, we expect the focus to smoothly transition to the next element when we press the tab key. However, if someone quickly presses the tab key during the collapse animation, the body panel isn't hidden fast enough, leading to an incorrect focus allocation, which causes some problems.
the collapse animation state:
state('collapsed, void', style({height: '0px', visibility: 'hidden'})),)
To address this, we can implement a solution where the panel animation happens rapidly while it's in the middle of collapsing when using the tab key. This adjustment ensures that the focus behaves correctly. If you have further thoughts, please feel free to share them.
This commit addresses an issue where mat-expansion-panels were breaking when a user attempted to quickly close and tab away from a panel after closing it. The issue occurred because the tab key was being pressed between the collapsing animation, causing the panel body to remain visible and receive focus. To resolve this, we manually set the panel's visibility to hidden when the tab key is pressed during the collapsing animation. This ensures that the next element in the tab order receives focus as expected. Fixes angular#27430.
kharazian
force-pushed
the
fix-rapid-tab-press-during-collapse-animation
branch
from
8a302e3 to
3d1cfd4
Compare
|
Closing in favor of #28646. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This commit addresses an issue where mat-expansion-panels were breaking when a user attempted to quickly close and tab away from a panel after closing it. The issue occurred because the tab key was being pressed between the collapsing animation, causing the panel body to remain visible and receive focus.
To resolve this, we manually set the panel's visibility to hidden when the tab key is pressed during the collapsing animation. This ensures that the next element in the tab order receives focus as expected.
Fix #27430