htlee
9dfa8f5422
이슈: "Select element must have an accessible name" — 스크린 리더가 용도를 인지할 수 없어 WCAG 2.1 Level A 위반. 수정: - Select 공통 컴포넌트 타입을 union으로 강제 - aria-label | aria-labelledby | title 중 하나는 TypeScript 컴파일 타임에 필수 - 누락 시 tsc 단계에서 즉시 실패 → 회귀 방지 - 네이티브 <select> 5곳 aria-label 추가: - admin/SystemConfig: 대분류 필터 - detection/RealVesselAnalysis: 해역 필터 - detection/RealGearGroups: 그룹 유형 필터 - detection/ChinaFishing: 관심영역 선택 - detection/GearIdentification: SelectField에 label prop 추가 - 쇼케이스 FormSection Select 샘플에 aria-label 추가 이제 모든 Select 사용처가 접근 이름을 가지며, 향후 신규 Select 사용 시 tsc가 누락을 차단함.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { forwardRef, type SelectHTMLAttributes } from 'react';
|
|
import { inputVariants, type InputSize, type InputState } from '@lib/theme/variants';
|
|
import { cn } from '@lib/utils/cn';
|
|
|
|
/**
|
|
* Select — 네이티브 select 래퍼.
|
|
*
|
|
* **접근성 정책 (타입으로 강제)**:
|
|
* 스크린 리더가 select의 용도를 읽을 수 있도록 아래 3개 중 하나는 필수:
|
|
* - `aria-label`: 짧은 텍스트 라벨 (예: "등급 필터")
|
|
* - `aria-labelledby`: 다른 요소의 ID 참조
|
|
* - `title`: 툴팁 (접근 이름 폴백)
|
|
*
|
|
* 사용 예:
|
|
* <Select aria-label="상태 필터" value={v} onChange={...}>...</Select>
|
|
* <Select title="등급 필터" value={v} onChange={...}>...</Select>
|
|
*/
|
|
|
|
type BaseSelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
|
|
size?: InputSize;
|
|
state?: InputState;
|
|
};
|
|
|
|
type SelectWithAccessibleName =
|
|
| (BaseSelectProps & { 'aria-label': string })
|
|
| (BaseSelectProps & { 'aria-labelledby': string })
|
|
| (BaseSelectProps & { title: string });
|
|
|
|
export type SelectProps = SelectWithAccessibleName;
|
|
|
|
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
|
({ className, size, state, children, ...props }, ref) => {
|
|
return (
|
|
<select
|
|
ref={ref}
|
|
className={cn(inputVariants({ size, state }), 'cursor-pointer', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</select>
|
|
);
|
|
},
|
|
);
|
|
Select.displayName = 'Select';
|