[NF] @ROLE for core elements Block, Grid, Input and rf Button, Popup

qiwi · Aug 6, 2019 · bf73d5e · dimonka83 · Aug 6, 2019 · AcesAndEights
1 parent fe03732
commit bf73d5e
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 3 deletions.
diff --git a/packages/core/src/block/Block.tsx b/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)'}

diff --git a/packages/core/src/grid/Grid.tsx b/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}

diff --git a/packages/core/src/input/BasicInput.tsx b/packages/core/src/input/BasicInput.tsx
@@ -68,6 +68,7 @@ export const BasicInput: FunctionComponent<BasicInputProps> = (props) => {
       />
     ) : (
       <Input
+        role="textbox"
         {...common}
         type={props.type === undefined ? 'text' : props.type}
       />

diff --git a/packages/desktop/src/button/Button.tsx b/packages/desktop/src/button/Button.tsx
@@ -156,6 +156,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       children={(renderProps) => (
         <Btn
           role="button"
+          aria-label={props.kind}
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}

diff --git a/packages/desktop/src/modal/SimpleModal.tsx b/packages/desktop/src/modal/SimpleModal.tsx
@@ -100,10 +100,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="dialog" aria-label="popup" 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}

diff --git a/packages/mobile/src/button/Button.tsx b/packages/mobile/src/button/Button.tsx
@@ -146,6 +146,7 @@ export const Button: FunctionComponent<ButtonProps> = (props) => (
       children={(renderProps) => (
         <Btn
           role="button"
+          aria-label={props.kind}
           disabled={props.disabled}
           type={props.type}
           width={!props.icon || props.text ? 1 : buttonSize[props.size]}

diff --git a/packages/mobile/src/modal/SimpleModal.tsx b/packages/mobile/src/modal/SimpleModal.tsx
@@ -86,10 +86,12 @@ const SimpleModal: FunctionComponent<SimpleModalProps> = (props) => (
     )}
     children={(
       <Pos type="relative" width={1} height={1}>
-        <Card bg="#fff" p={6} width={1} height={1} overflow="auto">
+        <Card role="dialog" aria-label="popup" bg="#fff" p={6} width={1} height={1} overflow="auto">
           <Fragment>
             {props.closable && props.onHide ? (
               <Pos
+                role="button"
+                aria-label="exit"
                 type="absolute"
                 top={6}
                 right={6}
-Original file line number
+Diff line change
@@ Expand Up @@
           />
         ) : (
           <Input
+            role="textbox"
             {...common}
             type={props.type === undefined ? 'text' : props.type}
           />
@@ Expand Down @@