@foxford/navigation-ui 1.0.2 → 1.1.0

package/README.mdx

@@ -104,6 +104,64 @@
 - Потребителю нужно объявить `*.svg` (см. `src/shared/assets.d.ts`): шаблонные имена
   модулей живут только в глобальном `.d.ts`, а он не переезжает вместе с исходниками пакета.
 
+## Доступность и микроразметка
+
+**Семантика задаётся атрибутами на существующих узлах, теги не меняются.** `<button>`, `<ul>`,
+`<h2>` несут стили браузера по умолчанию (рамки, отступы, маркеры, шрифт), и замена `div` на
+них — правка внешнего вида у всех хостов разом. Роль атрибутом (`role="button"`,
+`role="heading"`, `role="navigation"`) даёт ту же семантику без единого пикселя. Узлам с
+`role="button"` клавиши Enter/Space даёт `buttonProps()` из `src/shared/a11y.ts`. Id `foxNav*`
+не трогаются: это контракт с хостами; добавлены только новые (`foxNavMenu`,
+`foxNavSegment-<id>`).
+
+- **Навигация — паттерн disclosure из APG, а не `role="menu"`.** Кнопка «Меню» и пункты сегментов
+  — кнопки с `aria-expanded`/`aria-controls`, панель сегмента — `region`. Роль `menu` — для меню
+  приложения: она обязала бы к роуминг-фокусу стрелками и сломала бы обход Tab-ом.
+- **Ориентиры `banner`/`contentinfo` — только флагом `landmarks`.** Ориентир на странице один: на
+  портале шапка и подвал его и есть, а на чужом сайте у хоста свои, и второй сбил бы скринридер.
+  `navigation` (большое меню, меню в один клик, колонки подвала) ставится всегда: таких
+  ориентиров может быть несколько, у каждого своё имя.
+- **Закрытое профиль-меню — `aria-hidden` + `inert`.** Спрятано оно только `opacity: 0` (ради
+  анимации), и без атрибутов его ссылки читались бы скринридером и ловили Tab невидимыми.
+  Одного `aria-hidden` мало: фокус оно не снимает.
+- **`aria-controls` — только на уникальные узлы.** Мобильная и десктопная раскладки обе в DOM,
+  панель пользователя с профиль-меню в документе дважды, и их id дублируются. Поэтому у кнопок
+  профиля — только `aria-expanded`.
+- **Закрыли меню с фокусом внутри — фокус возвращается на кнопку «Меню»** (`useReturnFocus`).
+  Иначе он терялся бы на `body` вместе со спрятанной простынёй. Был снаружи — не отбирается.
+  Где фокус, запоминается по `focusin`, а не читается при закрытии: к этому моменту браузер
+  мог уже снять его со спрятанного узла.
+- **Открыли меню с клавиатуры — фокус на первом сегменте** (`useFocusOnKeyboardOpen`). В
+  документе меню стоит после правой части шапки и одноклик-меню, и без этого до него было бы с
+  десяток нажатий Tab. Клавиатура узнаётся по `click` с `detail === 0`; мышью открыли — фокус
+  не трогается. Ставится он попытками: меню проявляется анимацией `visibility` с задержкой, и
+  на скрытый узел `focus()` молча не срабатывает.
+- **Маркеры «есть новое» и корзина сообщаются именем кнопки**: точку скринридер не видит.
+- **Аккордеон подвала не трогается** — ни разметка, ни поведение. Имя колонке даёт ориентир
+  `navigation` на её списке (`FooterMenu`, проп `label`).
+
+**Микроразметка — JSON-LD, одним узлом в конце подвала** (`FooterProps.jsonLd`,
+`src/shared/json-ld.tsx`). Что в ней, решает адаптер: вёрстка не знает, на своём ли она сайте.
+Не передана — узла нет. `<` в данных экранируется, иначе строка `</script>` закрыла бы тег.
+
+- **Кнопкам, чья подпись прячется на узком экране, имя задаётся явно**: «Меню» (подпись скрыта
+  ниже S), кнопки с `hideTextInMobile` (`ActionButton` берёт имя из `text`), иконки без подписи
+  вовсе — «Выйти из аккаунта», «Бонусы за друга».
+
+Сторожей три:
+- **снапшоты разметки** — при правке доступности их диф обязан состоять только из добавленных
+  атрибутов;
+- **`tests/a11y.spec.tsx`** — атрибуты живые: меняются с состоянием, клавиши работают, фокус
+  ходит куда надо;
+- **`tests/axe.spec.tsx`** — axe (`axe-core`) по шапке и подвалу во всех состояниях снапшотов.
+  Правила — WCAG 2.x A/AA и «лучшие практики» про ориентиры; страничные правила (`region`) и
+  те, что требуют раскладки (`color-contrast`, `target-size`), выключены — набор и причины в
+  `tests/axe.ts`. jsdom не считает медиа-запросы, и обе раскладки видны разом: для axe это
+  строже жизни. Обратная сторона — спрятанное медиа-запросом (подпись «Меню» на телефоне) axe
+  здесь не увидит, такие случаи проверяются глазами в браузере. axe в jsdom небыстрый — около полутора
+  секунд на сценарий, — поэтому у спеков свой таймаут, а прогоны выстроены в очередь:
+  `axe.run` один на процесс и на параллельный вызов бросает исключение синхронно.
+
 ## Что не перенесено
 
 Отличия от легаси — каждое помечено комментарием в коде:

