eslint-plugin-smarthr 0.2.20 → 0.2.22

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.22](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.21...v0.2.22) (2023-01-27)
+
+
+### Features
+
+* a11y-anchor-has-href-attribute を追加 ([#57](https://github.com/kufu/eslint-plugin-smarthr/issues/57)) ([83856b1](https://github.com/kufu/eslint-plugin-smarthr/commit/83856b18907772828b69de70c30315b3ff4986c1))
+
+### [0.2.21](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.20...v0.2.21) (2023-01-19)
+
+
+### Features
+
+* a11y系ruleのコンポーネント名チェックが漏れているパターンが存在したため調整 ([#56](https://github.com/kufu/eslint-plugin-smarthr/issues/56)) ([e628426](https://github.com/kufu/eslint-plugin-smarthr/commit/e628426596e97548580780632046c2154583af3e))
+
 ### [0.2.20](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.19...v0.2.20) (2023-01-18)
 
 

package/README.md

@@ -1,5 +1,6 @@
 # eslint-plugin-smarthr
 
+- [a11y-anchor-has-href-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-anchor-has-href-attribute)
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)

package/libs/format_styled_components.js

@@ -1,68 +1,71 @@
-const getExtendedComponentName = (node) => {
-  if (!node.parent) {
-    return null
-  }
+const STYLED_COMPONENTS_METHOD = 'styled'
+const STYLED_COMPONENTS = `${STYLED_COMPONENTS_METHOD}-components`
 
-  return node.parent.id?.name || getExtendedComponentName(node.parent)
-}
-const getBaseComponentName = (node) => {
-  if (!node) {
-    return null
-  }
+const findInvalidImportNameNode = (s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== STYLED_COMPONENTS_METHOD
 
-  if (node.type === 'CallExpression') {
-    if (node.callee.name === 'styled') {
-      return node.arguments[0].name
-    }
-    if (node.callee.object?.name === 'styled') {
-      return node.callee.property.name
-    }
-  }
+const generateTagFormatter = ({ context, EXPECTED_NAMES }) => {
+  const entriesesTagNames = Object.entries(EXPECTED_NAMES).map(([b, e]) => [ new RegExp(b), new RegExp(e) ])
 
-  if (node?.object?.name === 'styled') {
-    return node.property.name
-  }
+  return {
+    ImportDeclaration: (node) => {
+      if (node.source.value !== STYLED_COMPONENTS) {
+        return
+      }
 
-  return getBaseComponentName(node.parent)
-}
+      const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
 
-const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
-  ImportDeclaration: (node) => {
-    if (node.source.value !== 'styled-components') {
-      return
-    }
+      if (invalidNameNode) {
+        context.report({
+          node: invalidNameNode,
+          message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"`,
+        });
+      }
+    },
+    VariableDeclarator: (node) => {
+      if (!node.init) {
+        return
+      }
 
-    const invalidNameNode = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== 'styled')
+      const tag = node.init.tag || node.init
 
-    if (invalidNameNode) {
-      context.report({
-        node: invalidNameNode,
-        message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`",
-      });
-    }
-  },
-  TaggedTemplateExpression: (node) => {
-    const extended = getExtendedComponentName(node)
+      let base = null
 
-    if (extended) {
-      const base = getBaseComponentName(node.tag)
+      if (tag.object?.name === STYLED_COMPONENTS_METHOD) {
+        base = tag.property.name
+      } else if (tag.callee) {
+        const callee = tag.callee
+
+        switch (STYLED_COMPONENTS_METHOD) {
+          case callee.name: {
+            const arg = tag.arguments[0]
+            base = arg.name || arg.value
+            break
+          }
+          case callee.callee?.name: {
+            const arg = callee.arguments[0]
+            base = arg.name || arg.value
+            break
+          }
+          case callee.object?.name:
+            base = callee.property.name
+            break
+        }
+      }
 
       if (base) {
-        Object.entries(EXPECTED_NAMES).forEach(([b, e]) => {
-          if (base.match(new RegExp(b))) {
-            const extendedregex = new RegExp(e)
+        const extended = node.id.name
 
-            if (!extended.match(extendedregex)) {
-              context.report({
-                node: node.parent,
-                message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
-              });
-            }
+        entriesesTagNames.forEach(([b, e]) => {
+          if (base.match(b) && !extended.match(e)) {
+            context.report({
+              node,
+              message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
+            });
           }
         })
       }
-    }
-  },
-})
+    },
+  }
+}
 
 module.exports = { generateTagFormatter }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -0,0 +1,35 @@
+# smarthr/a11y-anchor-has-href-attribute
+
+- a, Anchor, Link コンポーネントに href 属性を設定することを促すルールです
+  - href が設定されていないanchor要素は `遷移先が存在しない無効化されたリンク` という扱いになります
+  - URLの変更を行わない場合、責務としても a より button が適切です
+  - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
+    - これらの操作は href属性を参照します
+  - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-anchor-has-href-attribute': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<a>any</a>
+<XxxAnchor>any</XxxAnchor>
+<XxxLink>any</XxxLink>
+<XxxLink href>any</XxxLink>
+```
+
+## ✅ Correct
+
+```jsx
+<a href="https://www.google.com/search">any</a>
+<XxxAnchor href={hoge}>any</XxxAnchor>
+<XxxLink href={undefined}>any</XxxLink>
+```

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -0,0 +1,40 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  'Anchor$': 'Anchor$',
+  'Link$': 'Link$',
+  '^a$': '(Anchor|Link)$',
+}
+
+const REGEX_TARGET = /(Anchor|Link|^a)$/
+const findHref = (a) => a.name?.name == 'href'
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name || ''
+
+        if (nodeName.match(REGEX_TARGET)) {
+          const href = node.attributes.find(findHref)
+
+          if (!href || !href.value) {
+            context.report({
+              node,
+              message: `${nodeName} に href 属性を設定してください。
+ - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
+ - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
+ - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

package/test/a11y-anchor-has-href-attribute.js

@@ -0,0 +1,56 @@
+const rule = require('../rules/a11y-anchor-has-href-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (name) => `${name} に href 属性を設定してください。
+ - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
+ - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
+ - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`
+
+ruleTester.run('a11y-anchor-has-href-attribute', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeAnchor = styled.a``' },
+    { code: 'const HogeLink = styled.a``' },
+    { code: 'const HogeAnchor = styled(Anchor)``' },
+    { code: 'const HogeLink = styled(Link)``' },
+    {
+      code: `<a href="hoge">ほげ</a>`,
+    },
+    {
+      code: `<a href={hoge}>ほげ</a>`,
+    },
+    {
+      code: `<a href={undefined}>ほげ</a>`,
+    },
+    {
+      code: `<HogeAnchor href={hoge}>ほげ</HogeAnchor>`,
+    },
+    {
+      code: `<Link href="hoge">ほげ</Link>`,
+    },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
+    { code: `<a></a>`, errors: [{ message: generateErrorText('a') }] },
+    { code: `<a>hoge</a>`, errors: [{ message: generateErrorText('a') }] },
+    { code: `<Anchor>hoge</Anchor>`, errors: [{ message: generateErrorText('Anchor') }] },
+    { code: `<HogeLink>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+  ]
+})

package/test/a11y-clickable-element-has-text.js

@@ -27,6 +27,9 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const HogeButton = styled(Button)``' },
     { code: 'const FugaAnchor = styled(HogeAnchor)``' },
     { code: 'const FugaSmartHRLogo = styled(SmartHRLogo)``' },
+    { code: 'const HogeAnchor = styled.a(() => ``)' },
+    { code: 'const HogeAnchor = styled("a")(() => ``)' },
+    { code: 'const HogeAnchor = styled(Anchor)(() => ``)' },
     {
       code: `<a>ほげ</a>`,
     },
@@ -110,7 +113,7 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
@@ -119,6 +122,10 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Fuga = styled(HogeAnchor)``', errors: [ { message: `Fugaを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Fuga = styled(SmartHRLogo)``', errors: [ { message: `Fugaを正規表現 "/SmartHRLogo$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Piyo = styled.a(() => ``)', errors: [ { message: `Piyoを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Piyo = styled("a")(() => ``)', errors: [ { message: `Piyoを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Piyo = styled("a")``', errors: [ { message: `Piyoを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Piyo = styled(Anchor)(() => ``)', errors: [ { message: `Piyoを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
     {
       code: `<a><img src="hoge.jpg" /></a>`,
       errors: [{ message: defaultErrorMessage }]

package/test/a11y-image-has-alt-attribute.js

@@ -33,7 +33,7 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: '<svg><image /></svg>' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.img``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.svg``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },

package/test/a11y-input-has-name-attribute.js

@@ -33,7 +33,7 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: '<Select name="hoge[0][Fuga]" />' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },

package/test/a11y-prohhibit-input-placeholder.js

@@ -43,14 +43,14 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<ComboBox placeholder="hoge" dropdownHelpMessage="fuga" />` },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(StyledTextarea)``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(FieldSet)``', errors: [ { message: `Hogeを正規表現 "/FieldSet$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(ComboBox)``', errors: [ { message: `Hogeを正規表現 "/ComboBox$/" がmatchする名称に変更してください` } ] },
-    { 
+    {
       code: 'const Hoge = styled(SearchInput)``',
       errors: [
         { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` },

package/test/a11y-trigger-has-button.js

@@ -32,7 +32,7 @@ ruleTester.run('a11y-trigger-has-button', rule, {
     { code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
   ],
   invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
     { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },