Skip to content

Commit

Permalink
Merge branch 'main' into recipes-slider
Browse files Browse the repository at this point in the history
  • Loading branch information
TatianaFokina authored Jul 22, 2024
2 parents cf3a897 + 495b428 commit c758985
Show file tree
Hide file tree
Showing 272 changed files with 5,557 additions and 961 deletions.
87 changes: 87 additions & 0 deletions .github/scripts/update-changelog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
const fs = require("fs");

const addedContent = fs
.readFileSync("added-content.txt")
.toString()
.split("\n");

if (
addedContent.length === 0 ||
(addedContent.length > 0 && addedContent[0] === "")
) {
return;
}

const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const monthNames = [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь",
];
const currentMonth = monthNames[currentDate.getMonth()];
const header = `## ${currentMonth} ${currentYear}`;

const contentList = addedContent.map((fileName) => {
if (fs.existsSync(fileName)) {
const url = `https://doka.guide/${fileName.replace("index.md", "")}`;
const date = process.argv[2];

const content = fs.readFileSync(fileName).toString();

const title = content
.match(/title: ('|"|).*('|"|)\n/)[0]
.replace(/title: ('|"|)/, "")
.replace(/('|"|)\n/, "");

const authorsSelection =
/authors:\n( - .*\n)+(contributors|cover|editors|keywords|related|tags):/;
const authors = content
.match(authorsSelection)[0]
.split("\n")
.slice(1, -1)
.map((s) => s.replace(" - ", ""))
.map((a) => {
const authorFileName = `./people/${a}/index.md`;
if (fs.existsSync(authorFileName)) {
return fs
.readFileSync(authorFileName)
.toString()
.match(/name: ('|"|).*('|"|)\n/)[0]
.replace(/name: ('|"|)/, "")
.replace(/('|"|)\n/, "");
}
return authorFileName;
});

return `- ${date}, [${title}](${url}), ${authors.join(", ")}`;
}
});

if (contentList.length > 0) {
const changelogFileName = "./CHANGELOG.md";
if (fs.existsSync(changelogFileName)) {
const changelog = fs.readFileSync(changelogFileName).toString().split("\n");
if (changelog.filter((s) => s.startsWith("## ")).includes(header)) {
const headerPosition = changelog.findIndex((s) => s === header);
changelog.splice(headerPosition + 2, 0, ...contentList);
} else {
const headerPosition = 4;
changelog.splice(headerPosition, 0, ...[header, "", ""]);
changelog.splice(headerPosition + 2, 0, ...contentList);
}
fs.writeFileSync(changelogFileName, changelog.join("\n"));
console.log("Записи добавлены в CHANGELOG.md");
}
} else {
console.log("Нечего добавлять в CHANGELOG.md");
}
49 changes: 49 additions & 0 deletions .github/scripts/update-changelog.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
#!/bin/bash
git diff --name-status HEAD^ HEAD | grep '^A' | grep -E '(html|css|js|tools|a11y|recipes)\/.*\/index\.md' | sed 's/^A\t//g' > added-content.txt

if [ -s added-content.txt ]; then
MONTH_TO_RUS() {
case "$1" in
01) echo "января" ;;
02) echo "февраля" ;;
03) echo "марта" ;;
04) echo "апреля" ;;
05) echo "мая" ;;
06) echo "июня" ;;
07) echo "июля" ;;
08) echo "августа" ;;
09) echo "сентября" ;;
10) echo "октября" ;;
11) echo "ноября" ;;
12) echo "декабря" ;;
esac
}

MERGE_DATE=$(date -u +"%d %m")
DAY=$(echo $MERGE_DATE | cut -d ' ' -f 1)
MONTH=$(echo $MERGE_DATE | cut -d ' ' -f 2)
RUS_MONTH=$(MONTH_TO_RUS $MONTH)
FORMATTED_DATE="$DAY $RUS_MONTH"

node .github/scripts/update-changelog.js "$FORMATTED_DATE"

rm -f added-content.txt

if [[ -z $(git status -s) ]]
then
echo $(git status)
else
git config --global user.name "Doka Dog"
git config --global user.email "<[email protected]>"

