fix(SubnavigationBar): combining buttons into a list [a11y]

packages/vkui/src/components/SubnavigationBar/SubnavigationBar.module.css

@@ -4,8 +4,8 @@
 }
 
 .SubnavigationBar__scrollIn {
-  padding-top: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
-  padding-bottom: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
+  margin: 0;
+  padding: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px) 0;
   display: flex;
 }
 
@@ -14,3 +14,22 @@
   content: '';
   min-width: var(--vkui--size_base_padding_horizontal--regular);
 }
+
+.SubnavigationBar__item {
+  list-style-type: none;
+  display: flex;
+}
+
+.SubnavigationBar__item + .SubnavigationBar__item {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
+
+/**
+ * CMP:
+ * SubnavigationBar
+ */
+
+:global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationBar__item {
+  flex: 1;
+  min-width: 0;
+}

packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -52,13 +52,23 @@ export const SubnavigationBar = ({
     <div
       {...restProps}
       className={classNames(
-        'vkuiInternalSubnavigationBar',
+        // TODO: [>=6]
+        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
+        // и удалить применение селектора в `SubnavigationButton.module.css`.
+        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
+        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
         mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),
         className,
       )}
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
-        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>
+        <ul className={styles['SubnavigationBar__scrollIn']}>
+          {React.Children.map(children, (child, idx) => (
+            <li key={idx} className={styles['SubnavigationBar__item']}>
+              {child}
+            </li>
+          ))}
+        </ul>
       </ScrollWrapper>
     </div>
   );

packages/vkui/src/components/SubnavigationButton/SubnavigationButton.module.css

@@ -136,6 +136,7 @@
  * Impact:
  * Counter
  */
+
 .SubnavigationButton {
   --vkui_internal--counter_inherit_background: var(--vkui--color_background_accent_themed);
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
@@ -146,14 +147,6 @@
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
 }
 
-/**
- * CMP:
- * SubnavigationBar
- */
-:global(.vkuiInternalSubnavigationBar) .SubnavigationButton + .SubnavigationButton {
-  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
-}
-
 :global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
   flex: 1;
   min-width: 0;