eslint-plugin-smarthr 0.5.0 → 0.5.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.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.0...v0.5.1) (2024-03-17)
+
+
+### Features
+
+* a11y-form-control-in-formルールを追加 ([#121](https://github.com/kufu/eslint-plugin-smarthr/issues/121)) ([a6270f9](https://github.com/kufu/eslint-plugin-smarthr/commit/a6270f9f22832a8ccaeef3b63e35da84b6e13e68))
+
 ## [0.5.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.2...v0.5.0) (2024-03-11)
 
 

package/README.md

@@ -3,6 +3,7 @@
 - [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-delegate-element-has-role-presentation](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-delegate-element-has-role-presentation)
+- [a11y-form-control-in-form](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-form-control-in-form)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-heading-in-sectioning-content)
 - [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/index.js

@@ -23,6 +23,23 @@ function generateRulesMap() {
   return rulesMap;
 }
 
+const DISAPPROVE_RULE_NAMES = [
+  'a11y-form-control-in-form', // formを使用することの是非について議論中のため
+
+  // ルールが動作するために設定が必要なものはrecommendedに含めない
+  'format-import-path',
+  'format-translate-component',
+  'jsx-start-with-spread-attributes',
+  'no-import-other-domain',
+  'prohibit-file-name',
+  'prohibit-import',
+  'prohibit-path-within-template-literal',
+  'require-declaration',
+  'require-export',
+  'require-import',
+]
+const DISAPPROVE_RULE_NAMES_REGEX = new RegExp(`^(${DISAPPROVE_RULE_NAMES.join('|')})$`)
+
 function generateRecommendedConfig(rules) {
   let config = {
     plugins: ['smarthr'],
@@ -30,7 +47,9 @@ function generateRecommendedConfig(rules) {
   };
 
   for (let ruleName of Object.keys(rules)) {
-    config.rules[`smarthr/${ruleName}`] = 'off';
+    if (!DISAPPROVE_RULE_NAMES_REGEX.test(ruleName)) {
+      config.rules[`smarthr/${ruleName}`] = 'off';
+    }
   }
 
   return config;

package/package.json

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

package/rules/a11y-form-control-in-form/README.md

@@ -0,0 +1,67 @@
+# smarthr/a11y-form-control-in-form
+
+- fieldset, Fieldset, FormControl を利用する場合、form要素で囲むことを促すルールです
+- form要素で囲むことで以下のようなメリットがあります
+  - 適切にマークアップできるようになり、フォームの範囲などがスクリーンリーダーに正しく伝わる
+  - 入力要素にfocusした状態でEnterを押せばフォームをsubmitできる
+  - inputのrequired属性、pattern属性を利用した入力チェックをブラウザの機能として実行できる
+- smarthr/a11y-input-in-form-control と組み合わせることでより厳密なフォームのマークアップを行えます
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-form-control-in-form': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// formで囲まれていないためNG
+const AnyComponent = <>
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</>
+```
+
+## ✅ Correct
+
+```jsx
+// formで囲まれているためOK
+const AnyComponent = <StyledForm>
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</StyledForm>
+const AnyComponent = <Hoge as="form">
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</Hoge>
+const AnyComponent = <Hoge forwardedAs="form">
+  <FormControl />
+  <HogeFieldset />
+  <fieldset />
+</Hoge>
+
+// Dialogの場合、FormDialog・RemoteTriggerFormDialogで囲めばOK
+const AnyComponent = <FormDialog>
+  <FugaFormControl />
+</FormDialog>
+const AnyComponent = <RemoteTriggerAnyFormDialog>
+  <FugaFormControl />
+</RemoteTriggerAnyFormDialog>
+
+// 対象のFormControl、Fieldsetがコンポーネントの一要素であり、その親コンポーネント名がFormControl、もしくはFieldsetの場合OK
+const AnyFormControl = <>
+  <StyledFormControl />
+</>
+const AnyFieldset = <>
+  <StyledFieldset />
+</>
+```

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

@@ -0,0 +1,94 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const FIELDSET_EXPECTED_NAMES = {
+  '((F|^f)ieldset)$': '(Fieldset)$',
+  '(Fieldsets)$': '(Fieldsets)$',
+}
+const FORM_CONTROL_EXPECTED_NAMES = {
+  ...FIELDSET_EXPECTED_NAMES,
+  '(FormGroup)$': '(FormGroup)$',
+  '(FormControl)$': '(FormControl)$',
+  '(FormControls)$': '(FormControls)$',
+}
+const FORM_EXPECTED_NAMES = {
+  '((F|^f)orm)$': '(Form)$',
+  '(FormDialog)$': '(FormDialog)$',
+  'RemoteTrigger(.*)FormDialog$': 'RemoteTrigger(.*)FormDialog$',
+}
+const EXPECTED_NAMES = {
+  ...FORM_CONTROL_EXPECTED_NAMES,
+  ...FORM_EXPECTED_NAMES,
+}
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const targetRegex = new RegExp(`(${Object.keys(FORM_CONTROL_EXPECTED_NAMES).join('|')})`)
+const wrapperRegex = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
+const messageFieldset = `(${Object.values(FORM_CONTROL_EXPECTED_NAMES).join('|')})`
+const declaratorTargetRegex = new RegExp(messageFieldset)
+const asRegex = /^(as|forwardedAs)$/
+const bareTagRegex = /^(form|fieldset)$/
+
+const includeAsAttrFormOrFieldset = (a) => a.name?.name.match(asRegex) && a.value.value.match(bareTagRegex)
+
+const searchBubbleUp = (node) => {
+  switch (node.type) {
+    case 'Program':
+      // rootまで検索した場合は確定でエラーにする
+      return null
+    case 'JSXElement':
+      // formかFieldsetでラップされていればOK
+      if (node.openingElement.name.name && (wrapperRegex.test(node.openingElement.name.name) || node.openingElement.attributes.some(includeAsAttrFormOrFieldset))) {
+        return node
+      }
+      break
+    case 'VariableDeclarator':
+      // FormControl系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.parent?.type) && declaratorTargetRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+    case 'FunctionDeclaration':
+    case 'ClassDeclaration':
+      // FormControl系コンポーネントの拡張の場合は対象外
+      if (ignoreCheckParentTypeRegex.test(node.parent.type) && declaratorTargetRegex.test(node.id.name)) {
+        return node
+      }
+
+      break
+  }
+
+  return searchBubbleUp(node.parent)
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const elementName = node.name.name
+
+        if (elementName && targetRegex.test(elementName)) {
+          const result = searchBubbleUp(node.parent.parent)
+
+          if (!result) {
+            context.report({
+              node,
+              message: `${elementName}をform要素で囲むようにマークアップしてください。
+ - form要素で囲むことでスクリーンリーダーに入力フォームであることが正しく伝わる、入力要素にfocusした状態でEnterを押せばsubmitできる、inputのpattern属性を利用できるなどのメリットがあります
+ - 以下のいずれかの方法で修正をおこなってください
+   - 方法1: form要素で ${elementName} を囲んでください。smarthr-ui/ActionDialog、もしくはsmarthr-ui/RemoteTriggerActionDialogを利用している場合、smarthr-ui/FormDialog、smarthr-ui/RemoteTriggerFormDialogに置き換えてください
+   - 方法2: ${elementName} がコンポーネント内の一要素であり、かつその親コンポーネントがFormControl、もしくはFieldsetを表現するものである場合、親コンポーネント名を "${messageFieldset}" とマッチするものに変更してください`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = []

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

@@ -126,7 +126,7 @@ const findTagAttr = (a) => a.name?.name == 'tag'
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     schema: [],
   },
   create(context) {

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -11,7 +11,7 @@ const EXPECTED_NAMES = {
 
 module.exports = {
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     schema: [],
   },
   create(context) {

package/test/a11y-form-control-in-form.js

@@ -0,0 +1,37 @@
+const rule = require('../rules/a11y-form-control-in-form')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const generateErrorText = (elementName) => `${elementName}をform要素で囲むようにマークアップしてください。
+ - form要素で囲むことでスクリーンリーダーに入力フォームであることが正しく伝わる、入力要素にfocusした状態でEnterを押せばsubmitできる、inputのpattern属性を利用できるなどのメリットがあります
+ - 以下のいずれかの方法で修正をおこなってください
+   - 方法1: form要素で ${elementName} を囲んでください。smarthr-ui/ActionDialog、もしくはsmarthr-ui/RemoteTriggerActionDialogを利用している場合、smarthr-ui/FormDialog、smarthr-ui/RemoteTriggerFormDialogに置き換えてください
+   - 方法2: ${elementName} がコンポーネント内の一要素であり、かつその親コンポーネントがFormControl、もしくはFieldsetを表現するものである場合、親コンポーネント名を "((Fieldset)$|(Fieldsets)$|(FormGroup)$|(FormControl)$|(FormControls)$)" とマッチするものに変更してください`
+
+ruleTester.run('a11y-form-control-in-form', rule, {
+  valid: [
+    { code: '<input />' },
+    { code: '<Select />' },
+    { code: '<form><FormControl /></form>' },
+    { code: '<Form><fieldset /></Form>' },
+    { code: '<StyledForm><AnyFieldset /></StyledForm>' },
+    { code: 'const HogeFormControl = <><AnyFormControl /></>' },
+    { code: 'const HogeFieldset = <><AnyFieldset /></>' },
+  ],
+  invalid: [
+    { code: '<FormControl />', errors: [ { message: generateErrorText('FormControl') } ] },
+    { code: '<fieldset />', errors: [ { message: generateErrorText('fieldset') } ] },
+    { code: '<AnyFieldset />', errors: [ { message: generateErrorText('AnyFieldset') } ] },
+    { code: 'const Hoge = <><AnyFormControl /></>', errors: [ { message: generateErrorText('AnyFormControl') } ] },
+  ]
+})