chore: eslintのignore commentを削除 or 不要なように調整する

.eslintrc.js

@@ -15,5 +15,17 @@ module.exports = {
       'type',
     ],
     'smarthr/require-barrel-import': 'off',
+    'smarthr/a11y-anchor-has-href-attribute': [
+      'error',
+      {
+        checkType: 'allow-spread-attributes',
+      }
+    ],
+    'smarthr/a11y-input-has-name-attribute': [
+      'error',
+      {
+        checkType: 'allow-spread-attributes',
+      }
+    ],
   },
 }

packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx

@@ -23,7 +23,6 @@ const Link: FC<{ to: string; children: ReactNode; disabled?: boolean; className?
   className = '',
   ...props
 }) => (
-  // eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute
   <a {...props} {...(disabled ? {} : { href: to })} className={className}>
     {children}
   </a>

packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx

@@ -76,7 +76,6 @@ export const AppNavi: FC<Props & ElementProps> = ({
             if ('href' in button) {
               return (
                 <li key={i} className={listItemStyle}>
-                  {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
                   <AppNaviAnchor {...button} />
                 </li>
               )

packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx

@@ -60,7 +60,7 @@ export function ButtonWrapper({
   if (props.isAnchor) {
     const { anchorRef, elementAs, isAnchor: _, ...others } = props
     const Component = elementAs || 'a'
-    // eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute, jsx-a11y/anchor-has-content
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
     return <Component {...others} className={anchorStyle} ref={anchorRef} />
   } else {
     const { buttonRef, disabled, onClick, ...others } = props

packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx

@@ -116,7 +116,6 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
     return (
       <span className={wrapperStyle}>
         <span className={innerWrapperStyle}>
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input
             {...props}
             data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/ComboBox/VRTMultiCombobox.stories.tsx

@@ -5,8 +5,7 @@ import React from 'react'
 import { InformationPanel } from '../InformationPanel'
 import { Stack } from '../Layout'
 
-// eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation, smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control
-import { MultiCombobox as Multi } from './MultiCombobox.stories'
+import { MultiCombobox as StoriesMultiComboBox } from './MultiCombobox.stories'
 
 import { MultiComboBox } from '.'
 
@@ -23,7 +22,8 @@ export const VRTMultiCombobox: StoryFn = () => (
     <InformationPanel title="VRT 用の Story です">
       Multiコンボボックスのリストを展開して1つ目と2つ目の項目を選択した状態で表示されます
     </InformationPanel>
-    <Multi />
+    {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
+    <StoriesMultiComboBox />
   </Stack>
 )
 
@@ -49,15 +49,16 @@ const playMulti = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
 }
 VRTMultiCombobox.play = playMulti
 
-export const VRTMultiComboboxForcedColors: StoryFn = () => (
+export const VRTForcedColorsMultiCombobox: StoryFn = () => (
   <Stack>
     <InformationPanel title="VRT 用の Story です">
       Chromatic 上では強制カラーモードで表示されます{' '}
     </InformationPanel>
-    <Multi />
+    {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
+    <StoriesMultiComboBox />
   </Stack>
 )
-VRTMultiComboboxForcedColors.play = playMulti
-VRTMultiComboboxForcedColors.parameters = {
+VRTForcedColorsMultiCombobox.play = playMulti
+VRTForcedColorsMultiCombobox.parameters = {
   chromatic: { forcedColors: 'active' },
 }

packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx

@@ -5,8 +5,7 @@ import React from 'react'
 import { InformationPanel } from '../InformationPanel'
 import { Stack } from '../Layout'
 
-// eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation, smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control
-import { SingleCombobox as Single } from './SingleCombobox.stories'
+import { SingleCombobox as StoriesSingleComboBox } from './SingleCombobox.stories'
 
 import { SingleComboBox } from '.'
 
@@ -23,7 +22,8 @@ export const VRTSingleCombobox: StoryFn = () => (
     <InformationPanel title="VRT 用の Story です">
       Singleコンボボックスのリストを展開して1つ目の項目をホバーした状態で表示されます
     </InformationPanel>
-    <Single />
+    {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
+    <StoriesSingleComboBox />
   </Stack>
 )
 const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
@@ -38,15 +38,16 @@ const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) =>
 }
 VRTSingleCombobox.play = playSingle
 
-export const VRTSingleComboboxForcedColors: StoryFn = () => (
+export const VRTForcedColorsSingleCombobox: StoryFn = () => (
   <Stack>
     <InformationPanel title="VRT 用の Story です">
       Chromatic 上では強制カラーモードで表示されます{' '}
     </InformationPanel>
-    <Single />
+    {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
+    <StoriesSingleComboBox />
   </Stack>
 )
-VRTSingleComboboxForcedColors.play = playSingle
-VRTSingleComboboxForcedColors.parameters = {
+VRTForcedColorsSingleCombobox.play = playSingle
+VRTForcedColorsSingleCombobox.parameters = {
   chromatic: { forcedColors: 'active' },
 }

packages/smarthr-ui/src/components/DropZone/DropZone.tsx

@@ -122,7 +122,7 @@ export const DropZone = forwardRef<HTMLInputElement, DropZoneProps & ElementProp
         <Button prefix={<FaFolderOpenIcon />} onClick={onClickButton}>
           {selectButtonLabel}
         </Button>
-        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control, smarthr/a11y-input-has-name-attribute */}
+        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
         <input
           {...props}
           data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx

@@ -85,8 +85,7 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
     )
   }, [label, TriggerIcon, onlyIconTrigger])
   const triggerSuffix = useMemo(
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    () => (onlyIconTrigger ? <></> : <FaCaretDownIcon alt="候補を開く" />),
+    () => (onlyIconTrigger ? undefined : <FaCaretDownIcon alt="候補を開く" />),
     [onlyIconTrigger],
   )
 

packages/smarthr-ui/src/components/Header/HeaderLink.tsx

@@ -15,8 +15,5 @@ const headerLink = tv({
 
 export const HeaderLink: React.FC<Props> = ({ className, ...props }) => {
   const style = headerLink({ className })
-  return (
-    // eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute
-    <TextLink {...props} target="_blank" suffix={null} className={style} />
-  )
+  return <TextLink {...props} target="_blank" suffix={null} className={style} />
 }

packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx

@@ -45,7 +45,10 @@ export const CurrencyInput = forwardRef<HTMLInputElement, Props>(
           return
         }
         innerRef.current.value = formatted
-        onFormatValue && onFormatValue(formatted)
+
+        if (onFormatValue) {
+          onFormatValue(formatted)
+        }
       },
       [onFormatValue],
     )
@@ -76,18 +79,23 @@ export const CurrencyInput = forwardRef<HTMLInputElement, Props>(
         const commaExcluded = innerRef.current.value.replace(/,/g, '')
         formatValue(commaExcluded)
       }
-      onFocus && onFocus(e)
+
+      if (onFocus) {
+        onFocus(e)
+      }
     }
 
     const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
       setIsFocused(false)
-      onBlur && onBlur(e)
+
+      if (onBlur) {
+        onBlur(e)
+      }
     }
 
     const classNames = useClassNames()
 
     return (
-      // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
       <Input
         {...props}
         type="text"

packages/smarthr-ui/src/components/Input/Input.tsx

@@ -150,7 +150,6 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
         {prefix && (
           <span className={affix({ className: 'smarthr-ui-Input-prefix' })}>{prefix}</span>
         )}
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
         <input
           {...props}
           data-smarthr-ui-input="true"
@@ -173,5 +172,7 @@ export const Input = forwardRef<HTMLInputElement, Props & ElementProps>(
 
 const disableWheel = (e: WheelEvent) => {
   // wheel イベントに preventDefault はないため
-  e.target && (e.target as HTMLInputElement).blur()
+  if (e.target) {
+    ;(e.target as HTMLInputElement).blur()
+  }
 }

packages/smarthr-ui/src/components/Input/InputWithTooltip/InputWithTooltip.tsx

@@ -33,7 +33,7 @@ export const InputWithTooltip = forwardRef<HTMLInputElement, Props>(
         tabIndex={-1}
         ariaDescribedbyTarget="inner"
       >
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control */}
+        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
         <Input {...props} width={widthStyle} ref={ref} />
       </Tooltip>
     )

packages/smarthr-ui/src/components/InputFile/InputFile.tsx

@@ -113,7 +113,10 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
 
     const updateFiles = useCallback(
       (newFiles: File[]) => {
-        onChange && onChange(newFiles)
+        if (onChange) {
+          onChange(newFiles)
+        }
+
         setFiles(newFiles)
       },
       [setFiles, onChange],
@@ -169,7 +172,6 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
           </BaseColumn>
         )}
         <span className={inputWrapperStyle}>
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input
             {...props}
             data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/NotificationBar/NotificationBar.stories.tsx

@@ -145,18 +145,12 @@ export const Demo: StoryFn = () => {
       )}
       <StyledWrapper>
         <Stack>
-          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-          <label>
-            <CheckBox name="bold" onChange={() => setBold(!bold)} checked={bold}>
-              bold
-            </CheckBox>
-          </label>
-          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-          <label>
-            <CheckBox name="animate" onChange={() => setAnimate(!animate)} checked={animate}>
-              animate
-            </CheckBox>
-          </label>
+          <CheckBox name="bold" onChange={() => setBold(!bold)} checked={bold}>
+            bold
+          </CheckBox>
+          <CheckBox name="animate" onChange={() => setAnimate(!animate)} checked={animate}>
+            animate
+          </CheckBox>
           <Fieldset title="メッセージの種類">
             <Cluster gap={0.75}>
               {Object.keys(notificationBar.variants.type).map((type) => (

packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx

@@ -78,7 +78,6 @@ export const RadioButton = forwardRef<HTMLInputElement, Props>(
     return (
       <span className={wrapperStyle}>
         <span className={innerWrapperStyle}>
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input
             {...props}
             data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx

@@ -48,7 +48,6 @@ export const RadioButtonPanel: React.FC<Props> = ({ onClick, as, className, ...p
       as={as}
       className={styles}
     >
-      {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
       <RadioButton {...props} ref={innerRef} />
     </Base>
   )

packages/smarthr-ui/src/components/Select/Select.tsx

@@ -131,7 +131,6 @@ const ActualSelect = <T extends string>(
 
   return (
     <span {...wrapperStyleProps}>
-      {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
       <select
         {...props}
         data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/Switch/Switch.tsx

@@ -64,7 +64,6 @@ export const Switch = forwardRef<HTMLInputElement, Props>(
           {children}
         </ActualLabelComponent>
         <span className={wrapper({ className })}>
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
           <input
             {...props}
             type="checkbox"

packages/smarthr-ui/src/components/Table/TdCheckbox.tsx

@@ -37,8 +37,6 @@ export const TdCheckbox = forwardRef<HTMLInputElement, Omit<CheckBoxProps, keyof
       // Td に必要な属性やイベントは不要
       <Td className={wrapperStyle}>
         <Center as="label" verticalCentering className={innerStyle}>
-          {/* 使う側で lint をかけるため無効化 */}
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute  */}
           <CheckBox
             {...others}
             ref={ref}

packages/smarthr-ui/src/components/Table/ThCheckbox.tsx

@@ -38,8 +38,6 @@ export const ThCheckbox = forwardRef<HTMLInputElement, CheckBoxProps & Props>(
       // Th に必要な属性やイベントは不要
       <Th className={wrapperStyle}>
         <Center as="label" verticalCentering className={innerStyle}>
-          {/* 使う側で lint をかけるため無効化 */}
-          {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute  */}
           <CheckBox {...others} ref={ref} className={checkboxStyle} />
           <VisuallyHiddenText>
             {decorators?.checkAllInvisibleLabel?.(CHECK_ALL_INVISIBLE_LABEL) ||

packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx

@@ -44,7 +44,7 @@ export const All: StoryFn = () => (
     </li>
     <li>
       {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
-      <TextLink>onClick も href も指定されていない場合はフォーカスできません</TextLink>
+      <TextLink>onClickもhrefも指定されていない場合はフォーカスできません</TextLink>
       <br />
       <TextLink href={undefined}>hrefがundefinedの場合もフォーカスできません</TextLink>
     </li>

packages/smarthr-ui/src/components/Textarea/Textarea.tsx

@@ -149,8 +149,13 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
 
     const handleChange = useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onChange && onChange(event)
-        maxLetters && debouncedUpdateCount(event.currentTarget.value)
+        if (onChange) {
+          onChange(event)
+        }
+
+        if (maxLetters) {
+          debouncedUpdateCount(event.currentTarget.value)
+        }
       },
       [debouncedUpdateCount, maxLetters, onChange],
     )
@@ -177,7 +182,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         }
 
         setInterimRows(currentRows < maxRows ? currentRows : maxRows)
-        onInput && onInput(e)
+
+        if (onInput) {
+          onInput(e)
+        }
       },
       [autoResize, lineHeight.normal, maxRows, onInput, rows],
     )
@@ -194,7 +202,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     }, [className, count, maxLetters, width])
 
     const body = (
-      // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
       <textarea
         {...props}
         {...textareaStyleProps}

packages/smarthr-ui/src/components/TimePicker/TimePicker.tsx

@@ -46,7 +46,7 @@ export const TimePicker = forwardRef<HTMLInputElement, Props & ElementProps>(
 
     return (
       <span className={wrapperStyle}>
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control */}
+        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
         <input
           {...rest}
           data-smarthr-ui-input="true"

packages/smarthr-ui/src/components/UpwardLink/UpwardLink.tsx

@@ -24,7 +24,6 @@ export const UpwardLink: React.FC<Props> = ({ indent = true, className, elementA
   const style = upwardLink({ indent, className })
   return (
     <div className={style}>
-      {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
       <TextLink {...rest} elementAs={elementAs} prefix={<FaArrowLeftIcon />} />
     </div>
   )