feat: aria-label и role у компонентов

package.json

@@ -43,7 +43,7 @@
     "@typescript-eslint/parser": "^2.0.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.2.0",
     "@vkontakte/eslint-config": "2.5.0",
-    "@vkontakte/icons": "^1.91.0",
+    "@vkontakte/icons": "^1.100.0",
     "@vkontakte/vk-bridge": "^2.1.3",
     "@vkontakte/vkjs": "^0.20.0",
     "autoprefixer": "^9.8.0",

src/components/Badge/Badge.css

@@ -1,4 +1,5 @@
 .Badge {
+  display: block;
   flex-grow: 0;
   flex-shrink: 0;
   width: 6px;

src/components/Badge/Badge.tsx

@@ -14,13 +14,13 @@ export const Badge: FunctionComponent<BadgeProps> = ({
   const platform = usePlatform();
 
   return (
-    <div
+    <span
       vkuiClass={classNames(
         getClassName('Badge', platform),
         `Badge--${mode}`,
       )}
       {...restProps}>
-    </div>
+    </span>
   );
 };
 

src/components/Badge/Readme.md

@@ -6,17 +6,15 @@
     <PanelHeader>Бейдж</PanelHeader>
 
     <Group header={<Header mode="secondary">В пунктах меню</Header>}>
-      <Cell expandable before={<Icon28Notifications />} badge={<Badge />}>
+      <Cell expandable before={<Icon28Notifications />} badge={<Badge aria-label="Есть новые" />}>
         Уведомления
       </Cell>
     </Group>
 
     <Group header={<Header mode="secondary">В переключателях</Header>}>
       <Tabs>
-        <TabsItem after={<Badge mode="prominent" />}>Диалоги</TabsItem>
-        <TabsItem selected after={<Badge mode="prominent" />}>
-          Сообщения
-        </TabsItem>
+        <TabsItem after={<Badge mode="prominent" aria-label="Есть новые" />}>Диалоги</TabsItem>
+        <TabsItem selected after={<Badge mode="prominent" aria-label="Есть новые" />}>Сообщения</TabsItem>
       </Tabs>
     </Group>
 
@@ -27,7 +25,7 @@
       <TabbarItem indicator={<Counter size="s" mode="prominent">12</Counter>} text="Сообщения">
         <Icon28MessageOutline />
       </TabbarItem>
-      <TabbarItem indicator={<Badge mode="prominent" />} text="Клипы">
+      <TabbarItem indicator={<Badge mode="prominent" aria-label="Новый раздел" />} text="Клипы">
         <Icon28ClipOutline />
       </TabbarItem>
     </Tabbar>

src/components/Banner/Banner.css

@@ -71,10 +71,12 @@
   z-index: 2;
   width: 48px;
   height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin: 0;
+  padding: 12px;
   color: var(--icon_tertiary);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 .Banner__dismissIcon:active {

src/components/Banner/Banner.e2e.tsx

@@ -0,0 +1,18 @@
+import Avatar from '../Avatar/Avatar';
+import Banner, { BannerProps } from './Banner';
+import Button from '../Button/Button';
+import { describeScreenshotFuzz } from '../../testing/e2e/utils';
+
+describe('Banner', () => {
+  describeScreenshotFuzz((props: BannerProps ) => (
+    <Banner
+      before={<Avatar size={96} mode="image" src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg" />}
+      header="Баста в Ледовом"
+      subheader="Большой концерт"
+      asideMode="dismiss"
+      actions={<Button>Подробнее</Button>}
+      {...props}
+    />), [{
+    size: ['s', 'm'],
+  }]);
+});

src/components/Banner/Banner.tsx

@@ -27,7 +27,7 @@ export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Срабатывает при клике на иконку крестика при `asideMode="dismiss"`.
    */
-  onDismiss?: MouseEventHandler<HTMLDivElement>;
+  onDismiss?: MouseEventHandler<HTMLButtonElement>;
   /**
    * Содержимое, отображаемое в левой части баннера.
    */
@@ -137,10 +137,14 @@ const Banner: FunctionComponent<BannerProps> = (props: BannerProps) => {
 
         {asideMode === 'dismiss' &&
         <div vkuiClass="Banner__dismiss">
-          <div vkuiClass="Banner__dismissIcon" onClick={onDismiss}>
+          <button
+            type="button"
+            vkuiClass="Banner__dismissIcon"
+            onClick={onDismiss}
+          >
             {(platform === ANDROID || platform === VKCOM) && <Icon24Cancel />}
             {platform === IOS && (mode === 'image' ? <Icon24DismissDark /> : <Icon24DismissSubstract />)}
-          </div>
+          </button>
         </div>
         }
       </InnerComponent>

src/components/Cell/Cell.css

@@ -26,35 +26,31 @@
 .Cell__checkbox {
   display: none;
 }
-/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */
-.Cell .Cell__marker {
+
+.Cell--selectable .Cell__marker {
+  position: relative;
   flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
   padding: 0;
-}
-/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */
-.Cell .Cell__marker--off {
-  display: block;
   color: var(--icon_tertiary);
 }
-/* TODO избавиться от специфичного селектора после облегчения селекторов SimpleCell */
-.Cell .Cell__marker--on {
-  display: none;
-}
 
-.Cell--selectable .Cell__marker {
-  margin-right: 16px;
+.Cell--selectable .Cell__marker-in--checked {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  color: var(--accent);
 }
 
 .Cell--selectable.Cell--disabled {
   opacity: .6;
 }
 
-.Cell__checkbox:checked ~ .Cell__marker--on {
-  display: block;
-}
-
-.Cell__checkbox:checked ~ .Cell__marker--off {
-  display: none;
+.Cell--selectable .Cell__checkbox:checked ~ .Cell__marker .Cell__marker-in--checked {
+  visibility: initial;
 }
 
 .Cell--removable .SimpleCell {

src/components/Cell/Cell.tsx

@@ -164,6 +164,7 @@ export const Cell: FC<CellProps> = (props: CellProps) => {
       {...restProps}
       disabled={draggable || removable || disabled}
       Component={selectable ? 'label' : Component}
+      htmlFor={selectable ? name : undefined}
       before={
         <Fragment>
           {(platform === ANDROID || platform === VKCOM) && draggable && (
@@ -186,8 +187,10 @@ export const Cell: FC<CellProps> = (props: CellProps) => {
                 checked={checked}
                 disabled={disabled}
               />
-              <Icon24CheckCircleOff vkuiClass="Cell__marker Cell__marker--off" />
-              <Icon24CheckCircleOn vkuiClass="Cell__marker Cell__marker--on" />
+              <span vkuiClass="Cell__marker">
+                <Icon24CheckCircleOff vkuiClass="Cell__marker-in" />
+                <Icon24CheckCircleOn vkuiClass="Cell__marker-in Cell__marker-in--checked" />
+              </span>
             </Fragment>
           )}
           {before}

src/components/CellButton/Readme.md

@@ -11,9 +11,9 @@
       <CellButton before={<Icon28DeleteOutline />} mode="danger">Удалить беседу</CellButton>
     </Group>
     <Group header={<Header mode="secondary">Аватарки</Header>}>
-      <CellButton before={<Avatar shadow={false} size={40} ><Icon24Add /></Avatar>}>Добавить участников</CellButton>
-      <CellButton before={<Avatar shadow={false} size={48} ><Icon28AddOutline /></Avatar>}>Создать беседу</CellButton>
-      <CellButton before={<Avatar shadow={false} size={72} mode="image" ><Icon28AddOutline /></Avatar>}>Создать плейлист</CellButton>
+      <CellButton before={<Avatar shadow={false} size={40}><Icon24Add /></Avatar>}>Добавить участников</CellButton>
+      <CellButton before={<Avatar shadow={false} size={48}><Icon28AddOutline /></Avatar>}>Создать беседу</CellButton>
+      <CellButton before={<Avatar shadow={false} size={72} mode="image"><Icon28AddOutline /></Avatar>}>Создать плейлист</CellButton>
     </Group>
     <Group header={<Header mode="secondary">Центрирование</Header>}>
       <CellButton centered before={<Icon24Add />}>Создать беседу</CellButton>

src/components/Checkbox/Checkbox.tsx

@@ -44,17 +44,15 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
       <input {...restProps} type="checkbox" vkuiClass="Checkbox__input" ref={getRef} />
       <div vkuiClass="Checkbox__container">
         <div vkuiClass="Checkbox__icon Checkbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ?
-            <Icon20CheckBoxOn />
-            :
-            <Icon24CheckBoxOn />
+          {sizeY === SizeType.COMPACT || platform === VKCOM
+            ? <Icon20CheckBoxOn />
+            : <Icon24CheckBoxOn />
           }
         </div>
         <div vkuiClass="Checkbox__icon Checkbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM ?
-            <Icon20CheckBoxOff />
-            :
-            <Icon24CheckBoxOff />
+          {sizeY === SizeType.COMPACT || platform === VKCOM
+            ? <Icon20CheckBoxOff />
+            : <Icon24CheckBoxOff />
           }
         </div>
         <ContentComponent weight="regular" vkuiClass="Checkbox__content">{children}</ContentComponent>

src/components/Chip/Chip.css

@@ -25,6 +25,9 @@
 .Chip__remove {
   margin-left: 4px;
   margin-right: -2px;
+  padding: 0;
+  border: none;
+  background: transparent;
   cursor: pointer;
 }
 

src/components/Chip/Chip.e2e.tsx

@@ -0,0 +1,8 @@
+import Chip, { ChipProps } from './Chip';
+import { describeScreenshotFuzz } from '../../testing/e2e/utils';
+
+describe('Chip', () => {
+  describeScreenshotFuzz((props: ChipProps) => (<Chip value="arctic_monkeys" {...props}>Arctic Monkeys</Chip>), [{
+    removable: [false, true],
+  }]);
+});

src/components/Chip/Chip.test.tsx

@@ -13,7 +13,7 @@ describe('Chip', () => {
       <Chip value="white" onRemove={onRemove}>Белый</Chip>,
     );
 
-    userEvent.click(screen.queryByLabelText('Удалить чип'));
+    userEvent.click(screen.getByRole('button'));
 
     expect(onRemove).toHaveBeenCalled();
   });

src/components/Chip/Chip.tsx

@@ -29,11 +29,12 @@ const Chip: FC<ChipProps> = (props: ChipProps) => {
         {hasReactNode(after) && <div vkuiClass="Chip__after">{after}</div>}
         {removable &&
           <div
-            aria-label="Удалить чип"
+            role="button"
+            tabIndex={0}
             vkuiClass="Chip__remove"
             onClick={onRemoveWrapper}
           >
-            <Icon16Cancel fill="var(--icon_secondary)" aria-hidden="true" />
+            <Icon16Cancel fill="var(--icon_secondary)" />
           </div>
         }
       </div>

src/components/ChipsInput/Readme.md

@@ -1,6 +1,4 @@
-Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`.  
-
-Изменить визуальное оформление значений можно с помощью `renderChip`.  
+Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. Изменить визуальное оформление значений можно с помощью `renderChip`.  
 
 Поле ввода принимает все валидные для `<input>` значения.
 
@@ -38,9 +36,10 @@ class Example extends React.Component {
               <ChipsInput readOnly
                 value={[{value: '1', label: 'Arctic Monkeys', src: getAvatarUrl('audio_arctic_monkeys')}, {value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri')}, {value: '4', label: 'FACE', src: getAvatarUrl('audio_face')}, {value: '3', label: 'Depeche Mode', src: getAvatarUrl('audio_depeche_mode')}, {value: '5', label: 'Linkin Park', src: getAvatarUrl('audio_linkin_park')}]}
                 renderChip={({ value, label, option: { src }, ...rest }) => (
-                  <Chip value={value}
+                  <Chip
+                    value={value}
                     removable={false}
-                    before={<Avatar size={20} src={src} />}
+                    before={<Avatar size={20} src={src} role="presentation" />}
                     {...rest}
                   >
                     {label}

src/components/Gallery/Gallery.tsx

@@ -400,7 +400,7 @@ class BaseGallery extends Component<BaseGalleryProps & DOMProps & AdaptivityProp
         </Touch>
 
         {bullets &&
-        <div vkuiClass={classNames('Gallery__bullets', `Gallery__bullets--${bullets}`)}>
+        <div aria-hidden="true" vkuiClass={classNames('Gallery__bullets', `Gallery__bullets--${bullets}`)}>
           {React.Children.map(children, (_item: ReactElement, index: number) =>
             <div
               vkuiClass={classNames('Gallery__bullet', { 'Gallery__bullet--active': index === slideIndex })}

src/components/Group/Readme.md

@@ -39,14 +39,14 @@ class App extends React.Component {
         header={<Header>Последняя активность</Header>}
       >
         <SimpleCell 
-          after={<IconButton><Icon16MoreVertical /></IconButton>} 
+          after={<IconButton aria-label="Подробнее"><Icon16MoreVertical /></IconButton>} 
           description="Санкт-Петербург, Россия" 
           before={<Avatar size={32} mode="app" />}
         >
           VK · Приложение для iPhone
         </SimpleCell>
         <SimpleCell 
-          after={<IconButton><Icon16MoreVertical /></IconButton>} 
+          after={<IconButton aria-label="Подробнее"><Icon16MoreVertical /></IconButton>} 
           description="Санкт-Петербург, Россия" 
           before={<Avatar size={32} mode="app" />}
         >

src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -4,11 +4,11 @@
   user-select: auto;
   top: 0;
   height: 100%;
+  padding: 0;
   opacity: 0;
   z-index: 3;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  border: none;
+  background-color: transparent;
   transition: opacity .15s;
 }
 

src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -9,11 +9,15 @@ export interface HorizontalScrollArrowProps {
 const HorizontalScrollArrow: FC<HorizontalScrollArrowProps> = (props: HorizontalScrollArrowProps) => {
   const { onClick, direction } = props;
   return (
-    <div vkuiClass={`HorizontalScroll__arrow HorizontalScroll__arrow-${direction}`} onClick={onClick}>
-      <div vkuiClass="HorizontalScroll__arrow-icon">
+    <button
+      type="button"
+      vkuiClass={`HorizontalScroll__arrow HorizontalScroll__arrow-${direction}`}
+      onClick={onClick}
+    >
+      <span vkuiClass="HorizontalScroll__arrow-icon">
         <Icon24Chevron />
-      </div>
-    </div>
+      </span>
+    </button>
   );
 };