Доступность вкладок в режиме наведения - PullRequest
Новая
       24

Доступность вкладок в режиме наведения

0 голосов
/ 29 мая 2018

У меня есть компонент, который при наведении курсора показывает кнопку и ссылку, по которой вы можете щелкнуть.Это не меню ... просто поле в середине страницы.

Для удобства я бы хотел, чтобы пользователь мог вкладывать в контейнер (происходит сейчас, и отображает содержимое в.HiddenUntilHover class) И также продолжайте переходить к кнопкам и ссылкам, которые отображаются в состоянии наведения / фокусировки.

Прямо сейчас вы можете сфокусироваться на контейнере и увидеть состояние наведения;однако при переходе по вкладке он просто переходит к следующему элементу и не позволяет перейти к кнопке или ссылке в состоянии наведения.

Пример псевдокода: 

/* My component .jsx */
<div tabIndex="0" className="MainContainer">
 <div className="SomeOtherClass">
   <div className="HiddenUntilHover">
     /* I would like to be able to tab to these clickable things! */
     <button>Click me!</button>
     <a href="...">I am also clickable</a>
   </div>
 </div>
</div>

И мойSCSS: 

.HiddenUntilHover {
  display: none;
}

MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
    display: block
}

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Когда блок находится в фокусе, вкладка дальше к кнопке сделает окно размытым, что скроет его и его содержимое, поэтому фокус переместится к следующему доступному элементу.Я думаю, что это поведение, которое вы испытываете.

Вы могли бы рассмотреть возможность использования атрибута aria-activedescendant или tabindex, когда окно попадает в фокус.Это требует небольшого JavaScript.

Строго говоря, вам не нужно полагаться на состояние при наведении, чтобы сделать этот элемент управления доступным.Вы могли бы иметь закадровую (или обрезанную) кнопку / ссылку, которая не является дочерним элементом DOM скрытого (display:none) поля.Если вы воспользуетесь этим подходом, прочитайте атрибут aria-owns.

Пока он помечен как кнопка или ссылка (или имеет настройку tabindex="0") и не «действительно» скрыт, это должно быть возможно для вкладки к нему.

0 голосов
/ 30 мая 2018

Элементы, появляющиеся при наведении, по своей сути недоступны.Вы столкнулись с одной стороной проблемы с вашим кодом, когда трудно сделать его доступным с клавиатуры.Но подумайте о сенсорных экранах, которые не имеют реальной концепции зависания: есть ли способ добраться до вашей кнопки на смартфоне или планшете?

Для более прагматичного ответа, если вам нужно остаться с зависанием, менее хакерскийРешение, чем два уже опубликованных, может быть следующим: использовать события focusin и focusout.См., Например, этот вопрос для объяснений и различий с фокусом / размытием, и этот документ w3school для совместимости с браузером.Вам придется по-разному структурировать свой HTML, например: 

<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->

, а также использовать бит js: 

$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));

с соответствующим классом .keep-visible, который оставитэлемент display: block (я не эксперт по CSS, я позволю вам написать код).

Общее функционирование таково: когда какой-то элемент в #outer получает фокус, элемент focusinуволен из-за пузырения.В этом случае вы помещаете свой класс .keep-visible, чтобы элемент оставался видимым.Событие focusout вызывается, когда фокус покидает последний элемент в пределах #outer.В этот момент вы удаляете класс .keep-visible, из-за которого элемент исчезает.

Согласно приведенной выше ссылке, onfocusin / out не являются стандартными, но поддерживаются всеми основными браузерами, включая IE.Firefox является последним, кто внедрил его в 52.0, так что это своего рода стандарт defacto;мы можем разумно ожидать, что он не исчезнет в ближайшее время.

0 голосов
/ 29 мая 2018

Попробуйте увеличить свойства класса MainContainer, например. 

.MainContainer {
  width: 100%;
  height: 100px;
}
.MainContainer .HiddenUntilHover {
  display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
  display: block;
}
...