From ef2e89bb6d7aea525e3ee5347853bd01e12007df Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 20 Aug 2024 12:18:02 +0300
Subject: [PATCH] fix(ActionSheet): add a11y documentation for ActionSheetItem
 (#7394)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

Необходимо проверить общую цифровую доступность компонентов `ActionSheet` и `ActionSheetItem`.

h2. Изменения

- Написал документацию по цифровой доступности для компонента `ActionSheetItem`
- Поправил пример с `selectable` элементами в `storybook`
- Поменял пример с `selectable` элементами в `styleguide`. Взял из дизайна в фигме
- Проверил общую доступность компонента в `styleguide` и `storybook` через `VoiceOver` и `NVDA`
---
 .../ActionSheet/ActionSheet.stories.tsx       | 10 +--
 .../vkui/src/components/ActionSheet/Readme.md | 62 +++++--------------
 .../src/components/ActionSheetItem/Readme.md  |  6 ++
 3 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
index 5fcffed82f..65123c20a4 100644
--- a/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
+++ b/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
@@ -118,11 +118,11 @@ export const WithSelectable: Story = {
   ...Base,
   args: {
     items: [
-      { selectable: true, children: 'Лучшие друзья', defaultChecked: true },
-      { selectable: true, children: 'Родственники' },
-      { selectable: true, children: 'Коллеги' },
-      { selectable: true, children: 'Друзья по школе' },
-      { selectable: true, children: 'Друзья по вузу' },
+      { name: 'menu', selectable: true, children: 'Лучшие друзья', defaultChecked: true },
+      { name: 'menu', selectable: true, children: 'Родственники' },
+      { name: 'menu', selectable: true, children: 'Коллеги' },
+      { name: 'menu', selectable: true, children: 'Друзья по школе' },
+      { name: 'menu', selectable: true, children: 'Друзья по вузу' },
     ],
   },
 };
diff --git a/packages/vkui/src/components/ActionSheet/Readme.md b/packages/vkui/src/components/ActionSheet/Readme.md
index 3f7b5df3a2..7400c27dde 100644
--- a/packages/vkui/src/components/ActionSheet/Readme.md
+++ b/packages/vkui/src/components/ActionSheet/Readme.md
@@ -139,58 +139,26 @@ const openSubtitle = () =>
   );
 
 const SelectableActionSheet = () => {
-  const [filter, setFilter] = useState('best');
+  const [filter, setFilter] = useState('Нормальная');
   const onChange = (e) => {
     setFilter(e.target.value);
   };
 
+  const speeds = ['0.25x', '0.5x', '0.75x', 'Нормальная', '1.25x', '1.5x', '2x', '3x'];
+
   return (
-    <ActionSheet onClose={onClose} toggleRef={selectableTargetRef}>
-      <ActionSheetItem
-        onChange={onChange}
-        checked={filter === 'best'}
-        name="filter"
-        value="best"
-        selectable
-      >
-        Лучшие друзья
-      </ActionSheetItem>
-      <ActionSheetItem
-        onChange={onChange}
-        checked={filter === 'relatives'}
-        name="filter"
-        value="relatives"
-        selectable
-      >
-        Родственники
-      </ActionSheetItem>
-      <ActionSheetItem
-        onChange={onChange}
-        checked={filter === 'collegues'}
-        name="filter"
-        value="collegues"
-        selectable
-      >
-        Коллеги
-      </ActionSheetItem>
-      <ActionSheetItem
-        onChange={onChange}
-        checked={filter === 'school'}
-        name="filter"
-        value="school"
-        selectable
-      >
-        Друзья по школе
-      </ActionSheetItem>
-      <ActionSheetItem
-        onChange={onChange}
-        checked={filter === 'university'}
-        name="filter"
-        value="university"
-        selectable
-      >
-        Друзья по вузу
-      </ActionSheetItem>
+    <ActionSheet header="Изменить скорость видео" onClose={onClose} toggleRef={selectableTargetRef}>
+      {speeds.map((speed) => (
+        <ActionSheetItem
+          onChange={onChange}
+          checked={filter === speed}
+          name="filter"
+          value={speed}
+          selectable
+        >
+          {speed}
+        </ActionSheetItem>
+      ))}
     </ActionSheet>
   );
 };
diff --git a/packages/vkui/src/components/ActionSheetItem/Readme.md b/packages/vkui/src/components/ActionSheetItem/Readme.md
index 4fe0c6372e..fc391ae896 100644
--- a/packages/vkui/src/components/ActionSheetItem/Readme.md
+++ b/packages/vkui/src/components/ActionSheetItem/Readme.md
@@ -1 +1,7 @@
 Элемент списка `ActionSheet`. Если в `ActionSheetItem` передать `autoCloseDisabled={true}`, то при клике на эту опцию `ActionSheet` не будет автоматически вызывать переданный в него `onClose`, закрыть его будет необходимо самостоятельно.
+
+## Цифровая доступность (a11y)
+
+- При задании параметру `selectable` значение `true` для корректной работы важно задать всем `ActionSheetItems` одинаковое значение параметра `name`.
+  Обусловлено это тем, что в реализации используется нативный `input[type='radio']` и по пунктам можно навигировать как по обычным radio-кнопкам
+- При задании `selectable` значение `true` в реализации используется тег `"label"`. В остальных случаях используется тег `"div"`