Вложенная вкладка уровня не работает HTML CSS?

Question

Я добавил свой код и демонстрационную ссылку Нажмите здесь

Вот некоторые элементы списка, каждый список содержит некоторую кнопку действия, чтобы «редактировать, удалять» при наведении мыши только на видимуюКнопка действия и в соответствии с WCAG я хочу показать кнопку действия, нажав Tab, чтобы перейти к следующей кнопке и списку.

Я не могу выбрать кнопку действия, когда нажимаю, используя tab.

Я хочусначала выберите список, затем нажмите кнопку действия

то же самое для каждого списка

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>

Answer 1

Когда вы Tab , фокус перемещается на кнопку, оставляя li.Ваши правила CSS таковы, что потерявший фокус li будет скрывать контейнер кнопок.

Вы можете использовать :focus-within вместо :focus, чтобы решить эту проблему.Он применяется к элементу, который либо имеет фокус, либо содержит элемент, имеющий фокус.

К сожалению, он не поддерживается IE или Edge, но я считаю, что это единственное решение, которое не 'Это связано с JavaScript.

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus-within .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>