Tailwind CSS+Alpine JS实现Phoenix LiveView模态框Tab键交互异常问题

这个问题不是Tailwind CSS代码异常导致的，Tailwind仅负责模态框的样式渲染，Tab键可访问背景元素属于可访问性交互逻辑范畴，和样式框架无关。
你代码中已经添加了aria-modal="true"属性，但目前绝大多数浏览器没有原生实现该属性对应的焦点锁定能力，因此页面背景中的可聚焦元素（按钮、链接、输入框等）仍然可以通过Tab键访问。

你当前用了Alpine.js实现模态框的交互逻辑，最简单的修复方案是使用Alpine官方的焦点锁定能力：

1. 引入Alpine.js的Focus插件（如果项目还没引入的话，直接在Alpine初始化时注册即可）
2. 在模态框根元素（即定义了x-data="{ open: #{@show} }"的div上）添加x-trap="open"属性即可

<div id={"#{@id}"}
  phx-hook="Modal"
  x-data={"{ open: #{@show} }"}
  x-trap="open" <!-- 新增这一行 -->
  x-init={"() => {
              $nextTick(() => $refs.modalRightButton.focus())
              $watch('open', isOpen => {
                console.log('WATCH OPEN = ' + isOpen)
                if (!isOpen) {
                  modalHook.modalClosing(#{@leave_duration})
                }
              })
            }"}
  @keydown.escape.window="if (connected) open = false"
  x-show="open"
  x-cloak>

添加后Alpine会自动处理以下逻辑：

• 模态框打开时将焦点锁定在模态框内部，Tab键无法切换到背景元素
• 模态框关闭时自动将焦点归还到打开模态框前用户聚焦的元素
• 自动实现模态框内部的焦点循环，按Tab到最后一个元素后会跳回第一个元素，反之按Shift+Tab到第一个元素后跳回最后一个

如果不想引入Alpine Focus插件，可以自行在x-init的$watch回调中补充逻辑：

• 模态框打开时，收集所有模态框外的可聚焦元素，统一给它们添加tabindex="-1"属性，并存入临时数组
• 监听模态框内的Tab/Shift+Tab按键事件，手动处理边界跳转逻辑
• 模态框关闭时，遍历临时数组还原所有元素的tabindex属性

内容的提问来源于stack exchange，提问作者floatfoo