eslint-plugin-smarthr 0.3.20 → 0.3.21

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.21](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.20...v0.3.21) (2024-01-16)
+
+
+### Features
+
+* a11y-heading-in-sectioning-content の Layout[as={sectioningContentTag}] への対応 ([#91](https://github.com/kufu/eslint-plugin-smarthr/issues/91)) ([62bb051](https://github.com/kufu/eslint-plugin-smarthr/commit/62bb0510d0e91db063a9bd09dab4fbeff6a2844e))
+
+
+### Bug Fixes
+
+* a11y-delegate-element-has-role-presentationでインタラクティブな要素のチェック処理を厳密に行う ([#100](https://github.com/kufu/eslint-plugin-smarthr/issues/100)) ([e715bff](https://github.com/kufu/eslint-plugin-smarthr/commit/e715bff6a95ab2cbf3652b44f999ad4c98ccb621))
+* import時のrenameの際、typeの場合はチェックを無視する設定を追加 ([#99](https://github.com/kufu/eslint-plugin-smarthr/issues/99)) ([cae899f](https://github.com/kufu/eslint-plugin-smarthr/commit/cae899ff2b012e93b2651c971034553cefeef10e))
+
 ### [0.3.20](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.19...v0.3.20) (2024-01-02)
 
 ### [0.3.19](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.18...v0.3.19) (2024-01-01)

package/libs/format_styled_components.js

@@ -27,12 +27,13 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
   }) : []
 
 
-  const checkImportedNameToLocalName = (node, base, extended) => {
+  const checkImportedNameToLocalName = (node, base, extended, mode) => {
     entriesesTagNames.forEach(([b, e]) => {
       if (base.match(b) && !extended.match(e)) {
         context.report({
           node,
-          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
+          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください。
+ - ${base}が型の場合、'${mode} type { ${base} as ${extended} }' もしくは '${mode} { type ${base} as ${extended} }' のように明示的に型であることを宣言してください。名称変更が不要になります`,
         });
       }
     })
@@ -42,11 +43,13 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
     ImportDeclaration: (node) => {
       checkImportStyledComponents(node, context)
 
-      node.specifiers.forEach((s) => {
-        if (s.imported && s.imported.name !== s.local.name) {
-          checkImportedNameToLocalName(node, s.imported.name, s.local.name)
-        }
-      })
+      if (node.importKind !== 'type') {
+        node.specifiers.forEach((s) => {
+          if (s.importKind !== 'type' && s.imported && s.imported.name !== s.local.name) {
+            checkImportedNameToLocalName(node, s.imported.name, s.local.name, 'import')
+          }
+        })
+      }
     },
     VariableDeclarator: (node) => {
       if (!node.init) {

package/package.json

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

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

@@ -14,6 +14,9 @@ const EXPECTED_NAMES = {
   'SegmentedControl$': 'SegmentedControl$',
   'RightFixedNote$': 'RightFixedNote$',
   'FieldSet$': 'FieldSet$',
+  'Fieldset$': 'Fieldset$',
+  'FormControl$': 'FormControl$',
+  'FormGroup$': 'FormGroup$',
   '(b|B)utton$': 'Button$',
   'Anchor$': 'Anchor$',
   'Link$': 'Link$',
@@ -56,7 +59,7 @@ const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex,
    - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
    - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
 }
-const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs) => `${nodeName}に 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs, roleMean) => `${nodeName}に 'role="${roleMean}"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
  - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
    - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
  - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
@@ -117,7 +120,7 @@ module.exports = {
         const nodeName = node.name.name || '';
 
         let onAttrs = []
-        let isMeanedRole = false
+        let roleMean = undefined
         let isRolePresentation = false
 
         node.attributes.forEach((a) => {
@@ -129,9 +132,10 @@ module.exports = {
             const v = a.value?.value || ''
 
             if (v === 'presentation') {
-              isMeanedRole = isRolePresentation = true
+              isRolePresentation = true
+              roleMean = v
             } else if (v.match(MEANED_ROLE_REGEX)) {
-              isMeanedRole = true
+              roleMean = v
             }
           }
         })
@@ -147,16 +151,80 @@ module.exports = {
           // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
           // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
           // エラーなどには表示しない
-          if (!isMeanedRole) {
+          if (!roleMean) {
             context.report({
               node,
               message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
             });
-          } else if (!node.parent.children.find(isHasInteractive)) {
-            context.report({
-              node,
-              message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs)
-            })
+          // HINT: role='slider' はインタラクティブな要素扱いとするため除外する
+          } else if (roleMean !== 'slider') {
+            const searchChildren = (n) => {
+              switch (n.type) {
+                case 'BinaryExpression':
+                case 'Identifier':
+                case 'JSXEmptyExpression':
+                case 'JSXText':
+                case 'Literal':
+                case 'VariableDeclaration':
+                  // これ以上childrenが存在しないため終了
+                  return false
+                case 'JSXAttribute':
+                  return n.value ? searchChildren(n.value) : false
+                case 'LogicalExpression':
+                  return searchChildren(n.right)
+                case 'ArrowFunctionExpression':
+                  return searchChildren(n.body)
+                case 'MemberExpression':
+                  return searchChildren(n.property)
+                case 'ReturnStatement':
+                case 'UnaryExpression':
+                  return searchChildren(n.argument)
+                case 'ChainExpression':
+                case 'JSXExpressionContainer':
+                  return searchChildren(n.expression)
+                case 'BlockStatement':
+                  return forInSearchChildren(n.body)
+                case 'ConditionalExpression':
+                  return searchChildren(n.consequent) || searchChildren(n.alternate)
+                case 'CallExpression': {
+                  return forInSearchChildren(n.arguments)
+                }
+                case 'JSXFragment':
+                  break
+                case 'JSXElement': {
+                  const name = n.openingElement.name.name || ''
+
+                  if (name.match(interactiveComponentRegex)) {
+                    return true
+                  }
+
+                  if (forInSearchChildren(n.openingElement.attributes)) {
+                    return true
+                  }
+
+                  break
+                }
+              }
+
+              return n.children ? forInSearchChildren(n.children) : false
+            }
+
+            const forInSearchChildren = (ary) => {
+              for (const i in ary) {
+                if (searchChildren(ary[i])) {
+                  return true
+                }
+              }
+
+              return false
+            }
+
+            if (!forInSearchChildren(node.parent.children)) {
+              context.report({
+                node,
+                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs, roleMean)
+              })
+            }
           }
         }
       },

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

@@ -10,6 +10,10 @@ const EXPECTED_NAMES = {
   'Nav$': 'Nav$',
   'Section$': 'Section$',
   'ModelessDialog$': 'ModelessDialog$',
+  'Center$': 'Center$',
+  'Reel$': 'Reel$',
+  'Sidebar$': 'Sidebar$',
+  'Stack$': 'Stack$',
 }
 
 const unexpectedMessageTemplate = `{{extended}} は smarthr-ui/{{expected}} をextendすることを期待する名称になっています
@@ -34,6 +38,10 @@ const UNEXPECTED_NAMES = {
     '(Section)$',
     unexpectedMessageTemplate,
   ],
+  'Center$': '(Center)$',
+  'Reel$': '(Reel)$',
+  'Sidebar$': '(Sidebar)$',
+  'Stack$': '(Stack)$',
 }
 
 const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
@@ -42,6 +50,9 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack)$/
+
+const includeSectioningAsAttr = ({name: { name }, value: { value }}) => name === 'as' && value.match(bareTagRegex)
 
 const noHeadingTagNames = ['span', 'legend']
 const ignoreHeadingCheckParentType = ['Program', 'ExportNamedDeclaration']
@@ -89,7 +100,10 @@ const reportMessageBareToSHR = (tagName, visibleExample) => {
 const searchBubbleUp = (node) => {
   if (
     node.type === 'Program' ||
-    node.type === 'JSXElement' && node.openingElement.name.name?.match(sectioningRegex)
+    node.type === 'JSXElement' && node.openingElement.name.name && (
+      node.openingElement.name.name.match(sectioningRegex) ||
+      node.openingElement.name.name.match(layoutComponentRegex) && node.openingElement.attributes.some(includeSectioningAsAttr)
+    )
   ) {
     return node
   }

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

@@ -12,7 +12,7 @@ const ruleTester = new RuleTester({
   },
 });
 
-const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$)/'
+const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$)/'
 const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
   const onAttrsText = onAttrs.join(', ')
 
@@ -55,6 +55,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<Wrapper onClick={any} role="presentation">{any ? <AnyButton /> : null}</Wrapper>' },
     { 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>' },
   ],
   invalid: [
     { code: '<Input role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Input') } ] },
@@ -64,7 +65,7 @@ ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
     { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: messageRolePresentationNotHasInteractive('div', ['onClick', 'onSubmit']) } ] },
     { code: '<div onClick={any}><Link /></div>', errors: [ { message: messageNonInteractiveEventHandler('div', ['onClick']) } ] },
     { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
-    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/') } ] },
+    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|Switch$|SegmentedControl$|RightFixedNote$|FieldSet$|Fieldset$|FormControl$|FormGroup$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|FormDialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/') } ] },
     { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick', 'onChange']) } ] },
     { code: '<Wrapper onClick={any}>{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
   ],

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

@@ -46,11 +46,20 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const FugaNav = styled(HogeNav)``' },
     { code: 'const FugaSection = styled(HogeSection)``' },
     { code: "const FugaHeading = styled(Heading).attrs(() => ({ type: 'blockTitle' }))``" },
+    { code: 'const FugaCenter = styled(HogeCenter)``' },
+    { code: 'const FugaReel = styled(HogeReel)``' },
+    { code: 'const FugaSidebar = styled(HogeSidebar)``' },
+    { code: 'const FugaStack = styled(HogeStack)``' },
     { code: '<PageHeading>hoge</PageHeading>' },
     { code: '<Section><Heading>hoge</Heading></Section>' },
     { code: '<><Section><Heading>hoge</Heading></Section><Section><Heading>fuga</Heading></Section></>' },
     { code: 'const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
     { code: 'export const HogeHeading = () => <FugaHeading anyArg={abc}>hoge</FugaHeading>' },
+    { code: '<Center as="section"><div><Heading>hoge</Heading></div></Center>' },
+    { code: '<Cluster as="section"><div><Heading>hoge</Heading></div></Cluster>' },
+    { code: '<Reel as="aside"><div><Heading>hoge</Heading></div></Reel>' },
+    { code: '<Sidebar as="nav"><div><Heading>hoge</Heading></div></Sidebar>' },
+    { code: '<Stack as="section"><div><Heading>hoge</Heading></div></Stack>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -74,6 +83,10 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: 'const Fuga = styled(HogeAside)``', errors: [ { message: `Fugaを正規表現 "/Aside$/" がmatchする名称に変更してください` } ] },
     { code: 'const Fuga = styled(HogeNav)``', errors: [ { message: `Fugaを正規表現 "/Nav$/" がmatchする名称に変更してください` } ] },
     { code: 'const Fuga = styled(HogeSection)``', errors: [ { message: `Fugaを正規表現 "/Section$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeCenter)``', errors: [ { message: `Fugaを正規表現 "/Center$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeReel)``', errors: [ { message: `Fugaを正規表現 "/Reel$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeSidebar)``', errors: [ { message: `Fugaを正規表現 "/Sidebar$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Fuga = styled(HogeStack)``', errors: [ { message: `Fugaを正規表現 "/Stack$/" がmatchする名称に変更してください` } ] },
     { code: 'const StyledArticle = styled.article``', errors: [ { message: `"article"を利用せず、smarthr-ui/Articleを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.article" -> "styled(Article)")` } ] },
     { code: 'const StyledAside = styled.aside``', errors: [ { message: `"aside"を利用せず、smarthr-ui/Asideを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.aside" -> "styled(Aside)")` } ] },
     { code: 'const StyledNav = styled.nav``', errors: [ { message: `"nav"を利用せず、smarthr-ui/Navを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.nav" -> "styled(Nav)")` } ] },