fix: fieldsetとlegendが正しく紐づく様になっているため、不要なaria-labelledby関係の属性を削除する

kufu · Jan 8, 2025 · a7699ab · a7699ab
1 parent ccd83a8
commit a7699ab
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/packages/smarthr-ui/src/components/Fieldset/Fieldset.tsx b/packages/smarthr-ui/src/components/Fieldset/Fieldset.tsx
@@ -2,6 +2,6 @@ import React, { ComponentProps } from 'react'
 
 import { ActualFormControl } from '../FormControl/FormControl'
 
-export const Fieldset: React.FC<Omit<ComponentProps<typeof ActualFormControl>, 'as'>> = (props) => (
-  <ActualFormControl {...props} as="fieldset" />
-)
+export const Fieldset: React.FC<
+  Omit<ComponentProps<typeof ActualFormControl>, 'as' | 'htmlFor' | 'labelId'>
+> = (props) => <ActualFormControl {...props} as="fieldset" />
diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -259,7 +259,6 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
       {...props}
       as={as}
       gap={innerMargin ?? 0.5}
-      aria-labelledby={isRoleGroup ? managedLabelId : undefined}
       aria-describedby={isRoleGroup && describedbyIds ? describedbyIds : undefined}
       className={wrapperStyle}
     >
@@ -336,11 +335,7 @@ const TitleCluster = React.memo<
 
     return (
       <>
-        {isRoleGroup && (
-          <VisuallyHiddenText id={managedLabelId} as="legend">
-            {innerText(body)}
-          </VisuallyHiddenText>
-        )}
+        {isRoleGroup && <VisuallyHiddenText as="legend">{innerText(body)}</VisuallyHiddenText>}
         <Cluster
           justify="space-between"
           // HINT: legendが存在する場合、Stackの余白が狂ってしまう&常にこのClusterはUI上先頭になるため、margin-topを0固定する