Изменяет дизайн совета

[igsekor]

Новый дизайн карточек для обсуждения и последующей реализации:

[solarrust]

Сафари, совет выглядит так:

1. Видно стрелочку от детейлс
2. Кнопка развернуть, кажется, не на своём месте

Не обрабатываются бэктики в свёрнутом состоянии

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

[solarrust]

А мы можем определять длину совета? Кажется, если совет короткий и помещается в «закрытое» состояние, то можно скрывать кнопки Развернуть/Свернуть. Пример совета: https://doka.guide/css/has/#realetive-sovetuet

[igsekor]

А мы можем определять длину совета? Кажется, если совет короткий и помещается в «закрытое» состояние, то можно скрывать кнопки Развернуть/Свернуть. Пример совета: https://doka.guide/css/has/#realetive-sovetuet

Можем, хорошая мысль. Сделаю :)

[solarrust]

1. Пофиксила липкое позиционирование у кнопки Развернуть/Свернуть.
2. Надо бы «пропускать» клики через оверлей в нижней части свёрнутого совета.
3. Нужно реализовать кнопку Развернуть/Свернуть именно кнопкой, а не псевдоэлементом. Кажется, сейчас это не очень доступно получилось. Можно уточнить у @TatianaFokina на всякий случай. Думаю, она не откажет в небольшой подсказке.

[TatianaFokina]

1. Пофиксила липкое позиционирование у кнопки Развернуть/Свернуть.
2. Надо бы «пропускать» клики через оверлей в нижней части свёрнутого совета.
3. Нужно реализовать кнопку Развернуть/Свернуть именно кнопкой, а не псевдоэлементом. Кажется, сейчас это не очень доступно получилось. Можно уточнить у @TatianaFokina на всякий случай. Думаю, она не откажет в небольшой подсказке.

Кажется, что есть несколько проблем, которые скорее UX.

1. Сейчас кликабельна вся область блока <details>. С точки зрения доступности большая область клика — хорошо. Но тут возникает две проблемы. 1) Не очевидно для пользователе мыши, что можно кликнуть не только на элемент «Развернуть/Свернуть». 2) Более серьёзная проблема — когда я пытаюсь выделить текст совета, то после отжатия клавиши блок каждый сворачивается, ведь произошло событие по клику.
2. Зрячих пользователей клавиатуры может запутать всё этот же элемент «Развернуть/Свернуть». На него нельзя сделать фокус, а раскрытие блока по нажатию на Enter для них может быть не очевидно. Поэтому часть таких пользователей будет просто перемещаться по ссылкам в ограниченном по высоте блоке.

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

Пример с раскрывающимся блоком. Пример с аккордеоном.

Либо можно отслеживать ещё нажатие на Tab. То есть, когда в фокусе с клавиатуры оказался <details>, то блок тоже разворачивается. Насчёт последнего думаю, что это больше хак для тех, кто видит интерфейс и пользуется клавиатурой. И это не очень контролируемое поведение с точки зрения пользователя, но это более дешёвое решение. Однако проблему сворачивания блока по клику, если копируешь что-то, это не решит.

[solarrust]

Я бы отошла от привязки к детейлс+саммари, раз нам оно не подходит и его нужно допиливать и переключилась бы на решение с аккордеоном. Кажется, это будет более логично как с точки зрения затрат времени, так и сточки зрения пользователя (клики, доступность и вот это вот всё). Что скажешь?

[TatianaFokina]

Я бы отошла от привязки к детейлс+саммари, раз нам оно не подходит и его нужно допиливать и переключилась бы на решение с аккордеоном. Кажется, это будет более логично как с точки зрения затрат времени, так и сточки зрения пользователя (клики, доступность и вот это вот всё). Что скажешь?

Не уверена, спрашиваешь ли ты меня, но я бы выбрала такой вариант.

[nlopin]

Вопросы:

• мы не хотим разворачивать свёрнутый совет простым кликом на всём блоке? Гораздо проще попасть в большую штуку (особенно на мобиле), чем в кнопочку.
• можно ли убрать «советует» из списка слева? если советует несколько людей, то эта часть становится шумной
• можно ли исключить заголовки внутри совета из содержания? или мы будем это контролировать руками?

Вообще, входит ли последние два вопроса в скоуп изменений или мы обсуждаем только вёрстку карточки?

[igsekor]

Вопросы:

• мы не хотим разворачивать свёрнутый совет простым кликом на всём блоке? Гораздо проще попасть в большую штуку (особенно на мобиле), чем в кнопочку.

Сначала так и было, поскольку использовался details / summary. Потом решили, что выделять и копировать часть текста / кода важнее. Хотя можно сделать и своё поведение только для свёрнутого совета.

• можно ли убрать «советует» из списка слева? если советует несколько людей, то эта часть становится шумной

Да, можно было бы 😇 Что думаете?

• можно ли исключить заголовки внутри совета из содержания? или мы будем это контролировать руками?

