[NF] Добавил @ROLE к элементам p.1

qiwi · Jul 31, 2019 · 1046aa5 · 1046aa5
1 parent e1a3826
commit 1046aa5
Show file tree

Hide file tree

Showing 24 changed files with 60 additions and 63 deletions.
diff --git a/packages/core/src/field/OptionField.tsx b/packages/core/src/field/OptionField.tsx
@@ -1,7 +1,7 @@
-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 {
@@ -33,6 +33,8 @@ export const OptionField: React.FunctionComponent<OptionFieldProps> = (props) =>
       <Input
         tabIndex={props.tabIndex}
         autoFocus={props.autoFocus}
+        role="checkbox"
+        aria-label={typeof props.title === 'string' ? props.title : undefined}
         onFocus={props.onFocus}
         onBlur={props.onBlur}
         onKeyDown={props.onKeyDown}

diff --git a/packages/core/src/field/OptionFieldItem.tsx b/packages/core/src/field/OptionFieldItem.tsx
@@ -1,8 +1,9 @@
-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
   icon: ReactNode
@@ -14,6 +15,7 @@ export interface OptionFieldItemProps {
 }
 
 export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
+  checked,
   disabled,
   icon,
   label,
@@ -24,6 +26,9 @@ export const OptionFieldItem: React.FunctionComponent<OptionFieldItemProps> = ({
   reverse,
 }) => (
   <Pos
+    role="menuitemcheckbox"
+    aria-checked={checked ? 'true' : 'false'}
+    aria-label={typeof label === 'string' ? label : undefined}
     type="relative"
     cursor={disabled ? 'not-allowed' : 'pointer'}
     onClick={onClick}

diff --git a/packages/desktop/src/button/Button.tsx b/packages/desktop/src/button/Button.tsx
@@ -1,16 +1,6 @@
-import React, {FunctionComponent, ReactNode, Fragment} from 'react'
+import React, {Fragment, FunctionComponent, ReactNode} from 'react'
 
-import {
-  ButtonControl,
-  Spinner,
-  Card,
-  Pos,
-  Flex,
-  FlexItem,
-  Typo,
-  Btn,
-  Stub,
-} from '@qiwi/pijma-core'
+import {Btn, ButtonControl, Card, Flex, FlexItem, Pos, Spinner, Stub, Typo} from '@qiwi/pijma-core'
 
 export interface ButtonProps {
   onClick?: () => void
@@ -165,6 +155,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          role="button"
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}

diff --git a/packages/desktop/src/checkbox-field/CheckboxField.tsx b/packages/desktop/src/checkbox-field/CheckboxField.tsx
@@ -1,13 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {
-  CheckboxControl,
-  OptionControl,
-  Check,
-  OptionField,
-  OptionFieldItem,
-  Box,
-} from '@qiwi/pijma-core'
+import {Box, Check, CheckboxControl, OptionControl, OptionField, OptionFieldItem} from '@qiwi/pijma-core'
 
 import CheckboxFieldProps from './CheckboxFieldProps'
 import CheckboxFieldOptionModel from './CheckboxFieldOptionModel'
@@ -43,6 +36,7 @@ const CheckboxField: FunctionComponent<
             onMouseLeave={renderProps.onMouseLeave}
             children={(renderOptionProps) => (
               <OptionFieldItem
+                checked={option.checked}
                 disabled={option.disabled}
                 icon={(
                   <Box width={6}>

diff --git a/packages/desktop/src/header-menu/HeaderMenu.tsx b/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

diff --git a/packages/desktop/src/header-menu/HeaderMenuItem.tsx b/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}

diff --git a/packages/desktop/src/link/BlockLink.tsx b/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"

diff --git a/packages/desktop/src/link/FileLink.tsx b/packages/desktop/src/link/FileLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, FlexItem, Flex, IconWrapper} from '@qiwi/pijma-core'
+import {Flex, FlexItem, IconWrapper, LinkControl, Lnk} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 
@@ -36,6 +36,8 @@ export const FileLink: FC<FileLinkProps> = (props) => (
       <FlexLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="file"
         target={props.target}
         download={props.download}
         rel={props.rel}

diff --git a/packages/desktop/src/link/Link.tsx b/packages/desktop/src/link/Link.tsx
@@ -49,6 +49,7 @@ export const Link: FC<LinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

diff --git a/packages/desktop/src/list/List.tsx b/packages/desktop/src/list/List.tsx
@@ -28,9 +28,9 @@ const ItemIndent: {[type in NonNullable<ListProps['type']>]: number} = {
 }
 
 export const List: FunctionComponent<ListProps> = props => (
-  <Box as={ListType[props.type]}>
+  <Box as={ListType[props.type]} role="list">
     {props.children.map((item, index) => (
-      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0}>
+      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0} role="listitem">
         {props.type === 'number' ? (
           <FlexItem width={String(props.children.length).length * 2 + 3} shrink={0}>
             <Text size="m" bold={false}>{index + 1}.</Text>

diff --git a/packages/desktop/src/nav-link/NavLink.tsx b/packages/desktop/src/nav-link/NavLink.tsx
@@ -29,6 +29,8 @@ export const NavLink: FC<NavLinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="navigation"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

diff --git a/packages/desktop/src/notice/Notice.tsx b/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}

diff --git a/packages/desktop/src/pagination/Pagination.tsx b/packages/desktop/src/pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {PaginationControl, Card, IconWrapper, Box} from '@qiwi/pijma-core'
+import {Box, Card, IconWrapper, PaginationControl} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 import {PaginationLink} from './PaginationLink'
@@ -30,6 +30,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     onChange={onChange}
     children={renderProps => (
       <Card
+        role="toolbar"
+        aria-label="pagination"
         bg="#fff"
         s={shadowed ? '0 1px 2px 0 rgba(0,0,0,0.12)' : '0 0 0 1px #e6e6e6'}
         height={12}

diff --git a/packages/desktop/src/pagination/PaginationLink.tsx b/packages/desktop/src/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Card, Value, RenderChild, Flex} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, RenderChild, Value} from '@qiwi/pijma-core'
 
 export interface PaginationLinkProps {
   page: number
@@ -24,6 +24,8 @@ export const PaginationLink: FC<PaginationLinkProps> = props => (
     onClick={props.onClick}
     children={renderProps => (
       <CardLink
+        role="link"
+        aria-label="pagination"
         transition="all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
         height={12}
         width={props.width}

diff --git a/packages/desktop/src/text-field/TextField.tsx b/packages/desktop/src/text-field/TextField.tsx
@@ -1,21 +1,12 @@
 import React, {FunctionComponent} from 'react'
 
-import {
-  TextFieldControl,
-  InputField,
-  BasicInput,
-  Stub,
-  Box,
-  Card,
-  Flex,
-  FlexItem,
-} from '@qiwi/pijma-core'
+import {BasicInput, Box, Card, Flex, FlexItem, InputField, Stub, TextFieldControl} from '@qiwi/pijma-core'
 
 import TextFieldProps from './TextFieldProps'
 
 const TextField: FunctionComponent<TextFieldProps> = (props) => (
   props.stub ? (
-    <Box>
+    <Box role="textbox">
       {props.title ? (
         <Stub width={15} height={2} top={1} bottom={1}/>
       ) : (

diff --git a/packages/mobile/src/button/Button.tsx b/packages/mobile/src/button/Button.tsx
@@ -1,16 +1,6 @@
-import React, {FunctionComponent, ReactNode, Fragment} from 'react'
+import React, {Fragment, FunctionComponent, ReactNode} from 'react'
 
-import {
-  ButtonControl,
-  Spinner,
-  Card,
-  Pos,
-  Flex,
-  FlexItem,
-  Typo,
-  Btn,
-  Stub,
-} from '@qiwi/pijma-core'
+import {Btn, ButtonControl, Card, Flex, FlexItem, Pos, Spinner, Stub, Typo} from '@qiwi/pijma-core'
 
 export interface ButtonProps {
   onClick?: () => void
@@ -155,6 +145,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       onBlur={props.onBlur}
       children={(renderProps) => (
         <Btn
+          role="button"
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}

diff --git a/packages/mobile/src/link/BlockLink.tsx b/packages/mobile/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"

diff --git a/packages/mobile/src/link/FileLink.tsx b/packages/mobile/src/link/FileLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, FlexItem, Flex, IconWrapper} from '@qiwi/pijma-core'
+import {Flex, FlexItem, IconWrapper, LinkControl, Lnk} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 
@@ -36,6 +36,8 @@ export const FileLink: FC<FileLinkProps> = (props) => (
       <FlexLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="file"
         target={props.target}
         download={props.download}
         rel={props.rel}

diff --git a/packages/mobile/src/link/Link.tsx b/packages/mobile/src/link/Link.tsx
@@ -49,6 +49,7 @@ export const Link: FC<LinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

diff --git a/packages/mobile/src/list/List.tsx b/packages/mobile/src/list/List.tsx
@@ -28,9 +28,9 @@ const ItemIndent: {[type in NonNullable<ListProps['type']>]: number} = {
 }
 
 export const List: FunctionComponent<ListProps> = props => (
-  <Box as={ListType[props.type]}>
+  <Box as={ListType[props.type]} role="list">
     {props.children.map((item, index) => (
-      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0}>
+      <Flex key={index} as="li" mt={index > 0 ? ItemIndent[props.type] : 0} role="listitem">
         {props.type === 'number' ? (
           <FlexItem width={String(props.children.length).length * 2 + 3} shrink={0}>
             <Text size="m" bold={false}>{index + 1}.</Text>

diff --git a/packages/mobile/src/nav-link/NavLink.tsx b/packages/mobile/src/nav-link/NavLink.tsx
@@ -28,6 +28,8 @@ export const NavLink: FC<NavLinkProps> = (props) => (
       <TypoLink
         tabIndex={props.tabIndex}
         href={props.href}
+        role="link"
+        aria-label="navigation"
         onClick={renderProps.onClick}
         onFocus={renderProps.onFocus}
         onBlur={renderProps.onBlur}

diff --git a/packages/mobile/src/notice/Notice.tsx b/packages/mobile/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}

diff --git a/packages/mobile/src/pagination/Pagination.tsx b/packages/mobile/src/pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
 
-import {PaginationControl, Card, IconWrapper, Box} from '@qiwi/pijma-core'
+import {Box, Card, IconWrapper, PaginationControl} from '@qiwi/pijma-core'
 import {Icon} from '@qiwi/pijma-media'
 import {Text} from '../typography'
 import {PaginationLink} from './PaginationLink'
@@ -30,6 +30,8 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     onChange={onChange}
     children={renderProps => (
       <Card
+        role="toolbar"
+        aria-label="pagination"
         bg="#fff"
         s={shadowed ? '0 1px 2px 0 rgba(0,0,0,0.12)' : '0 0 0 1px #e6e6e6'}
         height={12}

diff --git a/packages/mobile/src/pagination/PaginationLink.tsx b/packages/mobile/src/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React, {FC} from 'react'
 
-import {LinkControl, Lnk, Card, Value, RenderChild, Flex} from '@qiwi/pijma-core'
+import {Card, Flex, LinkControl, Lnk, RenderChild, Value} from '@qiwi/pijma-core'
 
 export interface PaginationLinkProps {
   page: number
@@ -23,6 +23,8 @@ export const PaginationLink: FC<PaginationLinkProps> = props => (
     onClick={props.onClick}
     children={renderProps => (
       <CardLink
+        role="link"
+        aria-label="pagination"
         transition="all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
         height={12}
         width={props.width}