diff --git a/.eslintrc.js b/.eslintrc.js index 2126776d2c..34976f12e5 100644 --- a/.eslintrc.js +++ b/.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', + } + ], }, } diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx index 700b5de774..e1f3f190dc 100644 --- a/packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx +++ b/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 {children} diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx index 58c2a1b135..2c4c8a9556 100644 --- a/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx +++ b/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx @@ -76,7 +76,6 @@ export const AppNavi: FC = ({ if ('href' in button) { return (
  • - {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */}
  • ) diff --git a/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx b/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx index 54bdfd6637..98d3efc0de 100644 --- a/packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx +++ b/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 } else { const { buttonRef, disabled, onClick, ...others } = props diff --git a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx index 328b620ebf..255e3d2adb 100644 --- a/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx +++ b/packages/smarthr-ui/src/components/CheckBox/CheckBox.tsx @@ -116,7 +116,6 @@ export const CheckBox = forwardRef( return ( - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} ( Multiコンボボックスのリストを展開して1つ目と2つ目の項目を選択した状態で表示されます - + {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} + ) @@ -49,15 +49,16 @@ const playMulti = async ({ canvasElement }: { canvasElement: HTMLElement }) => { } VRTMultiCombobox.play = playMulti -export const VRTMultiComboboxForcedColors: StoryFn = () => ( +export const VRTForcedColorsMultiCombobox: StoryFn = () => ( Chromatic 上では強制カラーモードで表示されます{' '} - + {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} + ) -VRTMultiComboboxForcedColors.play = playMulti -VRTMultiComboboxForcedColors.parameters = { +VRTForcedColorsMultiCombobox.play = playMulti +VRTForcedColorsMultiCombobox.parameters = { chromatic: { forcedColors: 'active' }, } diff --git a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx index b3ec20a81e..1271b59c55 100644 --- a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx +++ b/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 = () => ( Singleコンボボックスのリストを展開して1つ目の項目をホバーした状態で表示されます - + {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} + ) 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 = () => ( Chromatic 上では強制カラーモードで表示されます{' '} - + {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} + ) -VRTSingleComboboxForcedColors.play = playSingle -VRTSingleComboboxForcedColors.parameters = { +VRTForcedColorsSingleCombobox.play = playSingle +VRTForcedColorsSingleCombobox.parameters = { chromatic: { forcedColors: 'active' }, } diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx index 9ce688b61a..9d45d25e25 100644 --- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx +++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx @@ -122,7 +122,7 @@ export const DropZone = forwardRef} onClick={onClickButton}> {selectButtonLabel} - {/* 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 */} = ({ ) }, [label, TriggerIcon, onlyIconTrigger]) const triggerSuffix = useMemo( - // eslint-disable-next-line react/jsx-no-useless-fragment - () => (onlyIconTrigger ? <> : ), + () => (onlyIconTrigger ? undefined : ), [onlyIconTrigger], ) diff --git a/packages/smarthr-ui/src/components/Header/HeaderLink.tsx b/packages/smarthr-ui/src/components/Header/HeaderLink.tsx index 68d72cfa8a..6eee6a6a59 100644 --- a/packages/smarthr-ui/src/components/Header/HeaderLink.tsx +++ b/packages/smarthr-ui/src/components/Header/HeaderLink.tsx @@ -15,8 +15,5 @@ const headerLink = tv({ export const HeaderLink: React.FC = ({ className, ...props }) => { const style = headerLink({ className }) - return ( - // eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute - - ) + return } diff --git a/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx b/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx index 98dd255414..276cb300c5 100644 --- a/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx +++ b/packages/smarthr-ui/src/components/Input/CurrencyInput/CurrencyInput.tsx @@ -45,7 +45,10 @@ export const CurrencyInput = forwardRef( return } innerRef.current.value = formatted - onFormatValue && onFormatValue(formatted) + + if (onFormatValue) { + onFormatValue(formatted) + } }, [onFormatValue], ) @@ -76,18 +79,23 @@ export const CurrencyInput = forwardRef( const commaExcluded = innerRef.current.value.replace(/,/g, '') formatValue(commaExcluded) } - onFocus && onFocus(e) + + if (onFocus) { + onFocus(e) + } } const handleBlur = (e: FocusEvent) => { setIsFocused(false) - onBlur && onBlur(e) + + if (onBlur) { + onBlur(e) + } } const classNames = useClassNames() return ( - // eslint-disable-next-line smarthr/a11y-input-has-name-attribute ( {prefix && ( {prefix} )} - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} ( const disableWheel = (e: WheelEvent) => { // wheel イベントに preventDefault はないため - e.target && (e.target as HTMLInputElement).blur() + if (e.target) { + ;(e.target as HTMLInputElement).blur() + } } diff --git a/packages/smarthr-ui/src/components/Input/InputWithTooltip/InputWithTooltip.tsx b/packages/smarthr-ui/src/components/Input/InputWithTooltip/InputWithTooltip.tsx index 88ffbcf510..f0392cf8f0 100644 --- a/packages/smarthr-ui/src/components/Input/InputWithTooltip/InputWithTooltip.tsx +++ b/packages/smarthr-ui/src/components/Input/InputWithTooltip/InputWithTooltip.tsx @@ -33,7 +33,7 @@ export const InputWithTooltip = forwardRef( 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 */} ) diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx index 3164744a2a..666de25cb8 100644 --- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx +++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx @@ -113,7 +113,10 @@ export const InputFile = forwardRef( const updateFiles = useCallback( (newFiles: File[]) => { - onChange && onChange(newFiles) + if (onChange) { + onChange(newFiles) + } + setFiles(newFiles) }, [setFiles, onChange], @@ -169,7 +172,6 @@ export const InputFile = forwardRef( )} - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} { )} - {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - - {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - + setBold(!bold)} checked={bold}> + bold + + setAnimate(!animate)} checked={animate}> + animate +
    {Object.keys(notificationBar.variants.type).map((type) => ( diff --git a/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx b/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx index 05e2adbf75..c610735e7b 100644 --- a/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx +++ b/packages/smarthr-ui/src/components/RadioButton/RadioButton.tsx @@ -78,7 +78,6 @@ export const RadioButton = forwardRef( return ( - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} = ({ onClick, as, className, ...p as={as} className={styles} > - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} ) diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx index fc9e74a3be..d7a361f3e1 100644 --- a/packages/smarthr-ui/src/components/Select/Select.tsx +++ b/packages/smarthr-ui/src/components/Select/Select.tsx @@ -131,7 +131,6 @@ const ActualSelect = ( return ( - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
    - {/* 使う側で lint をかけるため無効化 */} - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} ( // Th に必要な属性やイベントは不要
    - {/* 使う側で lint をかけるため無効化 */} - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} {decorators?.checkAllInvisibleLabel?.(CHECK_ALL_INVISIBLE_LABEL) || diff --git a/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx b/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx index 3708371c96..95ed0df189 100644 --- a/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx +++ b/packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx @@ -44,7 +44,7 @@ export const All: StoryFn = () => (
  • {/* eslint-disable-next-line smarthr/a11y-anchor-has-href-attribute */} - onClick も href も指定されていない場合はフォーカスできません + onClickもhrefも指定されていない場合はフォーカスできません
    hrefがundefinedの場合もフォーカスできません
  • diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx index abb86ac062..f4dd2dff7e 100644 --- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx +++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx @@ -149,8 +149,13 @@ export const Textarea = forwardRef( const handleChange = useCallback( (event: React.ChangeEvent) => { - 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( } 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( }, [className, count, maxLetters, width]) const body = ( - // eslint-disable-next-line smarthr/a11y-input-has-name-attribute