Дизайн-система Scottish Government.

Практическое руководство по вводу текста дизайн-система Scottish Government

Не допускайте потери введённого текста

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

Это пример примечания для практического задания, а не сервис правительства Шотландии и не запрос медицинской информации. Здесь нет фирменной графики, сохранения данных или отправки. Подсказка в поле предлагает указать практическую потребность для доступа и рекомендует не сообщать личные сведения. Так назначение поля понятно без имитации официальной транзакции.

Прочитать вспомогательную спецификацию

Roboto и адаптивная иерархия дизайн-система Scottish Government

Сохраняйте опубликованные размеры

Для подразделений и направлений политики правительства Шотландии обязательный шрифт — Roboto. Другие организации, внедряющие систему, могут выбрать другой удобочитаемый шрифт, сохранив размеры и высоту строк и проверив результат. В автономном примере запасным шрифтом явно указан Arial; отсутствие веб-шрифта не означает, что используется Roboto.

Размер основного текста меняется с 16/24px на 19/32px, а главного заголовка — с 30/40px на 44/56px. Оба изменения заданы в нативной таблице стилей для больших экранов. Класс ds_h3 меняет визуальный размер, не требуя семантического заголовка третьего уровня. Это важно, когда для короткой формы нужен заголовок раздела поменьше, но добавлять искусственный уровень в структуру документа не следует.

Прочитать вспомогательную спецификацию

Хорошо заметное оформление фокуса дизайн-система Scottish Government

Различайте фокус, ошибку и завершение

Синий задаёт основную роль бренда и ссылок, чёрный используется для текста, а жёлтый — для оформления фокуса. Это именованные параметры Sass, а не выдуманный набор пользовательских свойств CSS. Адаптацию фирменных цветов выполняют до загрузки системы через модуль настроек. В официальных рекомендациях сказано сохранять палитру фокуса, даже если другие цвета бренда изменяются.

Счётчик символов использует негативный красный только при превышении допустимой длины. Для ошибки на уровне приложения из-за незаполненного поля можно применить ту же негативную роль, но сообщение должно говорить об отсутствии ответа, а не о превышении лимита символов. В предпросмотре зелёный цвет не используется, чтобы создать впечатление успешной отправки на сервер.

• Сохраняйте заметную обводку фокуса клавиатуры на текстовом поле и кнопках действий.
• Описывайте превышение лимита текстом, а не только красной рамкой.
• Связывайте сводки об ошибках и подсказки полей со стабильным идентификатором поля.

Прочитать вспомогательную спецификацию

Ширина контейнера и интервалы дизайн-система Scottish Government

Не путайте внешнюю и внутреннюю ширину

В официальной таблице сетки указана внутренняя ширина контента: 736, 928 и 1120px для средних, больших и сверхбольших контрольных точек. Соответствующие контейнеры в исходной реализации имеют ширину 768, 960 и 1152px, поскольку с каждой стороны у них есть внутренний отступ 16px. Это различие важно: если вложить контейнеры друг в друга, можно случайно дважды уменьшить ширину макета.

В примере колонка шириной 42rem для чтения размещена внутри исходного контейнера. Это ограничение по ширине выбрано для приложения и подходит для короткой формы; оно не является новой настройкой дизайн-системы. При ширине экрана меньше 768px контейнер становится адаптивным, а тот же боковой отступ 16px не даёт текстовому полю касаться края экрана.

Утилиты отступов адаптируются к размеру экрана. Например, ds_!_margin-bottom--4 при 48rem увеличивается с 24 до 32px; на более высоких уровнях значения тоже растут. В справочнике приведены оба значения, чтобы снимок экрана на компьютере не приняли за универсальный фиксированный отступ.

Прочитать вспомогательную спецификацию

Дизайн-система Scottish Government Поле с нативным подсчётом символов

Начните с обычного текстового поля

Корневой элемент ds_question содержит data-module и необязательный порог в процентах. Связанные с ним подпись и подсказка — обычные доступные элементы HTML. Атрибут maxlength у текстового поля обеспечивает полезный резервный вариант без JavaScript. После улучшения компонент считывает это значение и снимает жёсткое ограничение, чтобы при вставке текста он не обрезался незаметно.

