4

我使用 react 和 react-modal 在网站上创建覆盖。此叠加层包含各种元素以及一个表单（下面的概述）。我希望能够使用 TAB 键引导用户完成表单。我分配tabindex=0给所需的元素以按出现顺序可选项卡。

我的问题是：它在 Chrome（版本 61.0.3163.100）中不起作用，而在 Firefox 中起作用。我读到，如果 DOM 树上的任何元素不可见或高度/宽度为 0，就会发生这种情况。我做了一些样式更改来解决这个问题，但没有任何效果。

<div class="ReactModalPortal">
<div data-reactroot="" class="ReactModal__Overlay" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;">
    <div class="ReactModal__Content" tabindex="-1" aria-label="Questionnaire" style="position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; background: transparent none repeat scroll 0% 0%; overflow: auto;">
        <!-- Some other stuff and nested elements -->
        <div id="...">
            <form>
                <input tabindex="0">
                <button tabindex="0">
            </form> 
        </div>   
    </div>   
</div>

如您所见，其中一个父元素具有tabindex="-1". 当通过 Chrome 中的检查功能或使用 JS 以编程方式更改它时，问题仍然存在（或者如果元素最初使用此索引呈现，是否存在差异？）。

更新

我意识到是其他原因导致了这些问题。initial: all我在模态框的根节点上使用 CSS 属性将我的内部 CSS 与外部的所有内容隔离开来。由于某种原因，这阻止了 tabindex 的工作。如果你能帮助我理解，我会奖励这个赏金。我的解决方法就是不使用all: initial（无论如何它不兼容 IE，但我知道也没有真正好的替代方案）。

4

2 回答 2

5

all: initial使用初始属性重置节点的所有 CSS 属性。

对于display属性，初始值为inline.

因此，设置all: initial为根 div 会将display属性设置为内联。一个inline元素没有高度或宽度，所以它们是 0x0。

这也是因为div仅包含固定的、绝对定位的元素。

React Modal 通过对模态内的所有元素运行循环来检查元素是否可聚焦。但是，要使元素具有焦点，它必须是可见的。对于每个元素，我们必须迭代直到 body 元素以确保它的可见性。

这是检查元素是否可见的函数。

function hidden(el) {
  return (
    (el.offsetWidth <= 0 && el.offsetHeight <= 0) || el.style.display === "none"
  );
}

如您所见，我们的 div 将没有offsetHeight或offsetWidth将被视为隐藏。因此，模态不能不聚焦。

于 2017-10-31T14:51:43.287 回答
0

我遇到了同样的问题并且无法让其他解决方案快速工作，所以我想出了蛮力方法。为容器元素创建一个引用，该元素包含您希望使其成为可选项卡的可聚焦元素。

  const formRef = useRef();

  <ReactModalTabbing containerRef={formRef}>
        <form ref={formRef} onSubmit={handleSubmit}  >
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </form>
  </ReactModalTabbing>

这是组件

import React, { useState, useEffect } from 'react';

const ReactModalTabbing = ({ containerRef, children }) => {
    const [configuredTabIndexes, setConfiguredTabIndexes] = useState(false);

    const focusableElements = () => {
        // found this method body here.
        //https://zellwk.com/blog/keyboard-focusable-elements/
        return [...containerRef?.current?.querySelectorAll(
            'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]):not([type="hidden"]):not([disabled])'
        )];
    }

    const isTabbable = (element) =>{
        if(element.getAttribute('tabindex')){
            return true;
        }
        return false;
    }

    const findElementByTabIndex = (tabIndex) => {
        return containerRef?.current?.querySelector(`[tabindex="${tabIndex}"]`);
    }
    
    const moveFocusToTabIndex = (tabIndex) => {
        findElementByTabIndex(tabIndex)?.focus();
    }

    const handleKeyDownEvent = (event) => {
        if(!isTabbable(event.target)){
            return;
        }

        const tabIndex = parseInt(event.target.getAttribute('tabindex'));

        if(event.shiftKey && event.key === 'Tab'){
            moveFocusToTabIndex(tabIndex - 1);
        }else if(event.key === 'Tab'){ //should probably make sure there is no other modifier key pressed.
            moveFocusToTabIndex(tabIndex + 1);
        }
    }

    useEffect(() => {
        if(!configuredTabIndexes && containerRef.current){
            setConfiguredTabIndexes(true);
            focusableElements().forEach((el, index) => el.setAttribute('tabindex', index + 1));
            containerRef?.current?.addEventListener('keydown', handleKeyDownEvent);
        }
    });

    return children;
}

export default ReactModalTabbing;
于 2021-02-19T20:02:47.230 回答