html - 位置为 : relative is hidden once button has focus in overflow-y:auto parent container 的所有内容

Question

我正在创建一个可在元素中使用的可访问聊天窗口。按钮必须可聚焦以对每条消息执行操作。它在不关注按钮的情况下工作正常，但关注是一项可访问性要求。

这是一个晦涩的用例，一旦按钮获得焦点，所有内容就会消失。这似乎只有当按钮父级设置了 position:relative 时才会出现这种情况。

有人遇到过吗？我首先更喜欢仅使用 CSS 的建议。

可见于:Firefox 和 Chrome

Codepen demo

    .container {
      width: 20em;
      height: 20em;
      padding: 1em;
      background-color: darkgreen;
    }
    
    .container > div {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
      backgorund-color: purple;
    }

    .container ul {
      width: 100%;
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .container ul > li {
      display: block;
      padding: .5em;
      margin: 0 0 2em;
      background-color: grey;
      color: white;
    }

    .container ul > li button {
      position: absolute;
      top: -999em;
      right: -999em;
    }

    .container ul > li button:focus {
      outline: 2px solid purple;
    }

    .container ul > li:hover button,
    .container ul > li button:focus {
      top: 0;
      right: 0;
    }

    .message-inner {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-around;
      position: relative;
    }

HTML And CSS:

    <div class="container">
    <div>
        <ul>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            <li>
                <div class="message-inner">
                <span class="text">Content of item in here is big bg big</span>
                <span class="date">1/1/11</span>
                <button> some action</button>
                </div>
            </li>
            </ul>
        </div>
    </div>

Answer 1

通过从您的 CSS 中删除以下内容可以解决此问题:

.container ul > li button {
  position: absolute;
  top: -999em;
  right: -999em;
}

参见 this fiddle用于演示。

MS Edge 似乎没有任何问题，只有 Firefox 和 Chrome。

如我所见，您试图隐藏按钮，直到父级 li 获得焦点。为了保持“可访问”状态，您通过添加上述代码将其从 View 中删除。那么this solution怎么样？ ，利用 opacity 和 pointer-events 代替？