eslint-plugin-smarthr 0.5.6 → 0.5.8

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.8](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.5.7...v0.5.8) (2024-04-09)
+
+
+### Features
+
+* a11y-prohibit-input-maxlength-attribute ([#135](https://github.com/kufu/eslint-plugin-smarthr/issues/135)) ([9f9d010](https://github.com/kufu/eslint-plugin-smarthr/commit/9f9d010e819d936fe5f55556a8f65e6485c552ce))
+* best-practice-for-layouts に <Stack align="center"> を <Center> に置き換えることを促すチェックを追加 ([#133](https://github.com/kufu/eslint-plugin-smarthr/issues/133)) ([5835530](https://github.com/kufu/eslint-plugin-smarthr/commit/58355308bf9a5d18d2d731e699c54806af969ed9))
+
+### [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

@@ -9,8 +9,10 @@
 - [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)
 - [a11y-input-in-form-control](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-in-form-control)
 - [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-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.8",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -27,7 +27,8 @@
   "devDependencies": {
     "eslint": "^8.8.0",
     "jest": "^27.4.7",
-    "standard-version": "^9.3.2"
+    "standard-version": "^9.3.2",
+    "typescript-eslint": "^7.5.0"
   },
   "peerDependencies": {
     "eslint": "^7 || ^8"

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -93,6 +93,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-clickable-element-has-text/index.js

@@ -44,6 +44,9 @@ const message = `a, buttonなどのクリッカブルな要素内にはテキス
   - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください
  - クリッカブルな要素内に設置しているコンポーネントがテキストを含んでいる場合、"XxxxText" のように末尾に "Text" もしくは "Message" という名称を設定してください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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(', ')
@@ -79,6 +81,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',
@@ -122,12 +127,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 +148,7 @@ module.exports = {
           }
         })
 
-        if (nodeName.match(interactiveComponentRegex)) {
+        if (isAsInteractive || nodeName.match(interactiveComponentRegex)) {
           if (isRolePresentation) {
             context.report({
               node,

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

@@ -62,6 +62,9 @@ const searchBubbleUp = (node) => {
   return searchBubbleUp(node.parent)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -223,6 +223,9 @@ const forInSearchChildren = (ary) => {
 
 const findTagAttr = (a) => a.name?.name == 'tag'
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-image-has-alt-attribute/index.js

@@ -48,6 +48,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-input-has-name-attribute/index.js

@@ -40,6 +40,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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

@@ -77,6 +77,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-numbered-text-within-ol/index.js

@@ -53,6 +53,9 @@ const renderNode = (node, matcher) => node.type === 'JSXText' ? `\`${matcher[1]}
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-prohibit-input-maxlength-attribute/README.md

@@ -0,0 +1,35 @@
+# smarthr/a11y-prohibit-input-maxlength-attribute
+
+- input, textarea 要素に maxLength 属性を設定することを禁止するルールです
+  - maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります。
+- maxLength 属性ではなく、pattern 属性と title 属性を組み合わせて form 要素でラップすることで、入力時でなく、submit 時にバリデーションすることができます。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-input-maxlength-attribute': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<input maxLength={30} />
+<XxxInput maxLength={40} />
+<textarea maxLength={50} />
+<XxxTextarea maxLength={60} />
+```
+
+## ✅ Correct
+
+```jsx
+<input />
+<XxxInput />
+<textarea />
+<XxxTextarea />
+```

package/rules/a11y-prohibit-input-maxlength-attribute/index.js

@@ -0,0 +1,44 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Input|^input)$': '(Input)$',
+  '(Textarea|^textarea)$': '(Textarea)$',
+}
+
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const INPUT_COMPONENT_NAMES = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+
+const SCHEMA = []
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        if (node.name.type === 'JSXIdentifier' && INPUT_COMPONENT_NAMES.test(node.name.name)) {
+          const checkHasMaxLength = (attr) => attr.name?.name === 'maxLength'
+          const maxLengthAttr = node.attributes.find(checkHasMaxLength)
+          if (maxLengthAttr) {
+            context.report({
+              node,
+              message: `${node.name.name}にmaxLength属性を設定しないでください。
+- maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります
+- 以下のいずれかの方法で修正をおこなってください
+  - 方法1: pattern属性とtitle属性を組み合わせ、form要素でラップする
+  - 方法2: JavaScriptを用いたバリデーションを実装する`,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

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

@@ -9,6 +9,9 @@ const EXPECTED_NAMES = {
   'DatePicker$': 'DatePicker$',
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/a11y-prohibit-useless-sectioning-fragment/index.js

@@ -34,6 +34,9 @@ const searchSectioningFragment = (node) => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

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,31 @@
+const TILDE_REGEX = /([~〜])/
+
+const SCHEMA = []
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+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/rules/a11y-trigger-has-button/index.js

@@ -15,6 +15,9 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
   !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
 ))
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-button-element/index.js

@@ -10,6 +10,9 @@ const findTypeAttr = (a) => a.type === 'JSXAttribute' && a.name.name === 'type'
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-date/index.js

@@ -25,6 +25,9 @@ const fixAction = (fixer, node, replacedSuffix = '') => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/best-practice-for-layouts/index.js

@@ -25,6 +25,7 @@ const checkFalsyJSXText = (c) => (
 )
 
 const findJustifyAttr = (a) => a.name?.name === 'justify'
+const findAlignAttr = (a) => a.name?.name === 'align'
 
 const searchChildren = (node) => {
   if (
@@ -55,6 +56,9 @@ const searchChildren = (node) => {
 
 const SCHEMA = []
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',
@@ -80,11 +84,17 @@ module.exports = {
                 return
               }
 
+              const alignAttr = layoutType === 'Stack' ? node.attributes.find(findAlignAttr) : null
+
+              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+                return
+              }
+
               if (searchChildren(children[0])) {
                 context.report({
                   node,
                   message:
-                    justifyAttr && justifyAttr.value.value === 'center'
+                    (justifyAttr && justifyAttr.value.value === 'center' || alignAttr && alignAttr.value.value === 'center')
                       ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
                       : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください

package/rules/best-practice-for-remote-trigger-dialog/index.js

@@ -8,6 +8,9 @@ const EXPECTED_NAMES = {
 const REGEX_REMOTE_TRIGGER_DIALOG = /RemoteTrigger(Action|Message|Modeless)Dialog$/
 const REGEX_REMOTE_DIALOG_TRIGGER = /RemoteDialogTrigger$/
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/format-import-path/index.js

@@ -79,6 +79,9 @@ const calculateRelativeImportPath = ({ importPath, filteredDirs, filteredPaths }
   return `${filteredDirs.length === 0 ? './' : [...Array(filteredDirs.length)].reduce((prev) => `${prev}../`, '')}${filteredPaths.join('/')}`.replace(/^(.+?)\/$/, '$1')
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/format-translate-component/index.js

@@ -13,6 +13,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/jsx-start-with-spread-attributes/index.js

@@ -8,6 +8,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'problem',

package/rules/no-import-other-domain/index.js

@@ -33,6 +33,9 @@ const SCHEMA = [
   }
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-export-array-type/index.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-file-name/index.js

@@ -9,6 +9,9 @@ const SCHEMA = [{
 }]
 
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-import/index.js

@@ -32,6 +32,9 @@ const SCHEMA = [{
 
 const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} は利用しないでください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/prohibit-path-within-template-literal/index.js

@@ -26,6 +26,9 @@ const SCHEMA = [
   },
 ]
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-barrel-import/index.js

@@ -83,6 +83,9 @@ const calculateReplacedImportPath = (source) => {
 const pickImportedName = (s) => s.imported?.name
 const findExistsSync = (p) => fs.existsSync(p)
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-declaration/index.js

@@ -40,6 +40,9 @@ const useRegex = (use) => {
   return new RegExp(`((${codeSeparator}(${actualUse})${codeSeparator})|(^(${actualUse})${codeSeparator})|${codeSeparator}(${actualUse})$)`)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-export/index.js

@@ -20,6 +20,9 @@ const fetchEdgeDeclaration = (node) => {
   return fetchEdgeDeclaration(declaration)
 }
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/require-import/index.js

@@ -32,6 +32,9 @@ const SCHEMA = [{
 
 const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof exportName == 'string' ? `/${exportName}`: ''} をimportしてください`
 
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

package/rules/trim-props/index.js

@@ -1,3 +1,6 @@
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
 module.exports = {
   meta: {
     type: 'suggestion',

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-prohibit-input-maxlength-attribute.js

@@ -0,0 +1,39 @@
+const rule = require('../rules/a11y-prohibit-input-maxlength-attribute')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 12,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+const expectedErrorMessage = (elName) => `${elName}にmaxLength属性を設定しないでください。
+- maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります
+- 以下のいずれかの方法で修正をおこなってください
+  - 方法1: pattern属性とtitle属性を組み合わせ、form要素でラップする
+  - 方法2: JavaScriptを用いたバリデーションを実装する`
+
+ruleTester.run('a11y-prohibit-input-maxlength-attribute', rule, {
+  valid: [
+    { code: `<input />` },
+    { code: `<Input type="text" />` },
+    { code: `<HogeInput value="hoge" />` },
+    { code: `<textarea>hoge</textarea>` },
+    { code: `<Textarea type="text" />` },
+    { code: `<HogeTextarea value="hoge" />` },
+    { code: `<><input /></>`}
+  ],
+  invalid: [
+    { code: `<input maxLength={30} />`, errors: [{ message: expectedErrorMessage('input') }] },
+    { code: `<Input type="text" maxLength={40} />`, errors: [{ message: expectedErrorMessage('Input') }] },
+    { code: `<HogeInput maxLength value="hoge" />`, errors: [{ message: expectedErrorMessage('HogeInput') }] },
+    { code: `<textarea maxLength={50}>hoge</textarea>`, errors: [{ message: expectedErrorMessage('textarea') }]},
+    { code: `<Textarea type="text" maxLength={60} />`, errors: [{ message: expectedErrorMessage('Textarea') }]},
+    { code: `<HogeTextarea maxLength={70} value="hoge" />`, errors: [{ message: expectedErrorMessage('HogeTextarea') }]}
+  ]
+})

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

package/test/best-practice-for-layouts.js

@@ -55,6 +55,8 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
     { code: `<Cluster justify="flex-end">{a}</Cluster>` },
     { code: `<HogeCluster justify="end">{a}</HogeCluster>` },
+    { code: `<Stack align="flex-end">{a}</Stack>` },
+    { code: `<HogeStack align="end">{a}</HogeStack>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
@@ -82,6 +84,7 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<HogeCluster justify="center">{a}</HogeCluster>`, errors: [ { message: 'HogeCluster は smarthr-ui/Cluster ではなく smarthr-ui/Center でマークアップしてください' } ] },
+    { code: `<HogeStack align="center">{a}</HogeStack>`, errors: [ { message: 'HogeStack は smarthr-ui/Stack ではなく smarthr-ui/Center でマークアップしてください' } ] },
   ]
 })
 

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "target": "ESNext",
+    "module": "CommonJS",
+    "lib": ["ESNext"],
+    "noImplicitAny": true
+  },
+}

package/types.js

@@ -0,0 +1,3 @@
+/**
+ * @typedef {import('@typescript-eslint/utils').TSESTree.JSXOpeningElement} JSXOpeningElement
+ */