material-ui [FocusTrap] tabindex顺序似乎错误,

ukqbszuj  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(47)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/s/eager-mopsa-tk86fq?file=/src/App.js
为了方便重现情况,将MUI的FocusTrap和focus-trap-react都添加到沙箱中。

当前行为 😯

排序似乎出错了。

预期行为 🤔

在具有不同tabindex的多个可聚焦元素的FocusTrap中,当FocusTrap被聚焦时,顺序应该从索引大于0的任何项目开始,循环直到完成> 0的项目,然后到达具有正常0 tabindex的项目。
示例是:

<button> normal 1</button>
<button tabindex='3'> indexed 3 </button>
<button tabindex='2'> indexed 2 </button>
<button> normal 2</button>
<button tabindex='1'> indexed 1 </button>
<button> normal 3</button>

聚焦顺序应该是:

indexed 1
indexed 2
indexed 3
normal 1
normal 2
normal 3

但MUI的行为是:

normal 1 
normal 2
normal 3
indexed 1
indexed 2
indexed 3

focus-trapfocus-trap-react 的行为似乎是正确的。
可能相关的代码行:
material-ui/packages/mui-base/src/FocusTrap/FocusTrap.tsx
第113行 in ab2e057
| | .sort((a,b)=> |

rkttyhzu

rkttyhzu1#

感谢hosein2398的提醒,我能够复现描述的行为。

据我理解,问题在于我们的哨兵在tabIndex > 0之后会变得聚焦。

因此,一个似乎有效的解决方案是将第一个哨兵设置为首先出现

diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index 7251fe1f4a..10423a3925 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -370,7 +370,7 @@ function FocusTrap(props: FocusTrapProps): JSX.Element {
   return (
     <React.Fragment>
       <div
-        tabIndex={open ? 0 : -1}
+        tabIndex={open ? 1 : -1}
         onFocus={handleFocusSentinel}
         ref={sentinelStart}
         data-testid="sentinelStart"

至于第一个元素的聚焦问题,这在#37672中有讨论。

相关问题