Рядок посилань

Розмітка нижче взята з продукту, не намальована для стенда: перший блок це юридичний рядок футера, другий - навігація діалогу входу.

Пораховано в браузері на 40 кольорових екранах при 1280: 124 підкреслених посилання і тринадцять редакцій у шести файлах. Плюс одне, яке не малював жоден файл, і одне, яке малював атрибут style у розмітці.

Про 87 «без класу». Клас отримав не кожен якір, а обгортка: <span class="wff-legal">. Самі <a> як були без класу, так і лишилися - і це навмисно. Ці 87 малює одна рендер-функція; класу на батькові досить, щоб селектор існував, а 87 атрибутів у розмітці існували б лише для того, щоб їх там було 87. Правило тепер живе в CSS, а не в атрибуті - це і був дефект.

Найповторюваніше посилання сайту було єдиним, до якого не дотягувався жоден стиль. Правило 3 цієї теки каже: що повторюється на двох і більше екранах - їде в _wf.css. Це повторювалося на 129.

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

Обидві незгоди - це одна незгода: насиченість 600 проти 700 стояла 8 до 10, підкреслення --line-strong проти чорнила - теж 8 до 10, і ці 8 щоразу ті самі: .linkrow a і .auth-sub a, дві сім'ї, які малює діалог входу. Не два розходження, а один файл, що розходиться з сайтом.

Цифру підкреслення без браузера дістати не можна було. У banner.css стояло text-decoration-color: var(--line-strong) для .promo .ps a, тобто за джерелом ці 4 йшли до вісімки. Але в розмітці був інлайновий text-decoration: underline, а шорткат скидає decoration-color у currentColor, і перебити інлайновий стиль не може жодна таблиця стилів. За джерелом розклад 12 до 6 і відповідь перевертається. Саме для цього правило каже читати з браузера, а не з тексту CSS.

Чотири посилання діалогу входу - <a onclick> без href, а якір без href не бере фокус. Перевірено двічі: .focus(), викликаний на кожному, відмовлено; 120 кроків Tab на auth-code.html сіли на кнопку закриття і на всі комірки коду, і жодного разу на посилання.

Правило написане формою, а не переліком із чотирьох: a[onclick]:not([href]). Наступне таке посилання буде досяжним у день, коли з'явиться.

Ролі виявилося замало. Перевірка після правки показала, що Tab доходить лише до першого з чотирьох, а далі 41 крок поспіль сидить на input.box, яких у полі коду шість. Пастка фокуса лежала в іншому файлі: fields.js має правило «клік у порожню комірку садить туди, де робота», написане через focusin - а focusin не відрізняє клік від Tab, тому кожен крок уперед відтягувало назад до першої порожньої комірки. Три посилання з чотирьох стоять у DOM нижче поля коду, тож жодне з них не було досяжним.

Полагоджено там само: прапорець pointerdown, який focusin зчитує і гасить. Правило миші лишилося (клік у 6-ту комірку садить у 4-ту, перевірено), стрілки й авто-перехід при наборі не змінилися. Порядок Tab у діалозі тепер: закрити → «Змінити номер» → шість комірок коду → «Підтвердити» → «← Змінити номер» → «Ввів неправильний код?» → «Повернутися до магазину».

Кожна сім'я з перепису, живою розміткою. Тихі три ліворуч, гучні - праворуч.

Тут стояли дві пілюлі, і це був дефект - крок 7.30b. .flinks, ряд опцій фільтра, лишався в цьому файлі відтоді, як на 7.23 сам .flink поїхав у chip.css: переїхав чип, а його ряд забули. Тобто файл текстового посилання малював ряд чипів. У chip.css ті самі три оголошення вже стояли двічі - як .dr-chips і .cegoals; тепер це один рядок на три імені. Побачити це можна було тільки на стенді, зібраному з живої розмітки: на переліку класів такого не видно.

Тихе - там, де перехід не є дією екрана: юридичні документи, згода, довідка, «повернутись». Гучне - там, де дія є, але вона другорядна для екрана, тому не заслуговує на коробку кнопки. Головну дію екрана робить Кнопка, і принцип 2 каже: така дія на екрані рівно одна.

.btn--text схожа на посилання і ним не є: це кнопка, яка скинула коробку, і вона лишається у button.css. Чотири «Читати більше» в переписі - саме вона, тому їх немає в жодній із двох гучностей.

У коді є :hover і :focus-visible. Другий з'явився на кроці 7.30: --ring-focus-control існує з кроку 6.2, і жодне посилання його не читало.

Крок 7.33 пройшов кожен атом, який можна натиснути, і дав тим, у кого є земля, відповідь на палець. Цей набір - найбільший з тих, хто не отримав нічого, і саме тому це абзац, а не пропуск: 601 посилання, що збігається з власними селекторами цього файлу, досяжне на 39 кольорових екранах - більше, ніж будь-яке одне сімейство контролів. Наступний прохід із питанням «що ще не відповідає на натиск» прийде сюди першим.

У текстового посилання немає землі. Рухати лишається тільки шрифт, а це button.css закрив ще на кроці 7.8 словами, які нема сенсу покращувати: шрифт, що стрибає під пальцем, гірший за відсутність відповіді. Колір, що змінюється, не краще - це те саме наведення, вистрелене вдруге, і на дотику воно блимнуло б раз і залипло до наступного тапу деінде.

Відповідь - це підкреслення, і воно намальоване у спокої. Саме для цього дві сходинки вище: посилання каже, що воно посилання, до того, як його торкнулись. Це і є стан, потрібний пальцю. Контрол, який зізнається, чим він є, лише поки над ним курсор, - це те, що цей файл виправив на 7.30.

.ln-review, .ob-receipt і .afilters .clear входять у відмову, хоч у кожного поруч стоїть сусід із коробом, який землю взяв. Вирішує те, чим річ є, а не те, біля чого вона стоїть.

Сторінка звіряє себе з файлом: 14 власних класів і 2 стани оголошено в link-row.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. Чужий контекст (.clear, .ps) не рахується: у цих селекторах компонент не є підметом, він лише стоїть усередині когось.

Робота: ВІДПОВІДЬ. Рухається: color, text-decoration-color. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var() з tokens.css: підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Прочитані з link-row.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Десять токенів на 159 рядків - файл майже не має власної геометрії, і це правильно: посилання не має коробки. Розмір, відступ і місце дає компонент, усередині якого воно стоїть.

Другий приклад - це саме той <a onclick> без href, якому uivDeadLinks() дає роль і крок табуляції. Розмітка лишається такою, якою її пише заморожений сірий шар.

Якорі: .linkrow .wff-legal .auth-sub .auth-foot .auth-consent .co-help .co-consent .co-foot-links .co-proc-cancel .ln-review .ob-receipt .afilters .promo .seolink

Частина не зустрічається у розмітці екранів: футер, діалог входу і підвал чекауту будує рендер-функція у wireframes/_nav.js, тому сканування класів по html дає нуль, а на екранах вони є.