chore: input要素にspread attributesを設定している場合、nameを設定している扱いにする

.eslintrc.js

@@ -21,5 +21,11 @@ module.exports = {
         checkType: 'allow-spread-attributes',
       }
     ],
+    'smarthr/a11y-input-has-name-attribute': [
+      'error',
+      {
+        checkType: 'allow-spread-attributes',
+      }
+    ],
   },
 }

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,12 +49,13 @@ 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

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,12 +38,13 @@ 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

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/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/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/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"