fix(ActionSheet): add a11y documentation for ActionSheetItem (#7394)

h2. Описание

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

h2. Изменения

- Написал документацию по цифровой доступности для компонента `ActionSheetItem`
- Поправил пример с `selectable` элементами в `storybook`
- Поменял пример с `selectable` элементами в `styleguide`. Взял из дизайна в фигме
- Проверил общую доступность компонента в `styleguide` и `storybook` через `VoiceOver` и `NVDA`

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: 'Друзья по вузу' },
     ],
   },
 };

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>
   );
 };

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"`