eslint-plugin-smarthr 0.3.10 → 0.3.12

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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.3.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.11...v0.3.12) (2023-10-12)
+
+
+### Features
+
+* a11y-heading-in-sectioning-contentに"SectioningContent内のsmarthr-ui/Heading系コンポーネントにtag属性が設定されている場合エラー"になる機能を追加 ([#85](https://github.com/kufu/eslint-plugin-smarthr/issues/85)) ([c34b4f4](https://github.com/kufu/eslint-plugin-smarthr/commit/c34b4f43da89d7baf48c2536dcd381327064ef75))
+* a11y-image-has-alt-attributeでaria-describedbyが設定されている場合、エラーにならないように修正 ([#84](https://github.com/kufu/eslint-plugin-smarthr/issues/84)) ([046ee0f](https://github.com/kufu/eslint-plugin-smarthr/commit/046ee0f082381627343371235102304a3f2a0938))
+
+### [0.3.11](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.10...v0.3.11) (2023-09-27)
+
 ### [0.3.10](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.9...v0.3.10) (2023-09-20)
 
 

package/package.json

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

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

@@ -37,6 +37,7 @@ const UNEXPECTED_NAMES = {
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
+const pageHeadingRegex = /PageHeading$/
 const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
@@ -46,11 +47,15 @@ const noHeadingTagNames = ['span', 'legend']
 const ignoreHeadingCheckParentType = ['Program', 'ExportNamedDeclaration']
 
 const headingMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
+ - 'as="section"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
+  - 要素内のHeadingのレベルが自動計算されるようになります。`
 const rootHeadingMessage = `${headingMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageHeadingMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageHeadingInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+ - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 
 const VariableDeclaratorBareToSHR = (context, node) => {
   if (!node.init) {
@@ -101,6 +106,8 @@ const searchBubbleUp = (node) => {
   return searchBubbleUp(node.parent)
 }
 
+const findTagAttr = (a) => a.name?.name == 'tag'
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -128,34 +135,38 @@ module.exports = {
             message,
           })
         // Headingに明示的にtag属性が設定されており、それらが span or legend の場合はHeading扱いしない
-        } else if (
-          elementName.match(headingRegex) &&
-          !noHeadingTagNames.includes(node.attributes.find((a) => a.name?.name == 'tag')?.value.value)
-        ) {
-          const result = searchBubbleUp(node.parent)
-
-          if (result) {
-            if (elementName.match(/PageHeading$/)) {
-              h1s.push(node)
-
-              if (h1s.length > 1) {
+        } else if (elementName.match(headingRegex)) {
+          const tagAttr = node.attributes.find(findTagAttr)
+
+          if (!noHeadingTagNames.includes(tagAttr?.value.value)) {
+            const result = searchBubbleUp(node.parent)
+            let hit = false
+
+            if (result) {
+              if (elementName.match(pageHeadingRegex)) {
+                h1s.push(node)
+
+                if (h1s.length > 1) {
+                  hit = true
+                  context.report({
+                    node,
+                    message: pageHeadingMessage,
+                  })
+                } else if (result.type !== 'Program') {
+                  hit = true
+                  context.report({
+                    node,
+                    message: pageHeadingInSectionMessage,
+                  })
+                }
+              } else if (result.type === 'Program') {
+                hit = true
                 context.report({
                   node,
-                  message: pageHeadingMessage,
+                  message: rootHeadingMessage,
                 })
-              } else if (result.type !== 'Program') {
-                context.report({
-                  node,
-                  message: pageHeadingInSectionMessage,
-                })
-              }
-            } else if (result.type === 'Program') {
-              context.report({
-                node,
-                message: rootHeadingMessage,
-              })
-            } else {
-              if (sections.find((s) => s === result)) {
+              } else if (sections.find((s) => s === result)) {
+                hit = true
                 context.report({
                   node,
                   message: headingMessage,
@@ -164,6 +175,13 @@ module.exports = {
                 sections.push(result)
               }
             }
+
+            if (!hit && tagAttr) {
+              context.report({
+                node,
+                message: noTagAttrMessage,
+              })
+            }
           }
         }
       },

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

@@ -16,6 +16,7 @@ const UNEXPECTED_NAMES = {
 const REGEX_IMG = /(img|image)$/i // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
 
 const findAltAttr = (a) => a.name?.name === 'alt'
+const findAriaDescribedbyAttr = (a) => a.name?.name === 'aria-describedby'
 const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
 const isWithinSvgJsxElement = (node) => {
   if (
@@ -31,7 +32,9 @@ const isWithinSvgJsxElement = (node) => {
 const MESSAGE_NOT_EXIST_ALT = `画像にはalt属性を指定してください。
  - コンポーネントが画像ではない場合、img or image を末尾に持たない名称に変更してください。
  - ボタンやリンクの先頭・末尾などに設置するアイコンとしての役割を持つ画像の場合、コンポーネント名の末尾を "Icon" に変更してください。
- - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。`
+ - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。
+ - 文字情報が多い場合や画像の前後の画像と同じ内容を設定したい場合などは aria-describedby属性を利用することもできます。
+  - aria-describedby属性を利用する場合でもalt属性を併用することができます。`
 const MESSAGE_NULL_ALT = `画像の情報をテキストにした代替テキスト（'alt'）を設定してください。
  - 装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。`
 
@@ -67,6 +70,7 @@ module.exports = {
 
             if (!alt) {
               if (
+                !node.attributes.find(findAriaDescribedbyAttr) &&
                 (
                   matcher.input !== 'image' ||
                   !isWithinSvgJsxElement(node.parent)

package/test/a11y-heading-in-sectioning-content.js

@@ -13,11 +13,15 @@ const ruleTester = new RuleTester({
 });
 
 const lowerMessage = `smarthr-ui/Headingと紐づく内容の範囲（アウトライン）が曖昧になっています。
- - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。`
+ - smarthr-uiのArticle, Aside, Nav, SectionのいずれかでHeadingコンポーネントと内容をラップしてHeadingに対応する範囲を明確に指定してください。
+ - 'as=\"section\"' などでアウトラインを示している場合、as属性を指定した要素をsmarthr-ui/SectioningFragmentでラップしてください。
+  - 要素内のHeadingのレベルが自動計算されるようになります。`
 const message = `${lowerMessage}
  - Headingをh1にしたい場合(機能名、ページ名などこのページ内でもっとも重要な見出しの場合)、smarthr-ui/PageHeadingを利用してください。その場合はSectionなどでアウトラインを示す必要はありません。`
 const pageMessage = 'smarthr-ui/PageHeading が同一ファイル内に複数存在しています。PageHeadingはh1タグを出力するため最も重要な見出しにのみ利用してください。'
 const pageInSectionMessage = 'smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。'
+const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Section, SectioningFragmentのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+ - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
@@ -88,5 +92,6 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const Hoge = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>', errors: [ { message } ] },
     { code: '<Section><Heading>hoge</Heading><Heading>fuga</Heading></Section>', errors: [ { message: lowerMessage } ] },
     { code: '<Section><PageHeading>hoge</PageHeading></Section>', errors: [ { message: pageInSectionMessage } ] },
+    { code: '<Section><Heading tag="h2">hoge</Heading></Section>', errors: [ { message: noTagAttrMessage } ] },
   ],
 });

package/test/a11y-image-has-alt-attribute.js

@@ -15,7 +15,9 @@ const ruleTester = new RuleTester({
 const messageNotExistAlt = `画像にはalt属性を指定してください。
  - コンポーネントが画像ではない場合、img or image を末尾に持たない名称に変更してください。
  - ボタンやリンクの先頭・末尾などに設置するアイコンとしての役割を持つ画像の場合、コンポーネント名の末尾を "Icon" に変更してください。
- - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。`
+ - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。
+ - 文字情報が多い場合や画像の前後の画像と同じ内容を設定したい場合などは aria-describedby属性を利用することもできます。
+  - aria-describedby属性を利用する場合でもalt属性を併用することができます。`
 const messageNullAlt = `画像の情報をテキストにした代替テキスト（'alt'）を設定してください。
  - 装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。`
 
@@ -37,6 +39,8 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: '<HogeImg alt="hoge" />' },
     { code: '<HogeImage alt="hoge" />' },
     { code: '<HogeIcon />' },
+    { code: '<HogeImage aria-describedby="hoge" />' },
+    { code: '<HogeImage aria-describedby="hoge" alt="fuga" />' },
     { code: '<svg><image /></svg>' },
     { code: '<AnyImg {...hoge} />', options: [{ checkType: 'smart' }] },
   ],