FocusTrapZone: Refactor trapping behavior #8055
Description
Environment Information
- Package version(s): 6.141.1
- Browser and OS versions: n/a
Please provide a reproduction of the bug in a codepen:
CodePens in various linked issues below.
Actual behavior:
FocusTrapZone (FTZ) has issues with its trapping behavior for the following reasons:
- Existing FTZ uses a key listener approach which does not capture all focus change events.
- FTZ's key listener approach requires FTZ to parse all of its children to determine focusability, which leads to a lot of tricky edge cases and brittle functionality prone to regression.
The creation of this issue was triggered by #8053 in which recent workarounds were reverted since FTZ was identified as the root cause of issues being reported.
Expected behavior:
FTZ should really only care about when focus enters or leaves its boundaries, not what focus does within FTZ. A new approach should be taken that allows controls to behave according to their default behavior within FTZ and does not require FTZ to review its internal hierarchy for determining navigation behavior. FTZ should instead detect when focus enters or exits FTZ and then change focus behavior accordingly.
This issue should also not regress any recently closed FTZ issues and resolve open FTZ navigation / focus issues, including (but not limited to): #4191, #4649, #5160, #6526, #7679, #7839, #7891, #7992, #8011.
Note: Some of these issues were previously closed but were fixed or regressed with the merge of #8053. Therefore this issue must make sure these issues are also resolved and / or not regressed with the resolution for this issue.
Ideal outcome:
Ideally browsers should inherently support a CSS tag similar to aria-modal in which the browser handles trapping behavior. We should follow up or create another issue to track this discussion.
Priorities and help requested:
Are you willing to submit a PR to fix? (Yes, No)
Requested priority: (Blocking, High, Normal, Low)
Products/sites affected: (if applicable)