Можно порешить... Нужно?

Вообще, входит ли последние два вопроса в скоуп изменений или мы обсуждаем только вёрстку карточки?

Да можно всё сделать тут, думаю)

[solarrust]

1. В тёмной теме кнопка светится нездоровым светом =)

2. Если перейти по URL заголовка из совета — в свёрнутой карточке будет видно только этот заголовок и не будет кнопки «Развернуть». https://share.cleanshot.com/a6UnH8 (смотреть до конца 😆)
3. При сворачивании нужно подкручивать экран к заголовку перед советом.

Ответы:

Да, можно было бы 😇 Что думаете?

Может вообще сделаем один заголовок «Советы» и не будем выводить в боковое меню имена советчиков?

Можно порешить... Нужно?

С заголовками точно что-то нужно думать (см. п.2). Можем сделать вид что их нет =)

[nlopin]

Я думаю, что формат совета если предполагает заголовок, то только один — в начале. Пока их нет, предлагаю выкидывать и завести задачу на обсудить.

[furtivite]

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

[igsekor]

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

Мне кажется, что это странно. Тем паче, что можно скопировать якорную ссылку на заголовок...

[igsekor]

Новая итерация, налетайте 🙃

[solarrust]

Что если для тени кнопки использовать не переменные тем, а фиксированный цвет из макета — rgb(0 0 0 / 0.1)? Кажется, так тень будет выглядеть не такой грязной. Выскажитесь, пожалуйста!

• Когда кнопка в состоянии «Свернуть», наверное, нужно менять + на -?
• Надо прописать кнопке font-family: var(--font-family);, а то сейчас она Arial'ом.

[igsekor]

Что если для тени кнопки использовать не переменные тем, а фиксированный цвет из макета — rgb(0 0 0 / 0.1) Кажется, так тень будет выглядеть не такой грязной. Выскажитесь, пожалуйста!

Ну я окажусь в меньшинстве, думаю. Но я бы не менял. Почему-то... 😇 Но я всего лишь боцман (и это максимум)... А вот @skorobaeus — настоящий капитан!

• Когда кнопка в состоянии «Свернуть», наверное, нужно менять + на -?

Ну я молодец! Сделал 😇

• Надо прописать кнопке font-family: var(--font-family);, а то сейчас она Arial'ом.

Готово! 🙃

[TatianaFokina]

Всё клёво визуально и с мышью :)

Есть один потенциально неприятный момент для клавиатуры. После разворачивания блока ты остаёшься на элементе «Свернуть», и если жамкаешь Tab для перехода к следующему элементу, то тебя уносит за блок совета на кнопку лайка. Это логично, в DOM они идут друг за другом.

Варианты фикса: 1) самое простое перенести кнопку внутрь блока с советом в самое начало. Но надо будет переписывать стили. 2) Управлять фокусом через JS. Отслеживать событие нажатия Tab и Tab + Shift и в первом случае фокус переносить на первого интерактивного ребёнка блока совета, во втором на первый интерактивный элемент перед блоком совета.

Мини-замечание по aria-pressed. Оно больше для тогла подходит или кнопки для фильтра, а тут больше aria-expanded по функциональности кнопки. Так что я бы просто этот атрибут удалила, он не нужен в этом случае. А если навешивать aria-expanded на кнопку, то надо связать с ней будет контейнер с внутренностями совета через aria-controls на кнопке и id у контейнера для внутренностей.

И ещё самое последнее. Сейчас при нажатии на кнопку не понятно, она развёрнута или нет. Поэтому я бы 1) либо удалила aria-label и навесила aria-live="polite" на кнопку, тогда скринридер будет читать изменившийся текст кнопки. 2) Либо меняла бы содержимое лейбла на развернуть совет и свернуть совет в зависимости от развёрнутости блока. 3) Либо оставила как есть скрытый лейбл, но тогда надо эту логику с aria-expanded делать и добавлять дополнительную обёртку для внутренностей совета.

[skorobaeus]

Что если для тени кнопки использовать не переменные тем, а фиксированный цвет из макета — rgb(0 0 0 / 0.1)? Кажется, так тень будет выглядеть не такой грязной.

Ну я окажусь в меньшинстве, думаю. Но я бы не менял. Почему-то... 😇 Но я всего лишь боцман (и это максимум)... А вот @skorobaeus — настоящий капитан!

Я бы не сказала, что какая-то из теней выглядит грязной. На мой взгляд они почти одинаковые :)

Но если в совете есть демка или схема, то тогда в светлой теме кнопка начинает гореть потусторонним огнём, потому что демки и схемы всегда тёмные:

Чтобы этого избежать, лучше использовать вариант Алёны :)

[solarrust]

Идея для маленьких советов: тем же скриптом, которым мы определяем нужна ли кнопка «Развернуть» проставлять height: auto карточке.

[github-actions[bot]]

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