Як зберегти видимість батьківського елемента, коли дочірній елемент виділено :focus

21

Від автора: видимість батьківського елемента CSS при виділеному дочірньому. Використання focus-within. Застосування JavaScript у разі відсутності підтримки фокуса браузерами — про це в даній статті.

Припустимо, у нас є div. Нам просто потрібно з допомогою CSS батьківський елемент залишити видимим при наведенні курсору:

div:hover {
opacity: 1;
}

Для забезпечення доступності елемента нам також потрібно описати стан виділення фокусом введення:

div:hover,
div:focus {
opacity: 1;
}

Але div не може бути виділений фокусом введення сам по собі, тому нам потрібно:

Цей div містить контент. Не тільки текст, але і посилання.

This little piggy went to market.

Go to market

Ось де починаються складності. Коли курсор зміщується на анкор посилання всередині нього, div більше не виділено фокусом введення, що в результаті дає таку дивну і потенційно заплутану ситуацію:

Як зберегти видимість батьківського елемента, коли дочірній елемент виділено :focus

В цьому прикладі в стані :hover div видно. Div також виділяється фокусом введення, але коли ви переміщаєте курсор на посилання, вона ховається. Посилання може бути виділена фокусом введення, але візуально вона буде прихована, тому що прихований її батьківський елемент.

Одне з рішень полягає в тому, щоб забезпечити видимість div, коли який-небудь елемент всередині нього виділено фокусом введення. В цьому нам допоможе наступний CSS-код:

div:hover,
div:focus,
div:focus-within {
opacity: 1;
}

Але :focus-within слабо підтримується браузерами. Якби браузери досить добре підтримували цей псевдо-елемент, нам більше нічого і не потрібно було б. Насправді нам навіть не потрібен був би навіть :focus тому що всі обробляв би :focus-within.

Але поки що ситуація з підтримкою браузерами не покращитися, нам знадобиться для даної ситуації JavaScript. Як конкретно ви це реалізуєте, залежить від вас, але загальна ідея полягає в наступному…

1. Коли елемент виділяється фокусом введення …
2. Якщо батьківський елемент цього елемента також може бути виділений фокусом введення, слід забезпечити його видимість
3. Коли зі посилання знімається фокус вводу …
4. Що б ви не робили, забезпечте видимість батьківського елементу

Тут можна розглядати багато аспектів, наприклад, які саме елементи ви хочете зробити видимими, як зробити їх видимими, або наскільки глибоко по дереву ієрархії елементів ви хочете зайти. Щось на зразок цього — дуже простий підхід:

var link = document.querySelector(«.deal-with-focus-with-javascript»);
link.addEventListener. («focus», function() {
link.parentElement.classList.add(«focus»);
});
link.addEventListener. («blur», function() {
link.parentElement.classList.remove(«focus»);
});