eslint-plugin-smarthr 0.2.21 → 0.2.22

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.21",
+  "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') }] },
+  ]
+})