eslint-plugin-smarthr 0.4.0 → 0.4.1

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.4.1](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.4.0...v0.4.1) (2024-02-21)
+
+
+### Features
+
+* a11y-numbered-text-within-olを追加する ([#105](https://github.com/kufu/eslint-plugin-smarthr/issues/105)) ([167b92f](https://github.com/kufu/eslint-plugin-smarthr/commit/167b92f0f29db8ee9a446d25e09e04a7b11ce340))
+* ComboBoxなどのinputAttributesでtitle属性が指定された場合、擬似的にラベルが付いていると判定するように修正 ([#113](https://github.com/kufu/eslint-plugin-smarthr/issues/113)) ([5f3b594](https://github.com/kufu/eslint-plugin-smarthr/commit/5f3b5943ec64a18d094a9c66627ad1db2bbabe08))
+
 ## [0.4.0](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.27...v0.4.0) (2024-02-05)
 
 

package/README.md

@@ -7,6 +7,7 @@
 - [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)
 - [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-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-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.4.0",
+  "version": "0.4.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -6,7 +6,9 @@
   - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
     - これらの操作は href属性を参照します
   - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
-- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+- checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます
+- react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
+- next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
 
 ## rules
 

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

@@ -63,6 +63,7 @@ const IGNORE_INPUT_CHECK_PARENT_TYPE = /^(Program|ExportNamedDeclaration)$/
 
 const findRoleGroup = (a) => a.name?.name === 'role' && a.value.value === 'group'
 const findAsSectioning = (a) => a.name?.name.match(AS_REGEX) && a.value.value.match(BARE_SECTIONING_TAG_REGEX)
+const findTitle = (i) => i.key.name === 'title'
 
 const SCHEMA = [
   {
@@ -121,6 +122,12 @@ module.exports = {
                   case 'title':
                     isPseudoLabel = true
                     break
+                  case 'inputAttributes': {
+                    if (!isPseudoLabel && i.value.expression.type === 'ObjectExpression' && i.value.expression.properties.some(findTitle)) {
+                      isPseudoLabel = true
+                    }
+                    break
+                  }
                   case 'type':
                     switch (i.value.value) {
                       case 'radio':

package/rules/a11y-numbered-text-within-ol/README.md

@@ -0,0 +1,82 @@
+# smarthr/a11y-numbered-text-within-ol
+
+- "1. hoge", "2. fuga" ... のように連番のテキストをもつコンポーネントはol要素でマークアップすることを促すルールです
+  - ol要素でマークアップすることで連番テキストをもつ要素同士の関係、順番に意味があることを適切に示すことが出来ます
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-numbered-text-within-ol': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// ol要素で囲まれていないためNG
+<Any>1. hoge</Any>
+<Any>2. fuga</Any>
+
+// 属性でも同様にチェックする
+<Any title="1. hoge" />
+<Any title="2. fuga" />
+
+// ol要素内で連番を設定しているとNG
+<OrderedList>
+  <li>1. hoge</li>
+  <li>2. fuga</li>
+</OrderedList>
+
+// 同一のol要素で囲まれていないためNG
+<OrderedList>
+  <li>hoge</li>
+</OrderedList>
+<OrderedList>
+  <li>fuga</li>
+</OrderedList>>
+
+```
+
+## ✅ Correct
+
+```jsx
+<ol>
+  <li>hoge</li>
+  <li>fuga</li>
+</ol>
+
+<OrderedList>
+  <Any title="hoge" />
+  <Any title="fuga" />
+</OrderedList>
+
+// デフォルトの連番からフォーマット、スタイルを変更したい場合
+// counter-reset + counter-increment で表現する
+// 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
+<OrderedList>
+  <li>
+    <NumberedHeading>hoge</NumberedHeading>
+    <Any />
+  </li>
+  <li>
+    <NumberedHeading>fuga</NumberedHeading>
+    <Any />
+  </li>
+</OrderedList>
+
+...
+
+const OrderedList = styled.ol`
+  list-style: none; // デフォルトのstyleを消す
+  counter-reset: hoge; // カウンターの名称。わかりやすいものなら何でもOK
+`
+const NumberedHeading = styled(Heading)`
+  &::before {
+    counter-increment: hoge; // hogeカウンターを+1する
+    content: "No " counter(hoge) ": "; // 表示される連番のフォーマット
+  }
+`
+```

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

@@ -0,0 +1,134 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components')
+
+const EXPECTED_NAMES = {
+  '(Ordered(.*)List|^ol)$': '(Ordered(.*)List)$',
+  '(S|s)elect$': '(Select)$',
+}
+const UNEXPECTED_NAMES = EXPECTED_NAMES
+
+const NUMBERED_TEXT_REGEX = /^[\s\n]*(([1-9])([^1-9]{2})[^\s\n]*)/
+const ORDERED_LIST_REGEX = /(Ordered(.*)List|^ol)$/
+const SELECT_REGEX = /(S|s)elect$/
+
+const searchOrderedList = (node) => {
+  if (node.type === 'JSXElement' && node.openingElement.name?.name) {
+    const name = node.openingElement.name.name
+
+    if (name.match(ORDERED_LIST_REGEX)) {
+      return node.openingElement
+    } else if (name.match(SELECT_REGEX)) {
+      // HINT: select要素の場合、optionのラベルに連番がついている場合がありえるのでignoreする
+      // 通常と処理を分けるためnullではなく0を返す
+      return 0
+    }
+  }
+
+  if (node.type === 'Program') {
+    return null
+  }
+
+  return searchOrderedList(node.parent)
+}
+
+const checkNumberedTextInOl = (result, node, context) => {
+  if (result) {
+    context.report({
+      node,
+      message: `${result.name.name} 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)`,
+    })
+  }
+}
+
+const renderTag = (node) => `\`${node.name.name}="${node.value.value}"\``
+const renderNode = (node, matcher) => node.type === 'JSXText' ? `\`${matcher[1]}\`` : renderTag(node)
+
+const SCHEMA = []
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    let firstNumber = 0
+    let firstNumberedNode = null
+    let firstNumberedMatcher = null
+
+    function checker(node, matcher) {
+      if (matcher) {
+        const result = searchOrderedList(node)
+
+        if (result !== 0) {
+          checkNumberedTextInOl(result, node, context)
+
+          const nowNumber = matcher[2] * 1
+
+          if (firstNumberedNode && nowNumber !== firstNumber) {
+            if (nowNumber === firstNumber + 1) {
+              const resultFirst = searchOrderedList(firstNumberedNode)
+
+              if (!resultFirst) {
+                if (!result) {
+                  context.report({
+                    node: firstNumberedNode,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} と ${renderNode(node, matcher)} が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります`,
+                  })
+                } else {
+                  context.report({
+                    node: firstNumberedNode,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} が ${renderNode(node, matcher)} を囲んでいるol要素内(<${result.name.name}>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<${result.name.name}>)に存在する必要があります`,
+                  })
+                }
+              } else {
+                if (!result) {
+                  context.report({
+                    node,
+                    message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - ${renderNode(node, matcher)} が ${renderNode(firstNumberedNode, firstNumberedMatcher)} を囲んでいるol要素内(<${resultFirst.name.name}>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<${resultFirst.name.name}>)に存在する必要があります`,
+                  })
+
+                  firstNumberedNode = null
+                } else if (resultFirst !== result) {
+                  context.report({
+                    node,
+                    message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - ${renderNode(firstNumberedNode, firstNumberedMatcher)} と ${renderNode(node, matcher)} が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります`,
+                  })
+                }
+              }
+            }
+
+            firstNumber = nowNumber
+            firstNumberedNode = node
+            firstNumberedMatcher = matcher
+          } else if (!firstNumberedNode || nowNumber === firstNumber) {
+            firstNumber = nowNumber
+            firstNumberedNode = node
+            firstNumberedMatcher = matcher
+          }
+        }
+      }
+    }
+
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXAttribute: (node) => {
+        if (node.value?.value) {
+          checker(node, node.value.value.match(NUMBERED_TEXT_REGEX))
+        }
+      },
+      JSXText: (node) => {
+        checker(node, node.value.match(NUMBERED_TEXT_REGEX))
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

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

@@ -129,6 +129,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeFieldset><HogeCheckBox /><HogeInput title="any" /></HogeFieldset>' },
     { code: '<FugaSection><HogeInput title="any" /></FugaSection>' },
     { code: '<HogeTextarea title="any" />' },
+    { code: '<HogeComboBox inputAttributes={{ title: "any" }} />' },
+    { code: '<HogeComboBox inputAttributes={{ title }} />' },
     { code: '<Fieldset><HogeRadioButtons /></Fieldset>' },
     { code: '<Fieldset><HogeRadioButtonPanels /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
@@ -154,6 +156,7 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<HogeSelect />', errors: [ { message: noLabeledSelect('HogeSelect') } ] },
     { code: '<HogeInputFile />', errors: [ { message: noLabeledInput('HogeInputFile') } ] },
     { code: '<HogeComboBox />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
+    { code: '<HogeComboBox inputAttributes={{ any }} />', errors: [ { message: noLabeledInput('HogeComboBox') } ] },
     { code: '<HogeDatePicker />', errors: [ { message: noLabeledInput('HogeDatePicker') } ] },
     { code: '<HogeFormControl><Input type="checkbox" /><Input type="checkbox" /></HogeFormControl>', errors: [ { message: invalidPureCheckboxInFormControl('Input') } ] },
     { code: '<HogeFormControl><HogeCheckBox /><Input /></HogeFormControl>', errors: [ { message: invalidMultiInputsInFormControl() } ] },

package/test/a11y-numbered-text-within-ol.js

@@ -0,0 +1,111 @@
+const rule = require('../rules/a11y-numbered-text-within-ol')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+})
+
+ruleTester.run('a11y-numbered-text-within-ol', rule, {
+  valid: [
+    { code: `const HogeOrderedFugaList = styled.ol` },
+    { code: `const HogeOrderedFugaList = styled(HogeOrderedList)` },
+    { code: `<p>1: hoge</p>` },
+    { code: `<p title="2. hoge" />` },
+    { code: `<><p>2: hoge</p><p>1: hoge</p></>` },
+    { code: `<ol><li>abc</li><li>def</li></ol>` },
+    { code: `<OrderedList><li>abc</li><li>def</li></OrderedList>` },
+    { code: `<Select><optgroup><option value="hoge">1. hoge</option><option value="fuga">2. fuga</option></optgroup></Select>` },
+  ],
+  invalid: [
+    { code: `<><p>1: hoge</p><p>2: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `
+      <>
+        <div>
+          1. abc
+        </div>
+        <p>
+          2. def
+        </p>
+      </>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1. abc\` と \`2. def\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>2: hoge</p><p>1: hoge</p><p>2: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><ol><li>2: hoge</li></ol></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` が \`2: hoge\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` } ] },
+    { code: `<><p>1: hoge</p><p title="2. hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`title="2. hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><ol><li>1: hoge</li></ol><p>2: hoge</p></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`2: hoge\` が \`1: hoge\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` } ] },
+    { code: `<><ol><li>1: hoge</li></ol><ol><li>2: hoge</li></ol></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="2: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="2: hoge" /><Hoge any="1: hoge" /><Hoge any="2: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><ol><li><Hoge any="2: hoge" /></li></ol></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` が \`any="2: hoge"\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` } ] },
+    { code: `<><ol><li><Hoge any="1: hoge" /></li></ol><Hoge any="2: hoge" /></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="2: hoge"\` が \`any="1: hoge"\` を囲んでいるol要素内(<ol>)に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol要素内(<ol>)に存在する必要があります` } ] },
+    { code: `<><ol><li><Hoge any="1: hoge" /></li></ol><ol><li><Hoge any="2: hoge" /></li></ol></>`, errors: [ { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `ol 内で連番がテキストとして記述されています。連番はol要素で表現できるため、削除してください。
+ - ol要素のデフォルトで表示される連番のフォーマット、スタイルから変更したい場合、counter-reset と counter-increment を利用してください
+   - 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)` }, { message: `連番を含むテキストが同一のol要素でマークアップされていません。同一のol要素でマークアップすることでリスト内の要素関連性を正しく表せるためマークアップの修正を行ってください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="2: hoge" /><Hoge any="3: hoge" /><Hoge any="4: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="1: hoge"\` と \`any="2: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="2: hoge"\` と \`any="3: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="3: hoge"\` と \`any="4: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><Hoge any="1: hoge" /><Hoge any="3: hoge" /><Hoge any="4: hoge" /><Hoge any="6: hoge" /></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`any="3: hoge"\` と \`any="4: hoge"\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><p>2: hoge</p><p>3: hoge</p><p>4: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`1: hoge\` と \`2: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`2: hoge\` と \`3: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` }, { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>1: hoge</p><p>3: hoge</p><p>4: hoge</p><p>6: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+    { code: `<><p>3: hoge</p><select><option value="hoge">1: hoge</option></select><p>4: hoge</p></>`, errors: [ { message: `連番を含むテキストがol要素でマークアップされていません。ol要素でマークアップすることで関連する順番に意味のある要素を適切にマークアップできるため以下の方法で修正してください。
+ - \`3: hoge\` と \`4: hoge\` が同じol要素内に存在するように修正してください
+ - 上記以外にも関連する連番をふくむ要素が存在する場合、それらも同じol内に存在する必要があります` } ] },
+  ]
+})