Есть ли способ сделать так, чтобы порядок табуляции соответствовал визуальному порядку? - PullRequest
Новая
       27

Есть ли способ сделать так, чтобы порядок табуляции соответствовал визуальному порядку?

0 голосов
/ 21 ноября 2018

Допустим, у меня есть веб-страница, которая содержит список ссылок. 

<ul class="links">
    <li><a href="#">Alpha</a></li>
    <li><a href="#">Bravo</a></li>
    <li><a href="#">Charlie</a></li>
</ul>

По соображениям дизайна мне нужно изменить порядок этих ссылок на больших экранах, чтобы «Альфа» визуально отображалась нанижняя часть списка. 

@media (min-width: 30em) {

    .links {
        display: flex;
        flex-direction: column;
    }

    .links > li:first-child {
        order: 1;
    }

}

При просмотре различных фокусируемых элементов на странице визуальный порядок этих ссылок не учитывается, поэтому при перемещении по списку порядок фокусировки будет «Альфа».затем «Браво», затем «Чарли».

Если я установлю положительное значение tabindex для любой из этих ссылок, они будут перемещены в конец порядка табуляции (поскольку все остальные фокусируемые элементы по существу имеют индекс табуляции).из 0).

Мой вопрос: есть ли способ сделать так, чтобы порядок табуляции соответствовал визуальному порядку? .

1 Ответ

0 голосов
/ 21 ноября 2018

В настоящее время, похоже, нет способа объединить упорядочивание по флексам и упорядочение по HTML, согласно https://www.w3.org/TR/css-flexbox-1/#order-property и разделу 5.4.1.Изменение порядка и доступность:

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

...