eslint-plugin-smarthr 0.5.16 → 0.5.17

package/.node-version

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

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.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,6 +11,7 @@
 - [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-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)

package/package.json

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

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,196 @@
+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内の見出しとなる要素を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内の見出しとなる要素をlegend, labelのみに統一することでスクリーンリーダーのジャンプ機能などの利便性が向上します
+ - smarthr-ui/Fieldset が利用できない場合、fieldset要素とlegend要素を使ったマークアップに修正してください
+   - その際、fieldset要素の直下にlegend要素が存在するようにしてください。他要素がfieldsetとlegendの間に存在すると、正しく紐づけが行われない場合があります`,
+                })
+              }
+            }
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []