Добавляет рецепт слайдера

[AnnaBaraulina]

Описание

Поправила текст статьи, перевернула демку по горизонтали, поменяла фон страницы и шрифт, использовала стрелку Доки.

Closes #2730

https://content-5364.dev.doka.guide/recipes/slider/

Чек-лист

• [x] Текст оформлен согласно руководству по стилю
• [x] Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
• [x] Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

[vitya-ne]

После многочисленных правок появились артефакты:

1. двойные заголовки:
2. неудалённый кусочек на строке 155:

[skorobaeus]

❕ В процессе причёсывания стилей я убрала стрелочки из HTML в CSS, а ещё переместила заголовки под картинки.

[TatianaFokina]

Что изменилось в демке:

• убрала aria-roledescription. Хотя атрибут рекомендуют использовать, это может создавать лишний шум для пользователей скринридеров + это базовый пример, а этот атрибут не то, чтобы обязателен;
• перевела текст из всех aria-label;
• добавила пустые alt для картинок;
• сделала слайдер изменяющейся областью через aria-live="polite"; так, при переключении слайдов, скринридеры автоматически зачитают заголовок активного слайда;
• всё-таки оставила aria-disabled, но только у стрелочек; добавила стиль для неактивной кнопки;
• добавила aria-current для активной точки, а вот aria-disabled убрала у них; первый атрибут даёт пользователям скринридеров понять, что связанной с точкой слайд сейчас активен;
• убрала hidden из разметки, он добавляется только благодаря JS; так рекомендуют делать на всяяяякий случай, если скрипт не загрузился, и для пользователя всё остаётся доступным даже со сломанным слайдером;
• исправила айдишники у слайдов и заголовков в них, чтобы aria-labelledby заработал;
• убрала tabindex с контейнера слайдера, чтобы, опять же, не было изобилия опциональных атрибутов;
• поиск не по всему документу, а по элементам слайдера;
• всякие приколы с форматированием JS-кода: убрала точки с запятыми, заменила двойные кавычки на одинарные (так как у нас такое соглашение в Доке);
• слегка упоролась DRY;
• добавила aria-current в скрипт для активной кнопки;
• теперь нужная кнопка со стрелкой ищется более железобетонно по классу, а не по значению aria-label (что менее надёжно, так как запаришься потом чинить скрипт, если кто-то решит поменять значение атрибута + интернационализация тоже может нарушить наши планы).

[TatianaFokina]

@skorobaeus, @AnnaBaraulina, я вот подумала, а может добавить ещё анимацию при переключении слайдов? Если поддерживаете идею, то её лучше сразу запихнуть в @media (prefer-reduced-motion: no-preference).

[skorobaeus]

@skorobaeus, @AnnaBaraulina, я вот подумала, а может добавить ещё анимацию при переключении слайдов? Если поддерживаете идею, то её лучше сразу запихнуть в @media (prefer-reduced-motion: no-preference).

Я-то точно не против, но, наверное, чтобы не нагружать Анну, можно обойтись и без них

[AnnaBaraulina]

@skorobaeus, @AnnaBaraulina, я вот подумала, а может добавить ещё анимацию при переключении слайдов? Если поддерживаете идею, то её лучше сразу запихнуть в @media (prefer-reduced-motion: no-preference).

Я-то точно не против, но, наверное, чтобы не нагружать Анну, можно обойтись и без них

Привет! Я не против, я попробую так сделать. @TatianaFokina Татьяна, спасибо, что поправила те моменты, которые я должна была сделать

[TatianaFokina]

@glafirazhur, а у тебя случааайно не найдётся небольшое окошко в твоём загруженном (без шуток) графике, чтобы чекнуть код слайдера?

[loonlylokly]

Привет) А эта статья не закрывает случайно ещё и вот этот ишью? #3751

[TatianaFokina]

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

[TatianaFokina]

@AnnaBaraulina, я сделала небольшое уточнение про анимацию, так что можешь с ней не заморачиваться.

Осталась только пара комментариев от @solarrust, а так всё готово.

• ~При перезагрузки демки все картинки мигают на долю секунды. Давай подумаем, как их сразу скрывать так, чтобы не было такого эффекта.~
• ~У .controls используем логическое margin-block-end, но в остальных местах используются «старые» свойства типа width, left/right и т. д. Может быть присмотримся к коду и подумаем, где ещё пригодятся логические свойства?~

[vitya-ne]

@TatianaFokina, @skorobaeus, @solarrust, предлагаю перенести рецепт в раздел Рецепты -> Интерфейс. Сейчас он попадает в "Остальное"

[solarrust]

@TatianaFokina, @skorobaeus, @solarrust, предлагаю перенести рецепт в раздел Рецепты -> Интерфейс. Сейчас он попадает в "Остальное"

Все статьи, которые пока не распределены по подразделам, попадают в «Остальные». Обычно, мы определяем подраздел где-то ближе к слиянию в main. Спасибо, что напомнил, иногда это выпадает из внимания =)

[AnnaBaraulina]

@AnnaBaraulina, я сделала небольшое уточнение про анимацию, так что можешь с ней не заморачиваться.

Осталась только пара комментариев от @solarrust, а так всё готово.

• При перезагрузки демки все картинки мигают на долю секунды. Давай подумаем, как их сразу скрывать так, чтобы не было такого эффекта.
• У .controls используем логическое margin-block-end, но в остальных местах используются «старые» свойства типа width, left/right и т. д. Может быть присмотримся к коду и подумаем, где ещё пригодятся логические свойства?

Привет! Спасибо-спасибо, все сделали в итоге за меня! Я доделаю последние комменты в ближ выходные

[TatianaFokina]

@solarrust, я сделяль. Больше не мигает.

[github-actions[bot]]

Превью контента из 2384f52a46b73da0490929bbb511b8215cda0d56 опубликовано.