eslint-plugin-smarthr 0.5.17 → 0.5.18

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.5.18](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.17...v0.5.18) (2024-11-25)
+
+
+### Features
+
+* a11y-requried-layout-as-attribute ルールを追加する ([#150](https://github.com/kufu/eslint-plugin-smarthr/issues/150)) ([96e0970](https://github.com/kufu/eslint-plugin-smarthr/commit/96e09702ea59cfcd5a173e187300b9054047b65c))
+
+
+### Bug Fixes
+
+* a11y-form-control-in-form でFilterDropdownをformとして扱うように修正 ([#151](https://github.com/kufu/eslint-plugin-smarthr/issues/151)) ([9d86ef8](https://github.com/kufu/eslint-plugin-smarthr/commit/9d86ef885b607582324df24e5743d42533108db3))
+
 ### [0.5.17](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.16...v0.5.17) (2024-11-04)
 
 

package/README.md

@@ -14,6 +14,7 @@
 - [a11y-prohibit-sectioning-content-in-form](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-sectioning-content-in-form)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-useless-sectioning-fragment)
 - [a11y-replace-unreadable-symbol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-replace-unreadable-symbol)
+- [a11y-required-layout-as-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-required-layout-as-attribute)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-button-element](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-button-element)
 - [best-practice-for-data-test-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-data-test-attribute)

package/package.json

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

package/rules/a11y-form-control-in-form/index.js

@@ -14,6 +14,7 @@ const FORM_EXPECTED_NAMES = {
   '((F|^f)orm)$': '(Form)$',
   '(FormDialog)$': '(FormDialog)$',
   'RemoteTrigger(.*)FormDialog$': 'RemoteTrigger(.*)FormDialog$',
+  'FilterDropdown$': '(FilterDropdown)$',
 }
 const EXPECTED_NAMES = {
   ...FORM_CONTROL_EXPECTED_NAMES,

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -11,6 +11,7 @@ const EXPECTED_NAMES = {
   'Section$': 'Section$',
   'ModelessDialog$': 'ModelessDialog$',
   'Center$': 'Center$',
+  'Cluster$': '(Cluster)$',
   'Reel$': 'Reel$',
   'Sidebar$': 'Sidebar$',
   'Stack$': 'Stack$',
@@ -41,6 +42,7 @@ const UNEXPECTED_NAMES = {
     unexpectedMessageTemplate,
   ],
   'Center$': '(Center)$',
+  'Cluster$': '(Cluster)$',
   'Reel$': '(Reel)$',
   'Sidebar$': '(Sidebar)$',
   'Stack$': '(Stack)$',

package/rules/a11y-prohibit-sectioning-content-in-form/index.js

@@ -166,6 +166,10 @@ module.exports = {
                 context.report({
                   node,
                   message: `${isSection ? elementName : `${asAttr.name.name}="${asAttr.value.value}"`}とその内部に存在するHeadingをsmarthr-ui/Fieldsetに置き換えてください
+ - もしくはform要素を利用していない場合、フォームを構成する入力要素郡すべてを一つのform要素で囲んでください
+   - required属性、pattern属性など一部属性はform要素で囲まないと動作しません
+   - 送信用ボタンのonClickをform要素のonSubmitに移動し、送信用ボタンに `type="submit"` を指定することでより適切にマークアップ出来ます
+     - その際、onSubmitの動作中で "e.preventDefault()" と "e.stopPropagation()" を指定する必要がある場合があります。
  - form内の見出しとなる要素をlegend, labelのみに統一することでスクリーンリーダーのジャンプ機能などの利便性が向上します
  - smarthr-ui/Fieldset が利用できない場合、fieldset要素とlegend要素を使ったマークアップに修正してください
    - その際、fieldset要素の直下にlegend要素が存在するようにしてください。他要素がfieldsetとlegendの間に存在すると、正しく紐づけが行われない場合があります`,
@@ -181,6 +185,10 @@ module.exports = {
                 context.report({
                   node: sectioningContent.node,
                   message: `${sectioningContent.elementName}とその内部に存在するHeadingをsmarthr-ui/Fieldsetに置き換えてください
+ - もしくはform要素を利用していない場合、フォームを構成する入力要素郡すべてを一つのform要素で囲んでください
+   - required属性、pattern属性など一部属性はform要素で囲まないと動作しません
+   - 送信用ボタンのonClickをform要素のonSubmitに移動し、送信用ボタンに `type="submit"` を指定することでより適切にマークアップ出来ます
+     - その際、onSubmitの動作中で "e.preventDefault()" と "e.stopPropagation()" を指定する必要がある場合があります。
  - form内の見出しとなる要素をlegend, labelのみに統一することでスクリーンリーダーのジャンプ機能などの利便性が向上します
  - smarthr-ui/Fieldset が利用できない場合、fieldset要素とlegend要素を使ったマークアップに修正してください
    - その際、fieldset要素の直下にlegend要素が存在するようにしてください。他要素がfieldsetとlegendの間に存在すると、正しく紐づけが行われない場合があります`,

package/rules/a11y-required-layout-as-attribute/README.md

@@ -0,0 +1,54 @@
+# smarthr/a11y-required-layout-as-attribute
+
+- smarthr-ui/Layoutに属するコンポーネントはデフォルトではdiv要素を出力します
+- そのため他の一部コンポーネントとの組み合わせによってはinvalidなマークアップになる場合が起こり得ます
+  - 例: FormControlのtitle属性内でClusterを使うと `label > div` の構造になるためinvalid
+- 対象コンポーネントの使用方法をチェックし、適切なマークアップになるよう、as・forwardedAs属性の利用を促します
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-required-layout-as-attribute': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Heading>
+  <Cluster>any</Cluster>
+</Heading>
+
+<HogeFormControl title={
+  <FugaCluster>any</FugaCluster>
+} />
+
+<StyledFieldset title={
+  <Cluster>any</Cluster>
+}>
+  // any
+</StyledFieldset>
+```
+
+## ✅ Correct
+
+```jsx
+<Heading>
+  <Cluster as="span">any</Cluster>
+</Heading>
+
+<HogeFormControl title={
+  <FugaCluster forwardedAs="span">any</FugaCluster>
+} />
+
+<StyledFieldset title={
+  <Cluster as="strong">any</Cluster>
+}>
+  // any
+</StyledFieldset>
+```

package/rules/a11y-required-layout-as-attribute/index.js

@@ -0,0 +1,90 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const LAYOUT_EXPECTED_NAMES = {
+  'Center$': '(Center)$',
+  'Cluster$': '(Cluster)$',
+  'Reel$': '(Reel)$',
+  'Sidebar$': '(Sidebar)$',
+  'Stack$': '(Stack)$',
+  'Base$': '(Base)$',
+  'BaseColumn$': '(BaseColumn)$',
+}
+const EXPECTED_NAMES = {
+  ...LAYOUT_EXPECTED_NAMES,
+  'PageHeading$': '(PageHeading)$',
+  'Heading$': '(Heading)$',
+  '^h1$': '(PageHeading)$',
+  '^h(|2|3|4|5|6)$': '(Heading)$',
+}
+
+const UNEXPECTED_NAMES = {
+  ...LAYOUT_EXPECTED_NAMES,
+  '(Heading|^h(1|2|3|4|5|6))$': '(Heading)$',
+}
+
+const layoutRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
+const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
+const asRegex = /^(as|forwardedAs)$/
+const formControlRegex = /(FormControl|Fieldset)$/
+
+const findAsAttr = (a) => a.name?.name.match(asRegex)
+
+const searchBubbleUp = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合は確定でエラーにする
+      return null
+    case 'JSXElement': {
+      const name = node.openingElement.name.name || ''
+
+      if (headingRegex.test(name)) {
+        return name
+      }
+
+      break
+    }
+    case 'JSXAttribute': {
+      const name = node.name.name || ''
+
+      if (name === 'title' && formControlRegex.test(node.parent.name.name)) {
+        return `${node.parent.name.name}のtitle属性`
+      }
+    }
+  }
+
+  return searchBubbleUp(node.parent)
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const name = node.name.name || ''
+
+        if (layoutRegex.test(name) && !node.attributes.some(findAsAttr)) {
+          const parentName = searchBubbleUp(node.parent.parent)
+
+          if (parentName) {
+            context.report({
+              node,
+              message: `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
+ - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
+ - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
+ - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+
+module.exports.schema = []

package/test/a11y-required-layout-as-attribute.js

@@ -0,0 +1,35 @@
+const rule = require('../rules/a11y-required-layout-as-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (parentName, name) => `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
+ - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
+ - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
+ - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`
+
+ruleTester.run('a11y-anchor-has-href-attribute', rule, {
+  valid: [
+    { code: `<h1><Cluster as="span">ほげ</Cluster></h1>` },
+    { code: `<Heading><Cluster as="strong" /></Heading>` },
+    { code: `<StyledHeading><AnyCluster forwardedAs="span" /></StyledHeading>` },
+    { code: `<FormControl title={<Cluster as="span" />} />` },
+    { code: `<StyledFieldset title={<AnyCluster forwardedAs="strong" />} />` },
+  ],
+  invalid: [
+    { code: `<h1><Cluster>ほげ</Cluster></h1>`, errors: [{ message: generateErrorText('h1', 'Cluster') }] },
+    { code: `<Heading><Cluster /></Heading>`, errors: [{ message: generateErrorText('Heading', 'Cluster') }] },
+    { code: `<StyledHeading><AnyCluster /></StyledHeading>`, errors: [{ message: generateErrorText('StyledHeading', 'AnyCluster') }] },
+    { code: `<FormControl title={<Cluster />} />`, errors: [{ message: generateErrorText('FormControlのtitle属性', 'Cluster') }] },
+    { code: `<StyledFieldset title={<AnyCluster />} />`, errors: [{ message: generateErrorText('StyledFieldsetのtitle属性', 'AnyCluster') }] },
+  ]
+})