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,10 +1,12 @@
-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
   description?: ReactNode
@@ -14,6 +16,7 @@ export interface OptionFieldItemProps {
 }
 
 export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
+  checked,
   disabled,
   icon,
   label,
@@ -22,8 +25,12 @@ export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
   onMouseEnter,
   onMouseLeave,
   reverse,
+  role,
 }) => (
   <Pos
+    role={role}
+    aria-checked={checked ? 'true' : 'false'}
+    aria-label={typeof label === 'string' ? label : undefined}
     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">
     <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

@@ -58,6 +58,7 @@ export const BasicInput: FunctionComponent<BasicInputProps> = (props) => {
   return (
     props.mask ? (
       <MaskInput
+        role="textbox"
         {...common}
         type={props.type === undefined ? (isMaskDigital(props.mask) ? 'tel' : 'text') : (['text', 'password', 'tel'].includes(props.type) ? props.type : 'text')}
         mask={props.mask}
@@ -68,6 +69,7 @@ export const BasicInput: FunctionComponent<BasicInputProps> = (props) => {
       />
     ) : (
       <Input
+        role="textbox"
         {...common}
         type={props.type === undefined ? 'text' : props.type}
       />

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.tsx

@@ -8,21 +8,23 @@ export interface BreadcrumbsProps {
 }
 
 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>
+  <Box role="menubar" aria-label="Breadcrumbs">
+    <Paragraph size="s" color="support">
+      {children.map((item, i) => (
+        <Fragment key={i} >
+          {i > 0 ? (
+            <Fragment>
+              <Box as="span" mx={2} display="inline" role="section">
+                &#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,9 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          role="button"
+          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

@@ -7,9 +7,6 @@ import {
   OptionField,
   OptionFieldItem,
   Box,
-  Stub,
-  Spacer,
-  Flex,
 } from '@qiwi/pijma-core'
 
 import CheckboxFieldProps from './CheckboxFieldProps'
@@ -18,87 +15,56 @@ import CheckboxFieldOptionModel from './CheckboxFieldOptionModel'
 const CheckboxField: FunctionComponent<
   CheckboxFieldProps<CheckboxFieldOptionModel<any>, any>
 > = props => (
-  props.stub ? (
-    <Box maxWidth={1}>
-      <Stub
-        width={24}
-        height={3}
-        top={2}
-        bottom={4}
-      />
-      <Spacer size="s">
-        {[33, 38, 30].map((width: number, id: number) => (
-          <Flex key={id} align="center">
-            <Stub
-              width={5}
-              height={5}
-              right={3}
-              left={0.5}
-            />
-            <Box width={width} maxWidth={1}>
-              <Stub
-                width={1}
-                height={2}
-                top={2}
-                bottom={2}
+  <CheckboxControl<CheckboxFieldOptionModel<any>, any>
+    tabIndex={props.tabIndex}
+    options={props.options}
+    values={props.values}
+    equals={props.equals}
+    onChange={props.onChange}
+    onFocus={props.onFocus}
+    onBlur={props.onBlur}
+    children={(renderProps) => (
+      <OptionField
+        title={props.title}
+        hint={props.hint}
+        help={props.help}
+        tabIndex={renderProps.tabIndex}
+        autoFocus={props.autoFocus}
+        onFocus={renderProps.onFocus}
+        onBlur={renderProps.onBlur}
+        onKeyDown={renderProps.onKeyDown}
+        children={renderProps.options.map((option, index) => (
+          <OptionControl<any>
+            key={index}
+            disabled={option.disabled}
+            value={option.value}
+            onClick={option.onClick}
+            onMouseEnter={option.onMouseEnter}
+            onMouseLeave={renderProps.onMouseLeave}
+            children={(renderOptionProps) => (
+              <OptionFieldItem
+                disabled={option.disabled}
+                icon={(
+                  <Box width={6}>
+                    <Check
+                      disabled={option.disabled}
+                      checked={option.checked}
+                      focused={option.focused}
+                    />
+                  </Box>
+                )}
+                label={option.label}
+                description={option.description}
+                onClick={renderOptionProps.onClick}
+                onMouseLeave={renderOptionProps.onMouseLeave}
+                onMouseEnter={renderOptionProps.onMouseEnter}
               />
-            </Box>
-          </Flex>
+            )}
+          />
         ))}
-      </Spacer>
-    </Box>
-  ) : (
-    <CheckboxControl<CheckboxFieldOptionModel<any>, any>
-      tabIndex={props.tabIndex}
-      options={props.options}
-      values={props.values}
-      equals={props.equals}
-      onChange={props.onChange}
-      onFocus={props.onFocus}
-      onBlur={props.onBlur}
-      children={(renderProps) => (
-        <OptionField
-          title={props.title}
-          hint={props.hint}
-          help={props.help}
-          tabIndex={renderProps.tabIndex}
-          autoFocus={props.autoFocus}
-          onFocus={renderProps.onFocus}
-          onBlur={renderProps.onBlur}
-          onKeyDown={renderProps.onKeyDown}
-          children={renderProps.options.map((option, index) => (
-            <OptionControl<any>
-              key={index}
-              disabled={option.disabled}
-              value={option.value}
-              onClick={option.onClick}
-              onMouseEnter={option.onMouseEnter}
-              onMouseLeave={renderProps.onMouseLeave}
-              children={(renderOptionProps) => (
-                <OptionFieldItem
-                  disabled={option.disabled}
-                  icon={(
-                    <Box width={6}>
-                      <Check
-                        disabled={option.disabled}
-                        checked={option.checked}
-                        focused={option.focused}
-                      />
-                    </Box>
-                  )}
-                  label={option.label}
-                  description={option.description}
-                  onClick={renderOptionProps.onClick}
-                  onMouseLeave={renderOptionProps.onMouseLeave}
-                  onMouseEnter={renderOptionProps.onMouseEnter}
-                />
-              )}
-            />
-          ))}
-        />
-      )}
-    />
-  )
+      />
+    )}
+  />
 )
 
 export default CheckboxField

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

@@ -8,7 +8,7 @@ export interface HeaderMenuProps {
 }
 
 export const HeaderMenu: FC<HeaderMenuProps> = (props) => (
-  <Flex height={1} width={1} justify="flex-start">
+  <Flex height={1} width={1} justify="flex-start" role="menubar">
     {props.children.map((item, i) => (
       <FlexItem key={i} ml={i > 0 ? 6 : 0}>
         <HeaderMenuItem

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,7 @@ export const HeaderMenuItem: FC<HeaderMenuItemProps> = (props) => (
         cursor="pointer"
         tabIndex={props.tabIndex}
         href={props.href}
+        role="menuitem"
         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
@@ -33,6 +33,8 @@ export const BlockLink: FC<BlockLinkProps> = (props) => (
     rel={props.rel}
     children={(renderProps) => (
       <CardLink
+        role="link"
+        aria-label="blockLink"
         display="block"
         overflow="hidden"
         bg="#fff"