Для поля с лимитом 200 символов и порогом 80% счётчик появляется на отметке 160 символов. В примере на странице общедоступного компонента используются другие числа, а в примере кода указан лимит 250 символов. Здесь для наглядности везде используется один и тот же лимит. Без JavaScript в видимой подсказке по-прежнему указан лимит, а атрибут maxlength работает в браузере.

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

Справочник по коду

Прочитать вспомогательную спецификацию

Дизайн-система Scottish Government Что обеспечивает нативный компонент

Сообщения, задержка и подсчёт

Версионированная реализация создаёт видимое сообщение с aria-hidden и отдельное скрытое сообщение для вспомогательных технологий. Она добавляет необходимые идентификаторы к уже существующему aria-describedby, не удаляя написанную автором подсказку. Перед обновлением скрытого объявления компонент ждёт 1000ms, чтобы сначала завершилась обратная связь во время ввода.

Фактическая длина определяется выражением JavaScript string.value.length: оно подсчитывает 16-битные кодовые единицы UTF-16. Символ за пределами базовой многоязыковой плоскости может занимать две единицы, а составной эмодзи — ещё больше. Если службе нужна другая политика подсчёта символов, ей следует согласовать счётчик с серверной проверкой, а не ожидать, что этот компонент будет считать символы так, как их воспринимает человек.

Компонент отслеживает события input. Если приложение программно заполняет поле примером или очищает его, оно должно также отправить событие input. Именно так работают действия с примером и сбросом в демонстрации. В комментарии к исходному коду упоминается периодическая проверка распознавания речи, но в изученной реализации такой интервал не запускается; поэтому в этом руководстве такое поведение не заявляется.

Прочитать вспомогательную спецификацию

Дизайн-система Scottish Government Используйте актуальные пути к файлам

Загрузка модуля и инициализация компонента

Актуальное имя пакета — @scottish-government/design-system. В версии 4.3.0 скомпилированная таблица стилей находится по пути dist/css/design-system.min.css, хотя в старом разделе об установке всё ещё указан dist/styles/main.css. В этом примере используется фактический путь к опубликованному файлу. Скрипт экспортирует ES-модуль, поэтому импортируйте его с type="module", а не подключайте обычным классическим тегом script.

Создайте экземпляр CharacterCount для этого поля и вызовите init. Для страниц с несколькими компонентами также доступен DS.initAll, но в этом примере инициализируется только нужный счётчик. Дополнительные службы аналитики не настроены. Серверная проверка выполняется отдельно от библиотеки: счётчик помогает редактировать текст, но не обеспечивает соблюдение лимита.

1. Установите пакет с зафиксированной версией 4.3.0 и скопируйте скомпилированную CSS и модуль в локальную папку для ресурсов.
2. Добавьте на страницу полную структуру с подписью, подсказкой и текстовым полем до импорта модуля.
3. Инициализируйте счётчик один раз, затем свяжите действия предварительного просмотра и сброса в приложении с обычными событиями input.

Прочитать вспомогательную спецификацию

Дизайн-система Scottish Government Проверьте восстановление после превышения лимита

Не ограничивайтесь проверкой пустого поля

Начните ввод ниже порога, превысьте 160 символов, а затем вставьте текст длиной более 200 символов. Весь текст должен остаться в поле, при этом должно появиться сообщение о превышении лимита, а aria-invalid должен получить значение true. Уменьшите текст до значения ниже лимита и убедитесь, что класс ошибки и состояние недопустимого значения сбросились.

Действие «Предварительный просмотр» в приложении блокирует пустые заметки и заметки, превышающие лимит, и показывает связанную с полем ошибку. Допустимая заметка отображается в локальном предварительном просмотре с помощью textContent, поэтому введённая разметка показывается как текст, а не обрабатывается браузером. Действие «Редактировать заметку» возвращает к тому же текстовому полю с сохранённым значением. Сброс очищает поле через событие input, поэтому нативный счётчик также обнуляется.

При ширине 390px проверьте перенос заголовка, ширину текстового поля, перенос кнопок и сводку ошибок. На более широких экранах колонка для чтения не должна превращаться в слишком широкую полосу текста. Эти проверки относятся к данному примеру; для реальной службы дополнительно нужны исследования с пользователями, проверка шрифтов и тестирование со вспомогательными технологиями в конечном контексте.

Прочитать вспомогательную спецификацию

Дизайн-система Scottish Government Примеры компонентов дизайн-системы

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>