Add eslint-plugin-grommet and address issues (#3464)

* Add back eslint-plugin-grommet * Add back eslint-plugin-grommet * Update aries-site/src/examples/templates/forms/RequiredFieldsExample.js
grommet · Jul 18, 2023 · 4fc15af · 4fc15af
1 parent 2cd916e
commit 4fc15af
Show file tree

Hide file tree

Showing 66 changed files with 378 additions and 240 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,9 +11,8 @@ module.exports = {
   extends: [
     'airbnb',
     'plugin:jsx-a11y/recommended',
+    'plugin:grommet/recommended',
     'prettier',
-    // TO DO resolve why definitions weren't found
-    // 'plugin:grommet/recommended',
   ],
   plugins: ['react', 'jsx', 'jsx-a11y', 'react-hooks', 'prettier'],
   env: {

diff --git a/aries-core/src/js/components/core/Nav/Nav.js b/aries-core/src/js/components/core/Nav/Nav.js
@@ -67,6 +67,7 @@ export const Nav = ({
                 }))
           ) : (
             <Button
+              a11yTitle={!open ? 'Open menu' : 'Close'}
               icon={!open ? <Menu /> : <Close />}
               onClick={() => setOpen(!open)}
               plain

diff --git a/aries-site/src/components/content/MarkdownComponents.js b/aries-site/src/components/content/MarkdownComponents.js
@@ -47,7 +47,14 @@ const CopyCodeButton = ({ code }) => {
     return () => clearTimeout(timer);
   };
 
-  return <Button tip={copyTip} icon={<Copy />} onClick={onCopy} />;
+  return (
+    <Button
+      a11yTitle={copyTip}
+      tip={copyTip}
+      icon={<Copy />}
+      onClick={onCopy}
+    />
+  );
 };
 
 CopyCodeButton.propTypes = {

diff --git a/aries-site/src/components/feedback/Feedback.js b/aries-site/src/components/feedback/Feedback.js
@@ -79,6 +79,7 @@ export const Feedback = ({
       <FeedbackHeader title={title}>
         {modal && (
           <Button
+            a11yTitle="Close"
             onClick={onClose}
             icon={<Close />}
             autoFocus

diff --git a/aries-site/src/components/feedback/Question.js b/aries-site/src/components/feedback/Question.js
@@ -34,6 +34,9 @@ export const Question = ({ formProps, label, inputProps, kind, name }) => {
 
   const Input = formats[kind].render;
   return (
+    // https://github.com/grommet/eslint-plugin-grommet/issues/48
+    // eslint-disable-next-line max-len
+    // eslint-disable-next-line grommet/formfield-htmlfor-id, grommet/formfield-name
     <FormField
       contentProps={{
         border: formats[kind].border ?? true,

diff --git a/aries-site/src/examples/cardPreviews/checkbox.js b/aries-site/src/examples/cardPreviews/checkbox.js
@@ -2,7 +2,19 @@ import React from 'react';
 import { CheckBox, FormField } from 'grommet';
 
 export const CheckBoxPreview = () => (
-    <FormField fill="horizontal" tabIndex={-1}>
-      <CheckBox aria-label="preview" checked label="Value" tabIndex={-1} />
-    </FormField>
-  );
+  <FormField
+    name="checkbox-preview"
+    htmlFor="checkbox-preview"
+    fill="horizontal"
+    tabIndex={-1}
+  >
+    <CheckBox
+      name="checkbox-preview"
+      id="checkbox-preview"
+      aria-label="preview"
+      checked
+      label="Value"
+      tabIndex={-1}
+    />
+  </FormField>
+);
diff --git a/aries-site/src/examples/cardPreviews/checkboxgroup.js b/aries-site/src/examples/cardPreviews/checkboxgroup.js
@@ -2,24 +2,24 @@ import React from 'react';
 import { CheckBoxGroup, Form, FormField } from 'grommet';
 
 export const CheckBoxGroupPreview = () => (
-    <Form>
-      <FormField
+  <Form>
+    <FormField
+      name="checkboxgroup-preview"
+      fill="horizontal"
+      htmlFor="preview-checkboxgroup"
+      label="Label"
+      tabIndex={-1}
+    >
+      <CheckBoxGroup
+        options={[
+          { label: 'Option 1', tabIndex: -1 },
+          { label: 'Option 2', tabIndex: -1 },
+          { label: 'Option 3', tabIndex: -1 },
+        ]}
+        value={['Option 2']}
         name="checkboxgroup-preview"
-        fill="horizontal"
-        htmlFor="preview-checkboxgroup"
-        label="Label"
-        tabIndex={-1}
-      >
-        <CheckBoxGroup
-          options={[
-            { label: 'Option 1', tabIndex: -1 },
-            { label: 'Option 2', tabIndex: -1 },
-            { label: 'Option 3', tabIndex: -1 },
-          ]}
-          value={['Option 2']}
-          name="checkboxgroup-preview"
-          id="simple-checkboxgroup"
-        />
-      </FormField>
-    </Form>
-  );
+        id="preview-checkboxgroup"
+      />
+    </FormField>
+  </Form>
+);
diff --git a/aries-site/src/examples/cardPreviews/data-how-to.js b/aries-site/src/examples/cardPreviews/data-how-to.js
@@ -5,6 +5,6 @@ import { Filter, Search } from 'grommet-icons';
 export const DataHowTo = () => (
   <Box direction="row" align="center" gap="small">
     <TextInput icon={<Search />} placeholder="Search" tabIndex={-1} />
-    <Button icon={<Filter />} kind="toolbar" tabIndex={-1} />
+    <Button a11yTitle="Filter" icon={<Filter />} kind="toolbar" tabIndex={-1} />
   </Box>
 );
diff --git a/aries-site/src/examples/cardPreviews/header.js b/aries-site/src/examples/cardPreviews/header.js
@@ -3,20 +3,21 @@ import { Box, Header, Button, Text } from 'grommet';
 import { Hpe, Menu } from 'grommet-icons';
 
 export const HeaderPreview = () => (
-    <Header
-      border={{ color: 'background-contrast', side: 'bottom' }}
-      background="background-front"
-      fill="horizontal"
-    >
-      <Box direction="row">
-        <Button icon={<Hpe color="brand" />} tabIndex={-1} />
-        <Box align="center" gap="xsmall" direction="row">
-          <Text color="text-strong" weight="bold">
-            HPE
-          </Text>
-          <Text color="text-strong">Text</Text>
-        </Box>
+  <Header
+    border={{ color: 'background-contrast', side: 'bottom' }}
+    pad={{ horizontal: 'xsmall' }}
+    background="background-front"
+    fill="horizontal"
+  >
+    <Box direction="row" gap="small">
+      <Hpe color="brand" height="medium" />
+      <Box align="center" gap="xsmall" direction="row">
+        <Text color="text-strong" weight="bold">
+          HPE
+        </Text>
+        <Text color="text-strong">Text</Text>
       </Box>
-      <Button icon={<Menu />} tabIndex={-1} />
-    </Header>
-  );
+    </Box>
+    <Button a11yTitle="Menu" icon={<Menu />} tabIndex={-1} />
+  </Header>
+);
diff --git a/aries-site/src/examples/components/anchor/AnchorBadExample.js b/aries-site/src/examples/components/anchor/AnchorBadExample.js
@@ -4,6 +4,8 @@ import { Anchor, Paragraph } from 'grommet';
 export const AnchorBadExample = () => (
   <Paragraph>
     If you haven't yet,{' '}
+    {/* Ignore rule because this is demonstrating a bad practice. */}
+    {/* eslint-disable-next-line grommet/anchor-label */}
     <Anchor
       label="click here"
       href="https://design-system.hpe.design/foundation/philosophy"

diff --git a/aries-site/src/examples/components/button/ButtonBusyExample.js b/aries-site/src/examples/components/button/ButtonBusyExample.js
@@ -57,8 +57,16 @@ export const ButtonBusyExample = ({ containerRef }) => {
               <FormField label="Name" name="Name" htmlFor="name" required>
                 <TextInput value="Cluster 1" name="Name" id="name" />
               </FormField>
-              <FormField label="Cluster resource manager">
-                <CheckBox label="Use manager" />
+              <FormField
+                label="Cluster resource manager"
+                name="resource-manager"
+                htmlFor="resource-manager"
+              >
+                <CheckBox
+                  label="Use manager"
+                  name="resource-manager"
+                  id="resource-manager"
+                />
               </FormField>
               <ButtonGroup pad={{ top: 'medium' }}>
                 <Button

diff --git a/aries-site/src/examples/components/button/ButtonIconExample.js b/aries-site/src/examples/components/button/ButtonIconExample.js
@@ -17,7 +17,7 @@ export const ButtonIconExample = () => {
       >
         <Button label="Button" icon={<Previous />} onClick={() => {}} />
         <Button label="Button" icon={<Next />} reverse onClick={() => {}} />
-        <Button icon={<Next />} onClick={() => {}} />
+        <Button a11yTitle="Next" icon={<Next />} onClick={() => {}} />
       </Box>
       <Box
         direction={!['xsmall', 'small'].includes(size) ? 'row' : 'column'}
@@ -32,7 +32,7 @@ export const ButtonIconExample = () => {
           reverse
           onClick={() => {}}
         />
-        <Button icon={<Next />} primary onClick={() => {}} />
+        <Button a11yTitle="Next" icon={<Next />} primary onClick={() => {}} />
       </Box>
     </Box>
   );

diff --git a/aries-site/src/examples/components/button/DosDonts/ButtonBadSignUpCTAPreview.js b/aries-site/src/examples/components/button/DosDonts/ButtonBadSignUpCTAPreview.js
@@ -84,7 +84,7 @@ export const ButtonBadSignUpCTAsPreview = () => {
               value="password"
             />
           </FormField>
-          <FormField htmlFor="terms-and-privacy-simple">
+          <FormField htmlFor="terms-and-privacy-simple" name="termsAndPrivacy">
             <CheckBox
               id="terms-and-privacy-simple"
               name="termsAndPrivacy"

diff --git a/aries-site/src/examples/components/button/DosDonts/ButtonGoodSignUpCTAPreview.js b/aries-site/src/examples/components/button/DosDonts/ButtonGoodSignUpCTAPreview.js
@@ -84,7 +84,7 @@ export const ButtonGoodSignUpCTAPreview = () => {
               value="password"
             />
           </FormField>
-          <FormField htmlFor="terms-and-privacy-good">
+          <FormField htmlFor="terms-and-privacy-good" name="termsAndPrivacy">
             <CheckBox
               id="terms-and-privacy-good"
               name="termsAndPrivacy"

diff --git a/aries-site/src/examples/components/card/CallToActionAnatomy.js b/aries-site/src/examples/components/card/CallToActionAnatomy.js
@@ -79,7 +79,7 @@ const DashedBox = ({ ...rest }) => (
 const CardExample = ({ ...rest }) => (
   <Card width="medium" onClick={() => {}} {...rest}>
     <Box id="cta-image" height="small">
-      <Image {...event.image} />
+      <Image alt={event.image.alt} {...event.image} />
     </Box>
     <CardBody align="start" gap="medium">
       <Box gap="xsmall">

diff --git a/aries-site/src/examples/components/card/CardFilteringBestPractice.js b/aries-site/src/examples/components/card/CardFilteringBestPractice.js
@@ -61,7 +61,13 @@ const FilterBar = ({ bestPractice }) => {
   const content = (
     <Box direction="row" gap="small">
       {statuses.map((status, index) => (
-        <Box round="xsmall" overflow="hidden" key={index} hoverIndicator>
+        <Box
+          round="xsmall"
+          overflow="hidden"
+          key={index}
+          onClick={() => {}}
+          hoverIndicator
+        >
           <Button hoverIndicator>
             <Box
               align="center"

diff --git a/aries-site/src/examples/components/checkbox/CheckBoxValidationExample.js b/aries-site/src/examples/components/checkbox/CheckBoxValidationExample.js
@@ -19,7 +19,7 @@ export const CheckBoxValidationExample = () => {
             required
           >
             <CheckBox
-              name="checkbox"
+              name="required-field"
               id="required-field"
               onChange={event => {
                 // Demonstrating error message state

diff --git a/aries-site/src/examples/components/checkboxgroup/CheckBoxGroupScrollExample.js b/aries-site/src/examples/components/checkboxgroup/CheckBoxGroupScrollExample.js
@@ -3,6 +3,9 @@ import { Box, CheckBoxGroup, Form, FormField } from 'grommet';
 
 export const CheckBoxGroupScrollExample = () => (
   <Form>
+    {/* https://github.com/grommet/eslint-plugin-grommet/issues/47 */}
+    {/* eslint-disable-next-line grommet/formfield-htmlfor-id, 
+    grommet/formfield-name */}
     <FormField name="scroll-checkbox" label="Label" htmlFor="scroll-checkbox">
       <Box width="medium" overflow="auto" height="small">
         <CheckBoxGroup

diff --git a/aries-site/src/examples/components/checkboxgroup/CheckBoxGroupValidationExample.js b/aries-site/src/examples/components/checkboxgroup/CheckBoxGroupValidationExample.js
@@ -17,7 +17,7 @@ export const CheckBoxGroupValidationExample = () => {
           required
         >
           <CheckBoxGroup
-            name="checkbox"
+            name="required-field"
             id="required-field"
             onChange={event => {
               // Demonstrating error message behavior

diff --git a/aries-site/src/examples/components/dropbutton/DropButtonExample.js b/aries-site/src/examples/components/dropbutton/DropButtonExample.js
@@ -31,7 +31,7 @@ const DropContent = ({ onClose }) => (
       <Heading level={3} margin="none">
         Heading
       </Heading>
-      <Button icon={<Close />} onClick={onClose} />
+      <Button a11yTitle="Close" icon={<Close />} onClick={onClose} />
     </Box>
     <Paragraph margin="none">Here is some additional content.</Paragraph>
   </Box>

diff --git a/aries-site/src/examples/components/header/HeaderExample.js b/aries-site/src/examples/components/header/HeaderExample.js
@@ -57,6 +57,7 @@ export const HeaderExample = () => {
       <>
         {!focused && ['xsmall', 'small'].includes(size) && (
           <Button
+            a11yTitle="Search"
             icon={<SearchIcon />}
             hoverIndicator
             onClick={() => setFocused(true)}

diff --git a/aries-site/src/examples/components/header/HeaderSearchActionsExample.js b/aries-site/src/examples/components/header/HeaderSearchActionsExample.js
@@ -34,6 +34,7 @@ const Search = () => {
 
   return !focused && ['xsmall', 'small'].includes(size) ? (
     <Button
+      a11yTitle="Search"
       icon={<SearchIcon />}
       hoverIndicator
       onClick={() => setFocused(true)}
@@ -78,9 +79,9 @@ export const HeaderSearchActionsExample = () => (
     </Button>
     <Search />
     <Box direction="row">
-      <Button icon={<Notification />} />
-      <Button icon={<Chat />} />
-      <Button icon={<User />} />
+      <Button a11yTitle="Notifications" icon={<Notification />} />
+      <Button a11yTitle="Support chat" icon={<Chat />} />
+      <Button a11yTitle="Account" icon={<User />} />
     </Box>
   </Header>
 );
diff --git a/aries-site/src/examples/components/layer/ConfigurationForm.js b/aries-site/src/examples/components/layer/ConfigurationForm.js
@@ -123,13 +123,13 @@ export const LayerForm = ({ ...rest }) => {
       <FormField
         label="Pricing"
         contentProps={{ width: 'medium' }}
-        name="pricing-select"
-        htmlFor="pricing-select__input"
+        name="pricing"
+        htmlFor="pricing"
         required
       >
         <CheckBoxGroup
-          id="pricing-select"
-          name="pricing-select"
+          id="pricing"
+          name="pricing"
           options={[
             'Annual license',
             'Free',
@@ -141,13 +141,13 @@ export const LayerForm = ({ ...rest }) => {
       <FormField
         label="Delivery"
         contentProps={{ width: 'medium' }}
-        name="delivery-select"
-        htmlFor="delivery-select__input"
+        name="delivery"
+        htmlFor="delivery"
         required
       >
         <CheckBoxGroup
-          id="delivery-select"
-          name="delivery-select"
+          id="delivery"
+          name="delivery"
           options={['License key', 'Package manager', 'Web application']}
         />
       </FormField>

diff --git a/aries-site/src/examples/components/layer/FullscreenLayerAnatomy.js b/aries-site/src/examples/components/layer/FullscreenLayerAnatomy.js
@@ -83,7 +83,7 @@ const LayerContent = ({ closeId, informational, ...rest }) => (
       <Box round pad="xsmall" background="green" />
     </Box>
     <Page background="background-front" id="layer-container">
-      <Button alignSelf="end" icon={<Close />} id={closeId} />
+      <Button alignSelf="end" a11yTitle="Close" icon={<Close />} id={closeId} />
       <PageContent
         gap="medium"
         pad={{ horizontal: 'medium', bottom: 'medium' }}

diff --git a/aries-site/src/examples/components/layer/LayerCenterExample.js b/aries-site/src/examples/components/layer/LayerCenterExample.js
@@ -39,7 +39,7 @@ export const LayerCenterExample = () => {
                 </Heading>
               </Box>
               <Box justify="center">
-                <Button icon={<Close />} onClick={onClose} />
+                <Button a11yTitle="Close" icon={<Close />} onClick={onClose} />
               </Box>
             </Box>
             <Text>A subtitle if needed</Text>

diff --git a/aries-site/src/examples/components/layer/LayerSideDrawerExample.js b/aries-site/src/examples/components/layer/LayerSideDrawerExample.js
@@ -54,6 +54,8 @@ const LayerForm = ({ setOpen }) => {
             resize="vertical"
           />
         </FormField>
+        {/* https://github.com/grommet/eslint-plugin-grommet/issues/46 */}
+        {/* eslint-disable-next-line grommet/formfield-htmlfor-id */}
         <FormField label="Select" htmlFor="select-one__input" name="selectOne">
           <Select
             id="select-one"
@@ -62,6 +64,8 @@ const LayerForm = ({ setOpen }) => {
             placeholder="Select item"
           />
         </FormField>
+        {/* TO DO - enhance formfield-htmlfor-id to support Select */}
+        {/* eslint-disable-next-line grommet/formfield-htmlfor-id */}
         <FormField label="Select" htmlFor="select-two__input" name="selectTwo">
           <Select
             id="select-two"
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,7 @@ export const Nav = ({ @@
                     }))
               ) : (
                 <Button
+                  a11yTitle={!open ? 'Open menu' : 'Close'}
                   icon={!open ? <Menu /> : <Close />}
                   onClick={() => setOpen(!open)}
                   plain
@@ Expand Down @@