feat: add @role for elements

packages/core/src/block/Block.tsx

@@ -13,6 +13,8 @@ export interface BlockProps {
 
 export const Block: FC<BlockProps> = (props) => (
   <Card
+    role="section"
+    aria-label="block"
     r={10}
     tabIndex={props.tabIndex}
     s={props.hover || props.focus || props.active ? '0 10px 24px 0 rgba(0,0,0,0.08)' : '0 1px 2px 0 rgba(0,0,0,0.12)'}

packages/core/src/field/OptionField.tsx

@@ -1,13 +1,14 @@
-import React, {ReactNode, FocusEventHandler, KeyboardEventHandler} from 'react'
+import React, {FocusEventHandler, KeyboardEventHandler, ReactNode} from 'react'
 
 import styled from '../styled'
-import {Typo, Box, Flex, FlexItem, BoxProps} from '../primitive'
+import {Box, BoxProps, Flex, FlexItem, Typo} from '../primitive'
 import {Spacer} from '../spacer'
 
 export interface OptionFieldProps {
   title?: ReactNode
   hint?: ReactNode
   help?: ReactNode
+  role?: string
   tabIndex?: number
   autoFocus?: boolean
   onFocus: FocusEventHandler
@@ -33,6 +34,8 @@ export const OptionField: React.FunctionComponent<OptionFieldProps> = (props) =>
       <Input
         tabIndex={props.tabIndex}
         autoFocus={props.autoFocus}
+        role={props.role}
+        aria-label={typeof props.title === 'string' ? props.title : undefined}
         onFocus={props.onFocus}
         onBlur={props.onBlur}
         onKeyDown={props.onKeyDown}

packages/core/src/field/OptionFieldItem.tsx

@@ -1,19 +1,22 @@
-import React, {ReactNode, MouseEventHandler} from 'react'
+import React, {MouseEventHandler, ReactNode} from 'react'
 
-import {Box, Pos, Typo, Flex} from '../primitive'
+import {Box, Flex, Pos, Typo} from '../primitive'
 
 export interface OptionFieldItemProps {
+  checked?: boolean
   disabled?: boolean
   reverse?: boolean
+  role?: string
   icon: ReactNode
-  label: ReactNode
+  label: string
   description?: ReactNode
   onClick: MouseEventHandler
   onMouseEnter: MouseEventHandler
   onMouseLeave: MouseEventHandler
 }
 
 export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
+  checked,
   disabled,
   icon,
   label,
@@ -24,6 +27,9 @@ export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
   reverse,
 }) => (
   <Pos
+    role="menuitemcheckbox"
+    aria-checked={checked ? 'true' : 'false'}
+    aria-label={label}
     type="relative"
     cursor={disabled ? 'not-allowed' : 'pointer'}
     onClick={onClick}

packages/core/src/grid/Grid.tsx

@@ -23,7 +23,7 @@ export const Grid: FC<GridProps> = ({gutter = 20, columns = 12, layout = columns
   const rowBlocksCount: number = columns / layoutSum * layoutLength
 
   return (
-    <Flex wrap="wrap">
+    <Flex wrap="wrap" role="section" aria-label="grid">
       {Children.map(elements, (child: ReactNode, index: number) => (
         <FlexItem
           key={index}

packages/core/src/icon/Icon.tsx

@@ -200,7 +200,7 @@ export const Icon: FC<IconProps> = ({
   size = 6,
   color = '#000',
 }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" focusable="false">
+  <Svg width={size} height={size} viewBox="0 0 24 24" focusable="false" role="img" alt={name}>
     <Path d={IconPaths[name]} fill={color}/>
   </Svg>
 )

packages/core/src/image/Image.tsx

@@ -36,6 +36,7 @@ export const Image: FC<ImageProps> = ({
       children={(renderProps) => (
         renderProps.loaded ? (
           <Img
+            role="img"
             key={src}
             width={width}
             height={height}

packages/core/src/input/BasicInput.tsx

@@ -54,6 +54,7 @@ export const BasicInput: FunctionComponent<BasicInputProps> = (props) => {
     onBlur: props.onBlur,
     onKeyDown: props.onKeyDown,
     onKeyUp: props.onKeyUp,
+    role: 'textbox',
   }
   return (
     props.mask ? (

packages/core/src/link/LinkControl.tsx

@@ -7,6 +7,7 @@ export interface LinkControlProps {
   onFocus?: () => void
   onBlur?: () => void
   href?: string
+  title?: string
   target?: string
   download?: string | boolean
   rel?: string

packages/core/src/primitive/Svg.ts

@@ -9,6 +9,7 @@ interface SvgProps {
   transition?: string
   transform?: string
   transformOrigin?: string
+  alt?: string
 }
 
 export const SvgNonProps = ['width', 'height', 'animation', 'transition', 'transform', 'transformOrigin']

packages/desktop/src/block-accordion/BlockAccordion.tsx

@@ -27,6 +27,7 @@ const BlockAccordionIndent: {
 
 export const BlockAccordion: FunctionComponent<BlockAccordionProps<BlockAccordionItemModel>> = ({items, indent = 'm', tabIndex = 0, opened, onChange}) => (
   <AccordionControl<BlockAccordionItemModel>
+
     items={items}
     opened={opened}
     onChange={onChange}
@@ -35,6 +36,8 @@ export const BlockAccordion: FunctionComponent<BlockAccordionProps<BlockAccordio
         {renderProps.items.map((item, index) => (
           <Card
             key={index}
+            role="region"
+            aria-label={typeof item.title === 'string' ? item.title : undefined}
             s={
               item.hovered || item.focused
                 ? '0 0 16px 0 rgba(0, 0, 0, 0.12)'

packages/desktop/src/block-content/BlockContent.tsx

@@ -14,6 +14,8 @@ const BlockContentIdent: { [indent in NonNullable<BlockContentProps['indent']>]:
 
 export const BlockContent: FC<BlockContentProps> = ({indent = 'm', children}) => (
   <Box
+    role="section"
+    aria-label="content"
     p={BlockContentIdent[indent]}
     children={children}
   />

packages/desktop/src/breadcrumbs/Breadcrumbs.md

@@ -1,6 +1,7 @@
 ```jsx
 <Spacer size="xl">
   <Breadcrumbs
+    title="Хлебные крошки"
     children={[
       {href: 'https://qiwi.com/', children: 'Главная'},
       {href: 'https://qiwi.com/support/', children: 'Помощь'},

packages/desktop/src/breadcrumbs/Breadcrumbs.tsx

@@ -4,25 +4,28 @@ import {NavLink, NavLinkProps} from '../nav-link'
 import {Paragraph} from '../typography'
 
 export interface BreadcrumbsProps {
+  title?: string
   children: NavLinkProps[]
 }
 
-export const Breadcrumbs: FC<BreadcrumbsProps> = ({children}) => (
-  <Paragraph size="s" color="support">
-    {children.map((item, i) => (
-      <Fragment key={i} >
-        {i > 0 ? (
-          <Fragment>
-            <Box as="span" mx={2} display="inline">
-              &#8226;
-            </Box>
-            &shy;
-          </Fragment>
-        ) : (
-          null
-        )}
-        <NavLink {...item} />
-      </Fragment>
-    ))}
-  </Paragraph>
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({title, children}) => (
+  <Box as="nav" aria-label={title}>
+    <Paragraph size="s" color="support">
+      {children.map((item, i) => (
+        <Fragment key={i} >
+          {i > 0 ? (
+            <Fragment>
+              <Box as="span" mx={2} display="inline">
+                &#8226;
+              </Box>
+              &shy;
+            </Fragment>
+          ) : (
+            null
+          )}
+          <NavLink {...item} />
+        </Fragment>
+      ))}
+    </Paragraph>
+  </Box>
 )

packages/desktop/src/button/Button.tsx

@@ -1,4 +1,4 @@
-import React, {FunctionComponent, ReactElement, Fragment} from 'react'
+import React, {FunctionComponent, Fragment, ReactElement} from 'react'
 
 import {
   ButtonControl,
@@ -165,6 +165,8 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          aria-label={props.text}
+          aria-labelledby={props.kind}
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}

packages/desktop/src/checkbox-field/CheckboxField.tsx

@@ -17,7 +17,7 @@ import CheckboxFieldOptionModel from './CheckboxFieldOptionModel'
 
 const CheckboxField: FunctionComponent<
   CheckboxFieldProps<CheckboxFieldOptionModel<any>, any>
-> = props => (
+  > = props => (
   props.stub ? (
     <Box maxWidth={1}>
       <Stub
@@ -58,6 +58,8 @@ const CheckboxField: FunctionComponent<
       onBlur={props.onBlur}
       children={(renderProps) => (
         <OptionField
+          role="checkbox"
+          aria-label={props.title}
           title={props.title}
           hint={props.hint}
           help={props.help}

packages/desktop/src/checkbox-field/CheckboxFieldOptionModel.ts

@@ -3,6 +3,6 @@ import {ReactNode} from 'react'
 import {OptionModel} from '@qiwi/pijma-core'
 
 export default interface CheckboxFieldOptionModel<V> extends OptionModel<V> {
-  label: ReactNode
+  label: string
   description?: ReactNode
 }

packages/desktop/src/checkbox/Checkbox.tsx

@@ -23,6 +23,7 @@ const Checkbox: FunctionComponent<CheckboxProps> = props => (
         onKeyDown={renderProps.onKeyDown}
         children={(
           <OptionFieldItem
+            role="menuitemcheckbox"
             disabled={props.disabled}
             label={props.label}
             description={props.description}

packages/desktop/src/header-menu/HeaderMenu.tsx

@@ -1,20 +1,22 @@
 import React, {FC} from 'react'
 
-import {Flex, FlexItem} from '@qiwi/pijma-core'
+import {Flex, FlexItem, Box} from '@qiwi/pijma-core'
 import {HeaderMenuItem, HeaderMenuItemProps} from './HeaderMenuItem'
 
 export interface HeaderMenuProps {
   children: HeaderMenuItemProps[]
 }
 
 export const HeaderMenu: FC<HeaderMenuProps> = (props) => (
-  <Flex height={1} width={1} justify="flex-start">
-    {props.children.map((item, i) => (
-      <FlexItem key={i} ml={i > 0 ? 6 : 0}>
-        <HeaderMenuItem
-          {...item}
-        />
-      </FlexItem>
-    ))}
-  </Flex>
+  <Box as="nav" height={1} width={1}>
+    <Flex height={1} width={1} justify="flex-start" role="menubar">
+      {props.children.map((item, i) => (
+        <FlexItem key={i} ml={i > 0 ? 6 : 0}>
+          <HeaderMenuItem
+            {...item}
+          />
+        </FlexItem>
+      ))}
+    </Flex>
+  </Box>
 )

packages/desktop/src/header-menu/HeaderMenuItem.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Flex, Pos, Card} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, Pos} from '@qiwi/pijma-core'
 import {Text} from '../typography/Text'
 
 export interface HeaderMenuItemProps {
@@ -35,6 +35,8 @@ export const HeaderMenuItem: FC<HeaderMenuItemProps> = (props) => (
         cursor="pointer"
         tabIndex={props.tabIndex}
         href={props.href}
+        role="menuitem"
+        aria-label={props.title}
         target={props.target}
         download={props.download}
         rel={props.rel}

packages/desktop/src/link/BlockLink.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, RenderChild, Lnk, Card} from '@qiwi/pijma-core'
+import {Card, LinkControl, Lnk, RenderChild} from '@qiwi/pijma-core'
 
 export interface BlockLinkProps {
   onClick?: (href?: string, target?: string, download?: string | boolean, rel?: string) => void
@@ -28,11 +28,13 @@ export const BlockLink: FC<BlockLinkProps> = (props) => (
     onFocus={props.onFocus}
     onBlur={props.onBlur}
     href={props.href}
+    title={props.title}
     target={props.target}
     download={props.download}
     rel={props.rel}
     children={(renderProps) => (
       <CardLink
+        aria-label={props.title}
         display="block"
         overflow="hidden"
         bg="#fff"

packages/desktop/src/link/FileLink.tsx

@@ -1,7 +1,6 @@
 import React, {FC} from 'react'
 
 import {LinkControl, Lnk, FlexItem, Flex, Icon} from '@qiwi/pijma-core'
-
 import {Text} from '../typography'
 
 export interface FileLinkProps {

packages/desktop/src/link/Link.tsx

@@ -50,6 +50,7 @@ export const Link: FC<LinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        aria-label={props.title}
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

packages/desktop/src/list/List.tsx

@@ -41,7 +41,7 @@ const LetterSize: {[size in NonNullable<ListProps['size']>]: number} = {
 }
 
 export const List: FunctionComponent<ListProps> = ({type, size = 'm', children}) => (
-  <Box as={ListType[type]}>
+  <Box as={ListType[type]} role="list">
     {children.map((item, index) => (
       <Flex key={index} as="li" mt={index > 0 ? ItemIndent[type] : 0}>
         {type === 'number' ? (

packages/desktop/src/modal/SimpleModal.tsx

@@ -97,10 +97,12 @@ const SimpleModal: FunctionComponent<SimpleModalProps> = (props) => (
     )}
     children={(
       <Pos type="relative" display="inline-block" p={12} css={{verticalAlign: 'middle', textAlign: 'left'}}>
-        <Card s="0 20px 64px 8px rgba(0, 0, 0, 0.16)" r={10} bg="#fff" pt={11} pb={12} px={11} width={ModalWidth[props.size]}>
+        <Card role="alertdialog" s="0 20px 64px 8px rgba(0, 0, 0, 0.16)" r={10} bg="#fff" pt={11} pb={12} px={11} width={ModalWidth[props.size]}>
           <Fragment>
             {props.closable && props.onHide ? (
               <Pos
+                role="button"
+                aria-label="exit"
                 type="absolute"
                 top={16}
                 right={16}

packages/desktop/src/nav-link/NavLink.tsx

@@ -29,6 +29,7 @@ export const NavLink: FC<NavLinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        aria-label={props.title}
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

packages/desktop/src/notice/Notice.tsx

@@ -8,7 +8,7 @@ export interface NoticeProps {
 }
 
 export const Notice: FC<NoticeProps> = ({icon, title, children}) => (
-  <Flex>
+  <Flex role="alertdialog" aria-label="notice">
     <FlexItem
       shrink={0}
       basis={6}

packages/desktop/src/oops/Oops.tsx

@@ -11,7 +11,7 @@ export interface OopsProps {
 }
 
 export const Oops: FC<OopsProps> = ({logo, error, title, content, footer}) => (
-  <Card minWidth={295} width="100%" pt={22} minHeight="100%" bg="#fff">
+  <Card minWidth={295} width="100%" pt={22} minHeight="100%" bg="#fff" role="section" aria-label={title}>
     <Flex mx="auto" width={235} direction="column">
       <FlexItem
         width={60}