eslint-plugin-smarthr 0.5.6 → 0.5.7

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.7](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.6...v0.5.7) (2024-04-01)
+
+
+### Features
+
+* a11y-delegate-element-has-role-presentationでas, forwardedAsにform, fieldsetが指定されている場合、インタファクティブな要素として扱うように修正 ([#132](https://github.com/kufu/eslint-plugin-smarthr/issues/132)) ([3d629fa](https://github.com/kufu/eslint-plugin-smarthr/commit/3d629fa73e7346c229831a0075478fcbfe582de1))
+* a11y-replace-unreadable-symbol ([#128](https://github.com/kufu/eslint-plugin-smarthr/issues/128)) ([9410ff9](https://github.com/kufu/eslint-plugin-smarthr/commit/9410ff9ad9ed5a0d18945e3567a1fee8c056f822))
+
 ### [0.5.6](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.5...v0.5.6) (2024-03-29)
 
 

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-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [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)
 - [best-practice-for-button-element](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-button-element)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)

package/package.json

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

package/rules/a11y-delegate-element-has-role-presentation/index.js

@@ -43,6 +43,8 @@ const INTERACTIVE_COMPONENT_NAMES = Object.keys(EXPECTED_NAMES).join('|')
 const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/
 const MEANED_ROLE_REGEX = /^(combobox|group|slider|toolbar)$/
 const INTERACTIVE_NODE_TYPE_REGEX = /^(JSXElement|JSXExpressionContainer|ConditionalExpression)$/
+const AS_REGEX = /^(as|forwardedAs)$/
+const AS_VALUE_REGEX = /^(form|fieldset)$/
 
 const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
   const onAttrsText = onAttrs.join(', ')
@@ -122,12 +124,15 @@ module.exports = {
         let onAttrs = []
         let roleMean = undefined
         let isRolePresentation = false
+        let isAsInteractive = false
 
         node.attributes.forEach((a) => {
           const aName = a.name?.name || ''
 
           if (aName.match(INTERACTIVE_ON_REGEX)) {
             onAttrs.push(aName)
+          } else if (AS_REGEX.test(aName) && AS_VALUE_REGEX.test(a.value?.value || '')) {
+            isAsInteractive = true
           } else if (aName === 'role') {
             const v = a.value?.value || ''
 
@@ -140,7 +145,7 @@ module.exports = {
           }
         })
 
-        if (nodeName.match(interactiveComponentRegex)) {
+        if (isAsInteractive || nodeName.match(interactiveComponentRegex)) {
           if (isRolePresentation) {
             context.report({
               node,

package/rules/a11y-replace-unreadable-symbol/README.md

@@ -0,0 +1,38 @@
+# smarthr/a11y-replace-unreadable-symbol
+
+- 一部記号はスクリーンリーダーで読み上げられない、もしくは記号名そのままで読み上げられてしまい、意図が正しく伝えられない場合があります
+- それらの記号を適切に読み上げられるコンポーネントに置き換えることを促すルールです
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-replace-unreadable-symbol': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<>XXXX年YY月ZZ日 〜 XXXX年YY月ZZ日</>
+// スクリーンリーダーは "XXXX年YY月ZZ日XXXX年YY月ZZ日" と読み上げる場合があります
+
+<p>選択できる数値の範囲は 0 ~ 9999 です</p>
+// スクリーンリーダーは "選択できる数値の範囲は09999です" と読み上げる場合があります
+```
+
+## ✅ Correct
+
+```jsx
+//
+<>XXXX年YY月ZZ日 <RangeSeparator /> XXXX年YY月ZZ日</>
+// スクリーンリーダーは "XXXX年YY月ZZ日からXXXX年YY月ZZ日" と読み上げます
+
+<p>選択できる数値の範囲は 0 <RangeSeparator /> 9999 です</p>
+// スクリーンリーダーは "選択できる数値の範囲は0から9999です" と読み上げます
+
+<p>入力できる記号は <RangeSeparator decorators={{ text: '~', visuallyHiddenText: '半角チルダ' }} /> です</p>
+// スクリーンリーダーは "入力できる記号は半角チルダです" と読み上げます
+```

package/rules/a11y-replace-unreadable-symbol/index.js

@@ -0,0 +1,28 @@
+const TILDE_REGEX = /([~〜])/
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      JSXText: (node) => {
+        const matcher = node.value.match(TILDE_REGEX)
+
+        if (matcher) {
+          context.report({
+            node,
+            message: `"${matcher[1]}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/RangeSeparatorに置き換えてください。
+ - エラー表示されている行に"${matcher[1]}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
+ - smarthr-ui/RangeSeparatorに置き換えることでスクリーンリーダーが "から" と読み上げることができます
+ - 前後の文脈などで "から" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`,
+          })
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/a11y-delegate-element-has-role-presantation.js

@@ -56,6 +56,8 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<Wrapper onClick={any} role="presentation">{any1 ? (any2 ? <HogeLink /> : null) : null}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="presentation">{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>' },
     { code: '<Wrapper onClick={any} role="slider">Hoge</Wrapper>' },
+    { code: '<Wrapper onSubmit={any} as="form" />' },
+    { code: '<Wrapper onSubmit={any} forwardedAs="fieldset">any</Wrapper>' },
   ],
   invalid: [
     { code: '<Input role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Input') } ] },

package/test/a11y-replace-unreadable-symbol.js

@@ -0,0 +1,36 @@
+const rule = require('../rules/a11y-replace-unreadable-symbol')
+const RuleTester = require('eslint').RuleTester
+
+const generateErrorText = (symbol, replaced, read) => `"${symbol}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/${replaced}に置き換えてください。
+ - エラー表示されている行に"${symbol}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
+ - smarthr-ui/${replaced}に置き換えることでスクリーンリーダーが "${read}" と読み上げることができます
+ - 前後の文脈などで "${read}" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-replace-unreadable-symbol', rule, {
+  valid: [
+    { code: `<>ほげふが</>` },
+    { code: `<RangeSeparator />` },
+    { code: `<p>ほげ<RangeSeparator />ふが</p>` },
+    { code: `<p>
+      ほげ
+      <RangeSeparator />
+      ふが
+    </p>` },
+  ],
+  invalid: [
+    { code: `<>~</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
+    { code: `<>ほげ~ふが</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
+    { code: `<p>ほげ〜ふが</p>`, errors: [ { message: generateErrorText('〜', 'RangeSeparator', 'から') } ] },
+  ]
+})