git add CHANGELOG.md
git commit -m "Обновляет CHANGELOG" --author "Doka Dog <[email protected]>"

git pull --rebase
git push origin main

exit
fi
else
echo "Новых материалов не было в предыдущем коммите"
fi
27 changes: 27 additions & 0 deletions .github/workflows/update-changelog.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Update CHANGELOG

on:
workflow_run:
workflows:
- "Frontmatter Lint"
branches:
- main
types:
- completed

concurrency:
group: Update CHANGELOG

jobs:
update_changelog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
token: ${{ secrets.DOKA_BOT_ACCESS_TOKEN }}
fetch-depth: 2
- uses: actions/setup-node@v4
with:
node-version: 20
- name: Ищет новые материалы и обновляет CHANGELOG
run: sh .github/scripts/update-changelog.sh
2 changes: 1 addition & 1 deletion .github/workflows/update-dates.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ name: Update Dates
on:
workflow_run:
workflows:
- "Frontmatter Lint"
- "Update CHANGELOG"
branches:
- main
types:
Expand Down
19 changes: 19 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,25 @@

<!-- yaspeller ignore:start -->

## Июль 2024

- 22 июля, [Стилизация чекбоксов и радиокнопок](https://doka.guide/recipes/checkbox-radio-style/), Михаил Кривдин
- 19 июля, [`.intersection()`](https://doka.guide/js/set-intersection/), Viktar Nezhbart
- 19 июля, [`.difference()`](https://doka.guide/js/set-difference/), Viktar Nezhbart
- 12 июля, [`.union()`](https://doka.guide/js/set-union/), Viktar Nezhbart
- 1 июля, [`.symmetricDifference()`](https://doka.guide/js/set-symmetric-difference/), Viktar Nezhbart

## Июнь 2024

- 27 июня, [CSS-препроцессоры](https://doka.guide/tools/preprocessors/), Анастасия Ярош
- 25 июня, [`light-dark()`](https://doka.guide/css/light-dark/), Алина Козловцева
- 19 июня, [`prefers-color-scheme`](https://doka.guide/css/prefers-color-scheme/), Анастасия Ярош
- 19 июня, [`color-scheme`](https://doka.guide/css/color-scheme/), Анастасия Ярош
- 13 июня, [`color()`](https://doka.guide/css/color-function/), Алёна Батицкая
- 10 июня, [`:is()`](https://doka.guide/css/is/), Игорь Теплостанский
- 1 июня, [`banner`](https://doka.guide/a11y/role-banner/), Татьяна Фокина
- 1 июня, [Атрибут `accept`](https://doka.guide/html/accept/), Татьяна Гладких, Игорь Теплостанский

## Май 2024

- 28 мая, [`search`](https://doka.guide/a11y/role-search/), Татьяна Фокина
Expand Down
4 changes: 4 additions & 0 deletions a11y/a11y-html/index.11tydata.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"createdAt": "2024-06-17T11:25:33.033Z",
"updatedAt": "2024-06-17T11:25:33.033Z"
}
2 changes: 1 addition & 1 deletion a11y/a11y-html/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ tags:

Не все нативные теги доступны по умолчанию. Например, [`<details>` и `<summary>`](/html/details/) ведут себя по-разному в зависимости от комбинации браузера и скринридера. Теги позволяют искать текст, спрятанный внутри `<details>`, и при поиске автоматически показывают блок с информацией. В теории при клике, нажатии или тапе на `<details>` должно раскрываться его детальное содержимое. Однако при взаимодействии с этим элементом [TalkBack в Firefox и мобильный VoiceOver в Safari](https://www.scottohara.me//blog/2022/09/12/details-summary) не объявляют его роль и состояние правильно. Так что пока нет полной поддержки этих тегов.

Даже такие основные элементы как `<label>` и `<input>` не полностью доступны скринридеру. Существует [проблема с вложенным в `<label>` контентом в Safari](https://russmaxdesign.github.io/accessible-forms/input-help-text-wrapped-label.html) как в следующем примере:
Даже такие основные элементы как `<label>` и [`<input>`](/html/input/) не полностью доступны скринридеру. Существует [проблема с вложенным в `<label>` контентом в Safari](https://russmaxdesign.github.io/accessible-forms/input-help-text-wrapped-label.html) как в следующем примере:

```html
<label for="name">
Expand Down
2 changes: 1 addition & 1 deletion a11y/accessible-forms/index.11tydata.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"createdAt": "2024-04-24T21:51:03.970Z",
"updatedAt": "2024-04-24T21:51:03.970Z"
"updatedAt": "2024-06-27T08:42:31.171Z"
}
13 changes: 7 additions & 6 deletions a11y/accessible-forms/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ tags:

Каждое поле должно иметь связанную с ним подпись в элементе `<label>`, который описывает его назначение. Благодаря этому текст визуально связан с элементом управления формой (контролом) и считывается [скринридерами](/a11y/screenreaders/).

Кроме этого, нажатие на `<label>` переносит фокус на связанное с ним поле и делает его более крупным элементом. Поэтому для подписей полей формы рекомендуется использовать `<label>`, вместо `title` и `placeholder`.
Кроме этого, нажатие на `<label>` переносит фокус на связанное с ним поле и делает его более крупным элементом. Поэтому для подписей полей формы рекомендуется использовать `<label>`, вместо `title` и [`placeholder`](/html/placeholder/).

### Используются семантические HTML-теги

Expand Down Expand Up @@ -89,7 +89,7 @@ tags:

### Пользователь знает об ошибках и успехе

Важно сообщать об ошибках и успешности заполнения формы всем пользователям. К примеру, когда пользователь ввёл неверные данные в обязательное для заполнения поле с атрибутом `required`, то при отправке формы появится сообщение об ошибке. Текст ошибки важно не только расположить визуально рядом с полем, к которому она относится, но и сообщить о ней пользователям скринридеров.
Важно сообщать об ошибках и успешности заполнения формы всем пользователям. К примеру, когда пользователь ввёл неверные данные в обязательное для заполнения поле с атрибутом [`required`](/html/required/), то при отправке формы появится сообщение об ошибке. Текст ошибки важно не только расположить визуально рядом с полем, к которому она относится, но и сообщить о ней пользователям скринридеров.

После правильного заполнения формы и успешной отправки хорошо выводить сообщение об успехе.

Expand Down Expand Up @@ -224,10 +224,10 @@ tags:

- `required` – поле обязательно для заполнения.
- `disabled` – поле недоступно для ввода.
- `readonly` – поле доступно только для чтения.
- [`readonly`](/html/readonly/) – поле доступно только для чтения.
- `maxlength` – максимальное количество символов, которое может быть в поле.
- `pattern` – регулярное выражение, которому должны соответствовать введённые данные.
- `autocomplete` – должен ли браузер автоматически заполнять поле формы на основе предыдущих вводов пользователя. [Список всех значений `autocomplete`](https://www.w3.org/TR/WCAG21/#input-purposes).
- `autocomplete` – должен ли браузер автоматически заполнять поле формы на основе предыдущих вводов пользователя. [Список всех значений `autocomplete`](/html/autocomplete/#kak-pishetsya).

## Важные «не»

Expand Down Expand Up @@ -255,9 +255,10 @@ tags:

Также стоит добавить, что `<label>` бывает:

- Явным или прямым, когда они вложен.
- Неявным, когда теги расположены рядом и связаны через `for` и `id`. В целом они равносильны, но с явными могут быть проблемы с объявлением некоторыми скринридерами. [Пруф.](https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input)
- Неявным, когда вложен в другой тег.
- Явным или прямым, когда расположен рядом с другим тегом, и они связаны через `for` и `id`.

В целом они равносильны, но с неявными могут быть [проблемы с объявлением скринридерами](https://css-tricks.com/html-inputs-and-labels-a-love-story/#aa-how-to-pair-a-label-and-an-input).

### `aria-labelledby`

Expand Down
4 changes: 4 additions & 0 deletions a11y/accessible-names-and-descs/index.11tydata.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"createdAt": "2024-06-17T11:25:33.033Z",
"updatedAt": "2024-07-03T19:50:31.006Z"
}
6 changes: 3 additions & 3 deletions a11y/accessible-names-and-descs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ _Доступное описание (accessible description)_ — дополн
</select>
```

`title` и `placeholder` используют для краткой дополнительной информации или подсказок, но ещё и для хранения доступных имён. В реальности атрибуты предназначены для другого и считаются резервным источником. Некоторые вспомогательные технологии и браузеры вообще не считают содержимое `title` и `placeholder` именами, поэтому пользователи не узнают о них. Так что хранить имена в этих атрибутах — плохая практика.
`title` и [`placeholder`](/html/placeholder/) используют для краткой дополнительной информации или подсказок, но ещё и для хранения доступных имён. В реальности атрибуты предназначены для другого и считаются резервным источником. Некоторые вспомогательные технологии и браузеры вообще не считают содержимое `title` и `placeholder` именами, поэтому пользователи не узнают о них. Так что хранить имена в этих атрибутах — плохая практика.

### Способы с ARIA

Expand Down Expand Up @@ -204,7 +204,7 @@ _Доступное описание (accessible description)_ — дополн
1. Специальные HTML-теги и атрибуты с одинаковым уровнем приоритета:
* `<label>` — устанавливает явную связь между именем и элементом формы через атрибут `for` или вложенность.
* `value` — задаёт имя для полей с типом `submit` для отправки данных и `reset` для сброса.
* `alt` — содержит имя для картинок `<img>`, областей изображений [`<area>`](/html/area/) и кнопок для загрузки файлов с графикой `<input type="image">`.
* `alt` — содержит имя для картинок [`<img>`](/html/img/), областей изображений [`<area>`](/html/area/) и кнопок для загрузки файлов с графикой `<input type="image">`.
* Первый параграф, вложенный в `<caption>` — добавляет имя для таблицы.
* Первый элемент, вложенный в `<figcaption>` — задаёт имя содержимому `<figure>`.

Expand All @@ -217,7 +217,7 @@ _Доступное описание (accessible description)_ — дополн

1. `aria-describedby` — самый высокий приоритет, связывает основной элемент с описанием, которое хранится в одном или нескольких других.
1. `aria-description` — задаёт описание элементу напрямую.
1. Cобственные описания из `<legend>` в `<fieldset>`, `<caption>` в `<table> `, `<figcaption>` в `<figure>`, `<desc>` в `<svg>`.
1. Cобственные описания из `<legend>` в `<fieldset>`, `<caption>` в `<table> `, `<figcaption>` в `<figure>`, `<desc>` в [`<svg>`](/html/svg/).
1. `title` — наименьший приоритет, добавляет всплывающую подсказку.

![Приоритет источников для доступных описаний](images/desc-calculation.png)
Expand Down
2 changes: 1 addition & 1 deletion a11y/aria-intro/index.11tydata.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"createdAt": "2024-04-12T14:49:27.614Z",
"updatedAt": "2024-04-12T14:49:27.614Z"
"updatedAt": "2024-07-03T19:50:31.006Z"
}
2 changes: 1 addition & 1 deletion a11y/aria-intro/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ ARIA-атрибуты тоже бывают разными. Какие-то ат

Не изменяйте встроенную семантику элементов без серьёзной необходимости.

Когда используете ARIA-роли, встроенные роли HTML-тегов перезаписываются. Поэтому для кастомных элементов лучше использовать семантически нейтральные `<div>` и `<span>`, если это не исключительный случай.
Когда используете ARIA-роли, встроенные роли HTML-тегов перезаписываются. Поэтому для кастомных элементов лучше использовать семантически нейтральные `<div>` и [`<span>`](/html/span/), если это не исключительный случай.

```html
<!-- Неправильно ⛔ -->
Expand Down
4 changes: 4 additions & 0 deletions a11y/aria-roles/index.11tydata.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"createdAt": "2024-06-17T11:21:46.176Z",
"updatedAt": "2024-06-17T11:40:04.090Z"
}
Loading

0 comments on commit c758985

Please sign in to comment.