material-ui [joy-ui][Accordion]展开会破坏 accordion [Details]子元素的tab索引

vs91vp4v  于 6个月前  发布在  其他
关注(0)|答案(5)|浏览(61)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

步骤:

  1. 在AccordionDetails中创建一个带有2个输入的Accordion组件
  2. 展开Accordion
  3. 点击Accordion中的第一个输入,然后按tab键
  4. 观察焦点没有转移到下一个输入

当前行为 😯

当我点击Accordion以展开它,然后点击AccordionDetails中的的第一个输入,然后按tab键时,它不会将焦点转移到下一个输入。

预期行为 🤔

我希望当我点击Accordion以展开它,然后点击AccordionDetails中的输入时,按tab键可以切换到下一个输入。

上下文 🔦

我正在尝试实现一个具有表单元素的Accordion组件。这些是用户可以展开/折叠的高级设置。

你的环境 🌎

npx @mui/envinfo

System:
    OS: macOS 14.1.1
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: Not Found
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.199
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.22 => 5.0.0-beta.22 
    @mui/core-downloads-tracker:  5.14.16 
    @mui/icons-material: ^5.14.16 => 5.14.16 
    @mui/joy: ^5.0.0-beta.13 => 5.0.0-beta.13 
    @mui/material:  5.14.16 
    @mui/private-theming:  5.14.16 
    @mui/styled-engine:  5.14.16 
    @mui/system:  5.14.16 
    @mui/types:  7.2.8 
    @mui/utils:  5.14.16 
    @types/react: ^18.2.34 => 18.2.34 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.2.2 => 5.2.2
bmp9r5qi

bmp9r5qi1#

为什么需要在AccordionDetails中输入?我认为我从未见过这种情况。您的用例是什么?请提供一个CodeSandbox来重现问题。

8xiog9wr

8xiog9wr2#

为什么需要在AccordionDetails中输入内容?我认为我从未见过这种情况。您的用例是什么?请提供一个CodeSandbox来重现问题。
例如,这是Joy UI文档中的示例。
此外,根据ARIA编写实践指南,这将是推荐的行为。
选项卡:将焦点移动到下一个可聚焦元素; accordion 中的所有可聚焦元素都包含在页面选项卡顺序中。

9lowa7mx

9lowa7mx3#

问题似乎是,某些元素( a , button , input , textarea , select , details )在 AccordionDetails 组件内部时会获得一个 tabIndex 为 -1。实现暗示这应该只在 accordion 关闭时发生,当 accordion 再次展开时,应恢复常规的 tabIndex。
当我为 AccordionDetails 组件内的组件显式设置一个 tabIndex (例如对于 Textarea: <Textarea slotProps={{ textarea: { tabIndex: 0 } }} /> ,机制是有效的。当没有显式设置 tabIndex 时,即使 accordion 展开, tabIndex 也是 -1 。我认为这是一个应该修复的错误。

zf9nrax1

zf9nrax14#

解决方案@basti4242似乎只在 accordion 最初展开时起作用(将defaultExpanded设置为true)。否则,在初始化过程中,tabIndexdata-prev-tabindex将被设置为-1:
joy-ui-accordion-tab-index-bug.mov
为了解决这些问题,可以添加两个额外的测试用例。

  1. defaultExpanded设置为false且 accordion 首次展开时,测试标签索引是否为0
  2. 当 accordion 折叠并再次展开时,测试标签索引是否为0
pexxcrt2

pexxcrt25#

查看了这个问题,因为我也遇到了这个问题。
我非常确定这一行需要移除 && !currentTabIndex 条件。在第一次渲染后,currentTabIndex 总是等于 "-1" ,所以除非它本来就不存在,否则这将无法移除属性。
添加 tab-index="-1" 的部分会在双渲染时错误地将 data-prev-tabindex 设置为 "-1" ,例如在 React 开发模式下发生的情况。在测试这个时,之前所做的更改在生产环境中解决了问题,但在开发环境中没有解决。
这种部分修复的另一个问题是,具有显式 tab-index 的元素在默认展开的详细信息中会被清除其 tab index。最好使用显式的 data-prev-tabindex="unset" 或其他方法来跟踪。

相关问题