Question

我注意到有时焦点的键盘标签搞砸了。在这种情况下，我使用的是Blueprint Dialog组件，其中包含要提交的表单。该表单使用Redux Form包装的Blueprint输入组件构建。当对话框首次打开时，我可以选择表单的浓度字段。接下来的两个选项卡将隐藏元素（请参见下面的第一张图片）。那么＆＃34; x＆＃34;关闭对话框是焦点，然后浓度场再次聚焦，最后我可以选项卡并聚焦其余的字段和按钮。

有关如何改善这一点的任何提示？我不清楚为什么pt-overlay-backdrop和pt-overlay-content都不想被标记。我看到他们都有tabindex =＆＃34; 0＆＃34; ..也许应该是-1？

谢谢！

Answer 1

将Dialog的{{1}}设置为false可以解决此问题。

Answer 2

对话框中的

制表必须是循环的，这意味着在制表时焦点不能离开对话框。这可以通过两种方式实现：
1）（硬性方式）跟踪对话框中以及在最后一个元素上的制表时将所有可选项元素移到第一个元素上（并在第一个移位上将Shift + tab移到最后一个上）。 2）（简便方法）通过将分页索引为0来在分页中包括叠加，只要焦点位于分页上的分页上，将焦点移到对话框上的第一个元素以使其循环，而永远不会将焦点留在背景上。

根据我的理解，这可能是故意的（由蓝图开发商开发）。
您可以通过编写自己的脚本来更改此行为：
首先检查对话框是否打开
1）可能是通过获取覆盖类的elementsByClassName来确认对话框已打开。
2）然后通过查询dialog-content节点获取dialog内的所有tabbable元素。 3）然后编写循环焦点转移逻辑
将这些内容包装在一个函数中，然后将此函数指定为Tab键上的侦听器。
如果您需要示例，请参考以下库：
npm package keyboard-navigator

对逻辑的一瞥可能是：

var modals = document.getElementsByClassName("kbn-modal");
            if(modals && modals.length > 0){
                var focusableElements = modals[0].querySelectorAll("input, select, checkbox, textarea, button, *[tabindex='0']");
                var firstFocusableElem = focusableElements[0];
                var lastFocusableElem = focusableElements[focusableElements.length - 1];

                //if the present activeElement is outside modal, focus first-focusable-element in modal
                if(!modals[0].contains(document.activeElement)){
                    firstFocusableElem.focus()
                    event.preventDefault();
                }

                if(focusableElements){
                    //tab on lastfocusable element focus firstfocusable element
                    if(document.activeElement == lastFocusableElem && event.shiftKey == false){
                        firstFocusableElem.focus();
                        event.preventDefault();
                    }
                    //shift+tab on firstfocusable element focus lastfocusable element
                    if(document.activeElement == firstFocusableElem && event.shiftKey == true ){
                        lastFocusableElem.focus();
                        event.preventDefault();
                    }
                }
            }

蓝图对话框表单的选项卡式焦点问题

2 个答案: