From bf73d5e5ec970e893c8681d07e97d01b8a99eb9c Mon Sep 17 00:00:00 2001
From: "k.sidorov" <k.sidorov@qiwi.com>
Date: Tue, 6 Aug 2019 12:23:26 +0300
Subject: [PATCH] [NF] @role for core elements Block, Grid, Input and rf
 Button, Popup

---
 packages/core/src/block/Block.tsx          | 2 ++
 packages/core/src/grid/Grid.tsx            | 2 +-
 packages/core/src/input/BasicInput.tsx     | 1 +
 packages/desktop/src/button/Button.tsx     | 1 +
 packages/desktop/src/modal/SimpleModal.tsx | 4 +++-
 packages/mobile/src/button/Button.tsx      | 1 +
 packages/mobile/src/modal/SimpleModal.tsx  | 4 +++-
 7 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/block/Block.tsx b/packages/core/src/block/Block.tsx
index c8c20c709..01d5487bf 100644
--- 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
index 48757d69f..d373de3e5 100644
--- 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
index e68b00d61..1c67c5e15 100644
--- 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
index a243df06b..4a1e76407 100644
--- 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
index 5dcfcd248..eb328fc1d 100644
--- 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
index 2c5257b7c..439cca871 100644
--- 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
index ba1dfdb52..b0acae6bc 100644
--- 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}