package/footer/atoms/logo-sk/index.js

@@ -4,7 +4,7 @@ function LogoSk({
   onClick
 }) {
   return jsx(Root, {
-    "aria-label": "Skolkovo",
+    "aria-label": "Сколково",
     href: "http://sk.ru",
     onClick,
     target: "_blank",

package/footer/atoms/social-link/index.d.ts

@@ -2,7 +2,9 @@ import type { IconName } from '@foxford/ui';
 export interface SocialLinkProps {
     href: string;
     iconName: IconName;
+    /** Имя для скринридера; по умолчанию — название сети. */
+    label?: string;
     onClick?: () => void;
 }
-export declare function SocialLink({ href, iconName, onClick }: SocialLinkProps): import("preact").JSX.Element;
+export declare function SocialLink({ href, iconName, label, onClick }: SocialLinkProps): import("preact").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/footer/atoms/social-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/footer/atoms/social-link/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAU3C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,eAAe,gCAgBtE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/footer/atoms/social-link/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAmB3C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,eAAe,gCAiB7E"}

package/footer/atoms/social-link/index.js

@@ -8,12 +8,21 @@ const Root = styled(Button).withConfig({
 const palette = {
   color: "content-oncolor-secondary"
 };
+const NETWORK_NAMES = {
+  maxSocial: "MAX",
+  okSocial: "Одноклассники",
+  telegramSocial: "Telegram",
+  vkSocial: "ВКонтакте",
+  youtubeAltSocial: "YouTube"
+};
 function SocialLink({
   href,
   iconName,
+  label,
   onClick
 }) {
   return jsx(Root, {
+    "aria-label": label != null ? label : NETWORK_NAMES[iconName],
     href,
     icon: iconName,
     iconProps: {

package/footer/contacts-column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contacts-column.d.ts","sourceRoot":"","sources":["../../src/footer/contacts-column.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAA;AAE5D,KAAK,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,kBAAkB,GAAG,YAAY,GAAG,aAAa,CAAC,CAAA;AA0B5G,wBAAgB,cAAc,CAAC,EAC7B,QAAa,EACb,gBAAwB,EACxB,UAAe,EACf,WAAgB,GACjB,EAAE,mBAAmB,gCAoErB"}
+{"version":3,"file":"contacts-column.d.ts","sourceRoot":"","sources":["../../src/footer/contacts-column.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,SAAS,CAAA;AAE5D,KAAK,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,kBAAkB,GAAG,YAAY,GAAG,aAAa,CAAC,CAAA;AA0B5G,wBAAgB,cAAc,CAAC,EAC7B,QAAa,EACb,gBAAwB,EACxB,UAAe,EACf,WAAgB,GACjB,EAAE,mBAAmB,gCAwErB"}

package/footer/contacts-column.js

@@ -32,7 +32,8 @@ function Links({
   return jsx(SocialLinks, {
     children: links.map((link) => jsx(SocialLink, {
       href: link.href,
-      iconName: link.iconName
+      iconName: link.iconName,
+      label: link.label
     }, link.id))
   });
 }
@@ -81,6 +82,8 @@ function ContactsColumn({
       children: jsxs(Spacer, {
         bottomXL: 24,
         children: [jsxs(ContactsTitle, {
+          "aria-level": 2,
+          role: "heading",
           children: ["Подбор ", jsx("br", {}), "и покупка занятий"]
         }), salesPhone !== void 0 && jsx(ContactPhone, {
           number: salesPhone
@@ -92,6 +95,8 @@ function ContactsColumn({
       children: jsxs(Spacer, {
         bottomXL: 24,
         children: [jsxs(ContactsTitle, {
+          "aria-level": 2,
+          role: "heading",
           children: ["Поддержка учеников ", jsx("br", {}), "и родителей Фоксфорда"]
         }), phone !== void 0 && jsx(ContactPhone, {
           number: phone
@@ -106,6 +111,8 @@ function ContactsColumn({
         bottomS: 0,
         children: jsxs(Contacts, {
           children: [jsx(ContactsTitle, {
+            "aria-level": 2,
+            role: "heading",
             children: "Почта"
           }), jsx(Email, {
             href: `mailto:${contacts.email}`,
@@ -124,6 +131,8 @@ function ContactsColumn({
       children: jsxs(Spacer, {
         topXL: 24,
         children: [jsx(ContactsTitle, {
+          "aria-level": 2,
+          role: "heading",
           children: "Социальные сети"
         }), jsx(Links, {
           links: socialLinks

package/footer/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/footer/footer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,gCA6CxC"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/footer/footer.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,gCA8CxC"}

package/footer/footer.js

@@ -22,6 +22,7 @@ import { OnboardingBanner } from "./molecules/onboarding-banner/index.js";
 import { Root, Container, Logo, MainInner, Column, Banners } from "./styled.js";
 import { SubFooter } from "./sub-footer.js";
 import { SELECTOR_IDS } from "../shared/constants.js";
+import { JsonLd } from "../shared/json-ld.js";
 import { NavigationTheme } from "../shared/theme-provider.js";
 import { jsx, jsxs } from "preact/jsx-runtime";
 function Footer(props) {
@@ -30,13 +31,16 @@ function Footer(props) {
     appLinks,
     cobranding = false,
     freeItems,
+    jsonLd,
+    landmarks = false,
     slots,
     studyItems
   } = props;
   return jsx(NavigationTheme, {
-    children: jsx(Root, {
+    children: jsxs(Root, {
       id: SELECTOR_IDS.FOOTER,
-      children: jsxs(Container, {
+      role: landmarks ? "contentinfo" : void 0,
+      children: [jsxs(Container, {
         children: [slots == null ? void 0 : slots.aboveLinks, jsx(Logo, {
           cobranding
         }), jsxs(MainInner, {
@@ -44,21 +48,24 @@ function Footer(props) {
             children: jsx(Accordeon, {
               heading: "О нас",
               children: jsx(FooterMenu, {
-                items: aboutItems
+                items: aboutItems,
+                label: "О нас"
               })
             })
           }), jsx(Column, {
             children: jsx(Accordeon, {
               heading: "Учёба в Фоксфорде",
               children: jsx(FooterMenu, {
-                items: studyItems
+                items: studyItems,
+                label: "Учёба в Фоксфорде"
               })
             })
           }), jsx(Column, {
             children: jsx(Accordeon, {
               heading: "Бесплатно",
               children: jsx(FooterMenu, {
-                items: freeItems
+                items: freeItems,
+                label: "Бесплатно"
               })
             })
           }), jsxs(Banners, {
@@ -68,7 +75,9 @@ function Footer(props) {
             }), slots == null ? void 0 : slots.banners]
           }), jsx(ContactsColumn, __spreadValues({}, props))]
         }), slots == null ? void 0 : slots.belowLinks, jsx(SubFooter, __spreadValues({}, props)), slots == null ? void 0 : slots.belowSubFooter]
-      })
+      }), jsonLd && jsx(JsonLd, {
+        data: jsonLd
+      })]
     })
   });
 }

package/footer/molecules/footer-menu/index.d.ts

@@ -6,7 +6,9 @@ export interface FooterMenuItem {
 }
 export interface FooterMenuProps {
     items: FooterMenuItem[];
+    /** Имя колонки для ориентира `navigation` — тот же текст, что в заголовке аккордеона. */
+    label?: string;
     onItemClick?: (id: string) => void;
 }
-export declare function FooterMenu({ items, onItemClick }: FooterMenuProps): import("preact").JSX.Element;
+export declare function FooterMenu({ items, label, onItemClick }: FooterMenuProps): import("preact").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/footer/molecules/footer-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/footer/molecules/footer-menu/index.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,eAAe,gCAUjE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/footer/molecules/footer-menu/index.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,eAAe,gCAUxE"}

package/footer/molecules/footer-menu/index.js

@@ -13,9 +13,12 @@ const Item = styled(Link).withConfig({
 }) => theme.colors["content-oncolor-primary"]);
 function FooterMenu({
   items,
+  label,
   onItemClick
 }) {
   return jsx("div", {
+    "aria-label": label,
+    role: label === void 0 ? void 0 : "navigation",
     children: items.map((item) => jsx(Item, {
       $isSpacer: item.isSpacer,
       href: item.url,

package/footer/molecules/geoposition/index.js

@@ -22,6 +22,7 @@ function Geoposition({
       name: "navigation",
       size: 20
     }), jsx(CityButton, {
+      "aria-haspopup": "dialog",
       onClick: handleOpen,
       type: "button",
       children: currentCity == null ? void 0 : currentCity.name

package/footer/types.d.ts

@@ -6,6 +6,11 @@ export interface FooterSocialLink {
     href: string;
     iconName: IconName;
     id: string;
+    /**
+     * Имя ссылки для скринридера: у кнопки только пиктограмма. Не передано — берётся название
+     * сети по пиктограмме (`atoms/social-link`).
+     */
+    label?: string;
 }
 export interface FooterContacts {
     email?: string;
@@ -36,6 +41,17 @@ export interface FooterProps {
     currentYear: number;
     freeItems: FooterMenuItem[];
     hideDataOnMirror?: boolean;
+    /**
+     * Микроразметка schema.org одним узлом JSON-LD в конце подвала. Что в ней, решает адаптер:
+     * вёрстка не знает, на своём ли она сайте, а организация Фоксфорда на странице партнёра
+     * объявила бы поисковику, что страница принадлежит Фоксфорду. Не передана — узла нет.
+     */
+    jsonLd?: Record<string, unknown>;
+    /**
+     * Объявить подвал ориентиром `contentinfo`. Он должен быть на странице один — см.
+     * `NavigationProps.landmarks`: по умолчанию выключено.
+     */
+    landmarks?: boolean;
     onSelectCity?: (value: string) => void;
     salesLinks?: FooterSocialLink[];
     slots?: FooterSlots;

package/footer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAE9D,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,MAAM,CAAC,EAAE,IAAI,EAAE,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8FAA8F;IAC9F,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,UAAU,EAAE,cAAc,EAAE,CAAA;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/footer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAE9D,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,MAAM,CAAC,EAAE,IAAI,EAAE,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8FAA8F;IAC9F,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,cAAc,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,UAAU,EAAE,cAAc,EAAE,CAAA;CAC7B"}

package/header/atoms/action-button/index.d.ts

@@ -2,6 +2,13 @@ import type { NavigationIconName } from './elementary-icons';
 import type { ReactNode } from 'react';
 export interface ActionButtonProps {
     active?: boolean;
+    /**
+     * Доступное имя, когда видимого текста нет или его мало: кнопка-иконка, текст, спрятанный на
+     * узком экране. Не передано — имя складывается из текста и маркера.
+     */
+    'aria-label'?: string;
+    /** Кнопка раскрывает меню (профиль): его состояние для скринридера. */
+    expanded?: boolean;
     avatar?: ReactNode;
     className?: string;
     hideTextInMobile?: boolean;
@@ -14,5 +21,5 @@ export interface ActionButtonProps {
     text?: ReactNode;
     url?: string;
 }
-export declare function ActionButton({ active, avatar, className, hideTextInMobile, icon, iconSize, id, marker, onClick, text, url, }: ActionButtonProps): import("preact").JSX.Element;
+export declare function ActionButton({ active, 'aria-label': ariaLabel, avatar, className, expanded, hideTextInMobile, icon, iconSize, id, marker, onClick, text, url, }: ActionButtonProps): import("preact").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/header/atoms/action-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/action-button/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAWD,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,MAAM,EACN,SAAS,EACT,gBAAwB,EACxB,IAAI,EACJ,QAAa,EACb,EAAE,EACF,MAAc,EACd,OAAO,EACP,IAAI,EACJ,GAAG,GACJ,EAAE,iBAAiB,gCA+BnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/action-button/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,KAAK,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,IAAI,CAAC,EAAE,kBAAkB,CAAA;IACzB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAiED,wBAAgB,YAAY,CAAC,EAC3B,MAAc,EACd,YAAY,EAAE,SAAS,EACvB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,gBAAwB,EACxB,IAAI,EACJ,QAAQ,EACR,EAAE,EACF,MAAc,EACd,OAAO,EACP,IAAI,EACJ,GAAG,GACJ,EAAE,iBAAiB,gCA+BnB"}

package/header/atoms/action-button/index.js

@@ -2,7 +2,7 @@ import { Icon } from "@foxford/ui";
 import { isElementaryIcon, ELEMENTARY_ICONS } from "./elementary-icons.js";
 import { Inner, Marker, Text } from "./styled.js";
 import { Link } from "../../../shared/link.js";
-import { jsxs, jsx } from "preact/jsx-runtime";
+import { jsx, jsxs } from "preact/jsx-runtime";
 function ButtonIcon({
   icon,
   size
@@ -21,21 +21,33 @@ function ButtonIcon({
     size
   });
 }
-function ActionButton({
-  active = false,
+function accessibleName(label, text, {
+  hideTextInMobile,
+  marker
+}) {
+  if (label !== void 0) {
+    return label;
+  }
+  if (typeof text !== "string" || text === "") {
+    return void 0;
+  }
+  if (marker) {
+    return `${text}, есть новое`;
+  }
+  return hideTextInMobile ? text : void 0;
+}
+function renderContent({
+  active,
   avatar,
   className,
-  hideTextInMobile = false,
+  hideTextInMobile,
   icon,
   iconSize = 20,
-  id,
-  marker = false,
-  onClick,
-  text,
-  url
+  marker,
+  text
 }) {
   const hasText = text !== void 0 && text !== "";
-  const content = jsxs(Inner, {
+  return jsxs(Inner, {
     $active: active,
     className,
     children: [(avatar !== void 0 || icon !== void 0) && jsx(Marker, {
@@ -49,13 +61,48 @@ function ActionButton({
       children: text
     })]
   });
+}
+function ActionButton({
+  active = false,
+  "aria-label": ariaLabel,
+  avatar,
+  className,
+  expanded,
+  hideTextInMobile = false,
+  icon,
+  iconSize,
+  id,
+  marker = false,
+  onClick,
+  text,
+  url
+}) {
+  const label = accessibleName(ariaLabel, text, {
+    hideTextInMobile,
+    marker
+  });
+  const content = renderContent({
+    active,
+    avatar,
+    className,
+    hideTextInMobile,
+    icon,
+    iconSize,
+    marker,
+    text
+  });
   if (url) {
-    return jsx(Link, {
-      href: url,
-      id,
-      onClick,
-      children: content
-    });
+    return (
+      // `active` у ссылки ряда — это текущая страница (`highlightedItemId` адаптера).
+      jsx(Link, {
+        "aria-current": active ? "page" : void 0,
+        "aria-label": label,
+        href: url,
+        id,
+        onClick,
+        children: content
+      })
+    );
   }
   const onKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
@@ -63,6 +110,8 @@ function ActionButton({
     }
   };
   return jsx("div", {
+    "aria-expanded": expanded,
+    "aria-label": label,
     id,
     onClick,
     onKeyDown,

package/header/atoms/back-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/back-button/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,gCAOtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/back-button/index.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,gCAOtD"}

package/header/atoms/back-button/index.js

@@ -1,18 +1,39 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Icon } from "@foxford/ui";
 import { Root } from "./styled.js";
+import { buttonProps } from "../../../shared/a11y.js";
 import { jsxs, jsx } from "preact/jsx-runtime";
 function BackButton({
   onClick
 }) {
-  return jsxs(Root, {
-    onClick,
+  return jsxs(Root, __spreadProps(__spreadValues({
+    onClick
+  }, buttonProps(onClick)), {
     children: [jsx(Icon, {
       name: "arrowUp",
       preset: "brand",
       rotate: "-90deg",
       size: 20
     }), "  Назад"]
-  });
+  }));
 }
 export {
   BackButton

package/header/atoms/bonus-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/bonus-button/index.tsx"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,iCAE1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/bonus-button/index.tsx"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,iCAK1B"}

package/header/atoms/bonus-button/index.js

@@ -3,6 +3,7 @@ import { ActionButton } from "../action-button/index.js";
 import { jsx } from "preact/jsx-runtime";
 function BonusButton() {
   return jsx(ActionButton, {
+    "aria-label": "Бонусы за друга",
     icon: "giftBox",
     id: SELECTOR_IDS.TOP_MENU_REFERRALS,
     url: "/referrals"

package/header/atoms/close-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/close-button/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,gCAExD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/close-button/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,gCAMxD"}

package/header/atoms/close-button/index.js

@@ -5,6 +5,7 @@ function CloseButton({
 }) {
   return jsx(Root, {
     onClick,
+    type: "button",
     children: "Закрыть меню"
   });
 }

package/header/atoms/list-title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/list-title/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,cAAc,uCAc/D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/list-title/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,cAAc,uCAmB/D"}

package/header/atoms/list-title/index.js

@@ -16,6 +16,8 @@ function ListTitle({
     });
   }
   return jsx(Title, {
+    "aria-level": 3,
+    role: "heading",
     children: text
   });
 }

package/header/atoms/logout-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/logout-button/index.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,gCAE1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/logout-button/index.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,iBAAiB,gCAW1D"}

package/header/atoms/logout-button/index.js

@@ -5,6 +5,7 @@ function LogoutButton({
   onClick
 }) {
   return jsx(ActionButton, {
+    "aria-label": "Выйти из аккаунта",
     hideTextInMobile: true,
     icon: "logOut",
     id: SELECTOR_IDS.LOGOUT_BUTTON_MOBILE,

package/header/atoms/user-profile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/user-profile/index.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,gBAAgB,gCAiBvF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/atoms/user-profile/index.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,gBAAgB,gCAkBvF"}