eslint-plugin-smarthr 0.5.16 → 0.5.18

package/.node-version

@@ -0,0 +1 @@
+20.11.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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)
+
+
+### Features
+
+* a11y-prohibit-heading-in-formを追加 ([#148](https://github.com/kufu/eslint-plugin-smarthr/issues/148)) ([973f681](https://github.com/kufu/eslint-plugin-smarthr/commit/973f681fd3538224e7312b6eb38ea43e6fb17cc5))
+
 ### [0.5.16](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.15...v0.5.16) (2024-10-25)
 
 ### [0.5.15](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.14...v0.5.15) (2024-09-10)

package/README.md

@@ -11,8 +11,10 @@
 - [a11y-numbered-text-within-ol](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-numbered-text-within-ol)
 - [a11y-prohibit-input-maxlength-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-maxlength-attribute)
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
+- [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.16",
+  "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/README.md

@@ -0,0 +1,62 @@
+# smarthr/a11y-prohibit-sectioning-content-in-form
+
+- form, fieldset, smarthr-ui/Fieldset 以下でSectioningContent(section, aside, article, nav)が利用されている場合、smarthr-ui/Fieldsetに置き換えることを促すルールです
+- このルールを適用することで以下のようなメリットがあります
+  - form要素内からHeadingが取り除かれ、Fieldsetに統一されることにより、見出しを表現する要素がlegend, label要素のみになります
+  - これによってマークアップのルールが統一され、スクリーンリーダーのジャンプ機能などの利便性が向上します
+    - ジャンプ機能ではheading, legendは区別されるため統一されることで操作方法が単純化されます
+- a11y-form-control-in-form と組み合わせることでより厳密なフォームのマークアップを行えます
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-sectioning-content-in-form': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// form要素以下にSectionが存在するためNG
+const AnyComponent = <form>
+  <Section>
+    <Heading>ANY TITLE.</Heading>
+  </Section>
+</form>
+
+// fieldset要素以下にAsideが存在するためNG
+const AnyComponent = <Fieldset>
+  <Aside>
+    <Heading>ANY TITLE.</Heading>
+  </Aside>
+</Fieldset>
+
+// ファイル名、もしくは所属するディレクトリがform, fieldsetなどフォームに関連する名称になっている場合
+// 内部でArticleを使っているとNG
+const AnyComponent = <>
+  <Article>
+    <Heading>ANY TITLE.</Heading>
+  </Article>
+</>
+```
+
+## ✅ Correct
+
+```jsx
+// form内でSectioningContentを利用していないのでOK
+const AnyComponent = <form>
+  <Fieldset title="ANY TITLE.">
+    Hoge.
+    <Fieldset title="ANY TITLE.">
+      Fuga.
+      <FormControl  title="ANY TITLE.">
+        Piyo.
+      </FormControl>
+    </Fieldset>
+  </Fieldset>
+</form>
+```

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

@@ -0,0 +1,204 @@
+const { rootPath } = require('../../libs/common')
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const SECTIONING_CONTENT_EXPECTED_NAMES = {
+  '(A|^a)rticle$': '(Article)$',
+  '(A|^a)side$': '(Aside)$',
+  '(N|^n)av$': '(Nav)$',
+  '(S|^s)ection$': '(Section)$',
+}
+const FIELDSET_EXPECTED_NAMES = {
+  '(FormControl)$': '(FormControl)$',
+  '(FormControls)$': '(FormControls)$',
+  '((F|^f)ieldset)$': '(Fieldset)$',
+  '(Fieldsets)$': '(Fieldsets)$',
+}
+const FORM_EXPECTED_NAMES = {
+  '((F|^f)orm)$': '(Form)$',
+  '(FormDialog)$': '(FormDialog)$',
+  'RemoteTrigger(.*)FormDialog$': '(RemoteTrigger(.*)FormDialog)$',
+}
+
+const WRAPPER_EXPECTED_NAMES = {
+  ...FIELDSET_EXPECTED_NAMES,
+  ...FORM_EXPECTED_NAMES,
+}
+
+const EXPECTED_NAMES = {
+  ...SECTIONING_CONTENT_EXPECTED_NAMES,
+  ...WRAPPER_EXPECTED_NAMES,
+  'SideNav$': '(SideNav)$',
+  'IndexNav$': '(IndexNav)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const asRegex = /^(as|forwardedAs)$/
+const asFormRegex = /^(form|fieldset)$/
+const asSectioningContentRegex = /^(article|aside|nav|section)$/
+
+const includeAsAttrFormOrFieldset = (a) => a.name?.name.match(asRegex) && asFormRegex.test(a.value.value)
+const includeAsAttrSectioningContent = (a) => a.name?.name.match(asRegex) && asSectioningContentRegex.test(a.value.value)
+const includeWrapper =  (fn) => wrapperRegex.test(fn)
+
+const sectioningContentRegex = new RegExp(`(${Object.keys(SECTIONING_CONTENT_EXPECTED_NAMES).join('|')})`)
+const wrapperRegex = new RegExp(`(${Object.keys(WRAPPER_EXPECTED_NAMES).join('|')})`)
+const formControlRegex = new RegExp(`(${Object.keys(FIELDSET_EXPECTED_NAMES).join('|')})`)
+const extRegex = /\.[a-z0-9]+?$/
+const ignoreNavRegex = /(Side|Index)Nav$/
+const formPartCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+
+const rootPathSlashed = `${rootPath}/`
+
+const searchBubbleUpForSectioningContent = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合はOK
+      return null
+    case 'JSXElement':
+      const openingElement = node.openingElement
+      const elementName = openingElement.name.name
+
+      if (elementName) {
+        // formかFieldsetでラップされていればNG
+        if (wrapperRegex.test(elementName) || openingElement.attributes.some(includeAsAttrFormOrFieldset)) {
+          return node
+        } else if ((sectioningContentRegex.test(elementName) && !ignoreNavRegex.test(elementName)) || openingElement.attributes.some(includeAsAttrSectioningContent)) {
+          // 他のSectioningContentに到達した場合、同じチェックを繰り返すことになるため終了する
+          return null
+        }
+      }
+
+      break
+    // Form系コンポーネントの拡張なのでNG
+    case 'VariableDeclarator':
+      if (node.parent.parent?.type.match(formPartCheckParentTypeRegex) && wrapperRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+    // Form系コンポーネントの拡張なのでNG
+    case 'FunctionDeclaration':
+      if (formPartCheckParentTypeRegex.test(node.parent.type) && wrapperRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+  }
+
+  return searchBubbleUpForSectioningContent(node.parent)
+}
+
+const searchBubbleUpForFormControl = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合はOK
+      return null
+    case 'JSXElement':
+      const openingElement = node.openingElement
+      const elementName = openingElement.name.name
+
+      if (elementName) {
+        // SectioningContentでラップされていればNG
+        if (sectioningContentRegex.test(elementName) && !ignoreNavRegex.test(elementName)) {
+          return  { node: openingElement, elementName }
+        } else  {
+          const attr = openingElement.attributes.find(includeAsAttrSectioningContent)
+
+          if (attr) {
+            return  { node: openingElement, elementName: `${attr.name.name}="${attr.value.value}"` }
+          } else if (wrapperRegex.test(elementName) || openingElement.attributes.some(includeAsAttrFormOrFieldset)) {
+            // 他のFormControl か Fieldsetに到達した場合、同じチェックを繰り返すことになるため終了する
+            return null
+          }
+        }
+      }
+
+      break
+    case 'VariableDeclarator':
+      if (node.parent.parent?.type.match(formPartCheckParentTypeRegex) && wrapperRegex.test(node.id.name)) {
+        return null
+      }
+
+      break
+    case 'FunctionDeclaration':
+      if (formPartCheckParentTypeRegex.test(node.parent.type) && wrapperRegex.test(node.id.name)) {
+        return null
+      }
+
+      break
+  }
+
+  return searchBubbleUpForFormControl(node.parent)
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+  },
+  create(context) {
+    const filenames = context.getFilename().replace(rootPathSlashed, '').replace(extRegex, '').split('/')
+    const isInnerForm = filenames.some(includeWrapper)
+    const notified = []
+
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const elementName = node.name.name
+
+        if (elementName) {
+          // HINT: smarthr-ui/SideNav,IndexNav は対象外とする
+          if (ignoreNavRegex.test(elementName)) {
+            return
+          }
+
+          const isSection = sectioningContentRegex.test(elementName)
+          const asAttr = isSection ? false : node.attributes.find(includeAsAttrSectioningContent)
+
+          if ((isSection || asAttr)) {
+            if (isInnerForm || searchBubbleUpForSectioningContent(node.parent.parent)) {
+              if (!notified.includes(node)) {
+                notified.push(node)
+                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の間に存在すると、正しく紐づけが行われない場合があります`,
+                })
+              }
+            }
+          } else if (formControlRegex.test(elementName)) {
+            const sectioningContent = searchBubbleUpForFormControl(node.parent.parent)
+
+            if (sectioningContent) {
+              if (!notified.includes(sectioningContent.node)) {
+                notified.push(sectioningContent.node)
+                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の間に存在すると、正しく紐づけが行われない場合があります`,
+                })
+              }
+            }
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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') }] },
+  ]
+})