Блогът на Гонзо

Един фокус, мишка и Сафари

Преди време разработвах компонент, който да действа като падащо меню с възможност за повече от един избор. Всичко вървеше добре, опитвах се да спазвам добри практики за достъпност и мислех, че успявам да го направя да работи достатъчно добре при интеракция както с мишка, така и с клавиатура, но се оказа, че има проблем. Клиентът, за който го правех, обаче, ползва Сафари и при него падащото меню не се скриваше при цъкане извън него.

За да направя така, че падащото меню да се прибира при цъкане извън него реших да използвам събитието focusout на елементът, съдържащ целия компонент. Събитието focusout може да бъде прихванато от всеки елемент в йерархията, независимо дали самия елемент може да приема фокус, така че беше идеално за целта. Щом фокуса отида другаде, а това става и когато се цъкне с мишката извън него или пък потребителя се прехвърли на друг елемент с tab, значи падащото меню трябва да се прибере. Да, ама не и в Сафари. Там нещата винаги работят по друг начин.

Оказа се, че в Сафари взаимодействията с мишката не водят до промяна на фокуса. Т.е. цъкането с мишката върху бутон не поставя фокуса върху него. Съответно цъкането извън бутона няма да предизвика загуба на фокус от бутона. К’во правим сега?

Реших проблема като зорлем поставих елемента на фокус при цъкане с мишката върху него. От там нататък всичко продължава да действа както преди.

dropdown.addEventListener( 'mouseup', function( e ) {
  this.focus();
  e.preventDefault();
} );

Дано това да ви помогне и на вас ако срещнете подобен проблем. А самия компонент в действие може да разгледате на адрес https://www.thenaturaladventure.com/tours/. Обратната връзка е добре дошла.

Споделяне

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *