Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Дописывает плейсхолдер про listitem #5625

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Дописывает плейсхолдер про listitem #5625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8f5712
Дописывает плейсхолдер, добавляет демо
TatianaFokina Jan 3, 2025
217c78b
Вкладывает демку в папку
TatianaFokina Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions a11y/role-listitem/demos/styled-listitems/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Стилизованные пункты кастомного списка — listitem — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400&display=swap">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color-scheme: dark;
font-size: 24px;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191C;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
}

.list {
display: flex;
flex-direction: column;
line-height: 1.5;
}

.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: ";";
}

.list__item:last-of-type::after {
content: ".";
}

@media (max-width: 768px) {
body {
padding: 30px;
}
}
</style>
</head>
<body>
<div role="list" class="list">
<span role="listitem" class="list__item">Красная пустыня</span>
<span role="listitem" class="list__item">Бразилия</span>
<span role="listitem" class="list__item">Осенняя соната</span>
<span role="listitem" class="list__item">Джульетта и ду́хи</span>
</div>
</body>
</html>
104 changes: 96 additions & 8 deletions a11y/role-listitem/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 эта роль есть у [`<li>`](/html/li/).
В нумерованных списках пункты начинаются с цифр, а в маркированных — с маркеров (буллитов).

В HTML роль `listitem` уже есть у [`<li>`](/html/li/).

## Пример

Кастомный список без дополнительных ARIA-атрибутов.

```html
<div role="list">
<span role="listitem">годы;</span>
<span role="listitem">берут;</span>
<span role="listitem">своё.</span>
</div>
```

## Как пишется

Задайте тегу `role="listitem"`, лучше всего [`<div>`](/html/div/) или [`<span>`](/html/span/). В большинстве случаев используйте `<li>`.
В большинстве случаев используйте `<li>`. Если создаёте кастомный список, то `role="listitem"` лучше всего задать [`<div>`](/html/div/) или [`<span>`](/html/span/).

Пункт с `listitem` обязательно должен быть вложен в список с ролью [`list`](/a11y/role-list/). Это может быть кастомный список с явной ролью `list` или [`<ul>`](/html/ul/) и [`<ol>`](/html/ol/), в которые роль встроена по умолчанию.

```html
<div role="list">
<span role="listitem">Горлица.</span>
</div>
```

Элементам с ролью `listitem` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy) и два дополнительных свойства [`aria-posinset`](/a11y/aria-posinset/) и [`aria-setsize`](/a11y/aria-setsize/).

В `aria-setsize` задают итоговое количество пунктов, когда они появляются в списке не сразу. Например, как в бесконечной новостной ленте.

`aria-posinset` указывает на позицию или номер пункта в списке, содержимое которого загружается постепенно.

Если список со всеми элементами появляется на странице сразу, браузеры автоматически считают количество пунктов и определяют положение.

```html
<h2 id="list-label">Новости</h2>
<div
role="list"
aria-labelledby="list-label"
>
<span role="listitem">
<a href="#">Горлица съела кусочек хлеба</a>
</span>
<span role="listitem">
<a href="#">Голубь упал со стола</a>
</span>
<span role="listitem">
<a href="#">Стриж свил гнездо на льдине</a>
</span>
<span
role="listitem"
aria-setsize="100"
aria-posinset="1"
>
<a href="#">Калибри спасла пчелу</a>
</span>
<span
role="listitem"
aria-setsize="100"
aria-posinset="2"
>
<a href="#">Соловей начал сольную карьеру</a>
</span>
<!-- Элементы, подгружающиеся по мере прокрутки -->
</div>
```

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` уже есть у [`<ul>`](/html/ul/) и [`<ol>`](/html/ol/).
.list__item:last-of-type::after {
content: ".";
}
```

Элементам с ролью `listitem` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy).
<iframe title="Стилизованные пункты кастомного списка" src="demos/styled-listitems/" height="350"></iframe>
Loading