diff --git a/a11y/role-listitem/demos/styled-listitems/index.html b/a11y/role-listitem/demos/styled-listitems/index.html new file mode 100644 index 0000000000..6eb80971ee --- /dev/null +++ b/a11y/role-listitem/demos/styled-listitems/index.html @@ -0,0 +1,78 @@ + + + + Стилизованные пункты кастомного списка — listitem — Дока + + + + + + + + +
+ Красная пустыня + Бразилия + Осенняя соната + Джульетта и ду́хи +
+ + diff --git a/a11y/role-listitem/index.md b/a11y/role-listitem/index.md index 5d9f3acf7d..453c6f6af8 100644 --- a/a11y/role-listitem/index.md +++ b/a11y/role-listitem/index.md @@ -1,27 +1,115 @@ --- title: "`listitem`" -description: "Роль для пункта из нумерованного или ненумерованного списка." +description: "Роль пункта из нумерованного или маркированного списка." authors: - - doka-dog + - tatianafokina related: - html/ul - a11y/role-list - html/li tags: - doka - - placeholder --- ## Кратко -[Роль структуры документа](/a11y/aria-roles/#roli-struktury-dokumenta) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya) для пункта из списка. Без разницы это нумерованный или ненумерованный список. +[Роль структуры документа](/a11y/aria-roles/#roli-struktury-dokumenta) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya) для пункта нумерованного или маркированного списка. -В HTML эта роль есть у [`
  • `](/html/li/). +В нумерованных списках пункты начинаются с цифр, а в маркированных — с маркеров (буллитов). + +В HTML роль `listitem` уже есть у [`
  • `](/html/li/). + +## Пример + +Кастомный список без дополнительных ARIA-атрибутов. + +```html +
    + годы; + берут; + своё. +
    +``` ## Как пишется -Задайте тегу `role="listitem"`, лучше всего [`
    `](/html/div/) или [``](/html/span/). В большинстве случаев используйте `
  • `. +В большинстве случаев используйте `
  • `. Если создаёте кастомный список, то `role="listitem"` лучше всего задать [`
    `](/html/div/) или [``](/html/span/). + +Пункт с `listitem` обязательно должен быть вложен в список с ролью [`list`](/a11y/role-list/). Это может быть кастомный список с явной ролью `list` или [`
      `](/html/ul/) и [`
        `](/html/ol/), в которые роль встроена по умолчанию. + +```html +
        + Горлица. +
        +``` + +Элементам с ролью `listitem` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy) и два дополнительных свойства [`aria-posinset`](/a11y/aria-posinset/) и [`aria-setsize`](/a11y/aria-setsize/). + +В `aria-setsize` задают итоговое количество пунктов, когда они появляются в списке не сразу. Например, как в бесконечной новостной ленте. + +`aria-posinset` указывает на позицию или номер пункта в списке, содержимое которого загружается постепенно. + +Если список со всеми элементами появляется на странице сразу, браузеры автоматически считают количество пунктов и определяют положение. + +```html +

        Новости

        + +``` + +ARIA-роли не влияют на стили, поэтому стилизуйте пункты с `listitem` руками. + +```css +.list__item { + position: relative; + padding-left: 25px; + text-transform: lowercase; +} + +.list__item::before { + content: ""; + position: absolute; + top: 13px; + left: 0; + width: 14px; + height: 14px; + background-color: #10F3AF; +} + +.list__item::after { + content: ";"; +} -Элемент с `listitem` всегда должен находится внутри другого с [`list`](/a11y/role-list/). Роль `list` уже есть у [`
          `](/html/ul/) и [`
            `](/html/ol/). +.list__item:last-of-type::after { + content: "."; +} +``` -Элементам с ролью `listitem` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy). +