Перемикач
Одна настройка, увімкнено або вимкнено, і зміна діє в момент відпускання. Саме це відрізняє його від Чекбокса: чекбокс - значення, яке ви ще тільки зберете формою.
--bg-track у вимкненому, акцент в увімкненому.16srole="switch" і aria-checked стоять у розмітці й синхронні зі станом; ім'я дає aria-label--ring-focus-control ззовні доріжки: контрол маленький, внутрішнє кільце з'їло б ручкуМатриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.
| Вісь | Значення | Правило вибору |
|---|---|---|
| Стан | увімкнено · .off вимкнено | Проміжного стану немає. |
У профілі кабінету - там, де перемикач діє одразу і не потребує «зберегти». Саме тут житимуть згоди на сповіщення про статус замовлення (розділ H у microcopy.md).
Правило
Перемикач діє миттєво. Якщо потрібне «Зберегти», це Чекбокс у формі.Антиправило
Не став перемикач у форму з кнопкою. Тоді незрозуміло, чи зміна вже сталася, і людина натискає двічі.Два: .off і :focus-visible. Другий з'явився на кроці 7.32.
І контрол працює - це перевірено, а не припущено. Перший замір цього кроку показав, що при кліку клас і aria-checked міняються, а доріжка й ручка стоять на місці, і я мало не записав це як дефект. Це був перехід: замір зроблено одразу після кліку, а transition триває .16s. Через 400ms земля #FF5A00 → #D9D9D9, ручка 21px → 3px. Зонд помилявся, не контрол.
Розмітка в продукті вже правильна: <span class="sw" role="switch" aria-checked="true" aria-label="Згода на розсилку">. Клік з'єднано, стан синхронний, анімація йде. Не було одного - кроку табуляції. Контрол, повністю описаний для скрінрідера й доступний лише мишею: 250 натискань Tab на account-profile жодного разу на нього не сіли.
Третій раз за цей етап та сама форма - контрол оголошено в розмітці й відсутній у порядку табуляції: .ord-tabs на 7.31, посилання діалогу входу на 7.30. uivSwitches() у design/_nav.js дає крок табуляції й Space / Enter.
Ключ на роль, а не на клас
Селектор -[role="switch"]:not([tabindex]). Обіцянку клавіатури дає роль, тож роль і має нести правку. Заразом це дотягнеться до .ck-tog у день, коли діалог cookie отримає кольоровий двійник, і нікому не доведеться згадувати, що ця функція існує.У продукті є ще один тумблер - .ck-tog, категорії в діалозі cookie, у cookie-banner.css. Зміряно: вони розходяться в усьому.
| Вісь | .sw | .ck-tog |
|---|---|---|
| Доріжка | 44 × 26 | 42 × 24 |
| Ручка | 20, на 3 / 21 | 18, на 2 / 20, з краєм 1px |
| Край | немає | 1px 7.62 було написано 1.5 |
| Земля ON | --bg-action | --bg-inverse |
| Земля OFF | --bg-track | --bg-sunken |
| Клас | .off позначає ВИМКНЕНО | .on позначає УВІМКНЕНО |
| Недоступний | немає | .locked, opacity .6, not-allowed |
Класи йдуть у ПРОТИЛЕЖНІ боки
Це те, що вкусить того, хто зливатиме їх наосліп: у.sw базовий стан увімкнений і клас додає вимкнення, у .ck-tog - навпаки.Не злито, і причина - лічильник. .ck-tog рендериться в кольоровому шарі нуль разів: діалог cookie демонструє wireframes/system.html, у якого немає кольорового двійника. Обирати між 44×26 і 42×24, бачачи лише один із двох, означало б брати число зі сторінки, яку ніхто не може відкрити. Коли той екран отримає кольоровий двійник, злиття - це один рядок, а .locked у .ck-tog - саме той стан «недоступний», який цей файл має скопіювати: тут продукт такий випадок справді має, на відміну від чипа.
Крок 7.33 дав землю натиску кожному атому, якому було що дати. Цьому - відмовлено, і причина - вимір у шапці файлу: доріжка 44 x 26. Пляма контакту пальця накриває її повністю, тож земля, намальована під нею, - стан, якого на телефоні ніхто не побачить. А цей контрол живе на account-profile, тобто саме на телефоні.
Інші атоми в іншому становищі: чип - це ціла пігулка землі, рядок фільтра - ширина панелі, вкладка - п'ята частина екрана. Чекбокс має 18px і все одно взяв правило, бо мішень там - підпис, і земля з'являється на всю ширину рядка збоку від пальця. У тумблера такого рядка немає: мішень - сама доріжка.
Натиск тут підтверджує сам тумблер: земля і кулька їдуть за .16s тієї ж миті, коли палець відпустив, і це більша відповідь, ніж будь-який відтінок. Відтінок довелося б малювати під цим переходом і він змагався б із ним за ті самі 160 мс.
.sw входить у :active (тобто <span> тут ні до чого) і земля лишається #FF5A00. Тиша - це рішення, а не прогалина платформиСторінка звіряє себе з файлом: 2 власних класи і 1 стан оголошено в switch.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. Чужий контекст (його тут немає) не рахується: у цих селекторах компонент не є підметом, він лише стоїть усередині когось.
Робота: ВІДПОВІДЬ. Рухається: background доріжки, положення повзунка. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var() з tokens.css: підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.
Позиція повзунка їде через left, а це РОЗКЛАДКА: властивість дорога і перепис назвав її одним із чотирьох таких місць у продукті. Переписати на transform - рішення кроку 5, тут змінилась лише тривалість.
Прочитані з switch.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.
| Семантичні ролі (4) | Примітиви (5) |
|---|---|
--bg-action --bg-page --bg-track --ring-focus-control | --radius-circle --radius-pill --size-20 --size-26 --size-44 |
| – | --dur-fast --ease-standard |
Якорі: .sw
9 екранів у wireframes/: account-profile-delete.html, account-profile-email.html, account-profile-lang.html, account-profile-phone.html, account-profile-withemail.html, account-profile.html, checkout-loggedin.html, checkout-noaddr.html, checkout.html
Чого бракує
- Дві редакції тумблера -
.swі.ck-tog, з протилежним напрямком класу. Злиття чекає на кольоровий двійникsystem.html - Немає стану «недоступний» - у
.sw. Форма для копіювання вже є:.ck-tog.locked - Немає
:active- момент натискання не показано
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.