diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.tsx b/packages/ui/src/components/FieldLabel/FieldLabel.tsx index 924ac29464..7656cacc5e 100644 --- a/packages/ui/src/components/FieldLabel/FieldLabel.tsx +++ b/packages/ui/src/components/FieldLabel/FieldLabel.tsx @@ -23,8 +23,15 @@ import { FieldLabelDefinition } from './definition'; export const FieldLabel = forwardRef( (props: FieldLabelProps, ref) => { const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props); - const { classes, label, secondaryLabel, description, htmlFor, id } = - ownProps; + const { + classes, + label, + secondaryLabel, + description, + htmlFor, + id, + descriptionId, + } = ownProps; if (!label) return null; @@ -41,7 +48,9 @@ export const FieldLabel = forwardRef( )} {description && ( -
{description}
+
+ {description} +
)} ); diff --git a/packages/ui/src/components/FieldLabel/definition.ts b/packages/ui/src/components/FieldLabel/definition.ts index dc55c4f2af..399ea9e54d 100644 --- a/packages/ui/src/components/FieldLabel/definition.ts +++ b/packages/ui/src/components/FieldLabel/definition.ts @@ -36,6 +36,7 @@ export const FieldLabelDefinition = defineComponent()({ description: {}, htmlFor: {}, id: {}, + descriptionId: {}, className: {}, }, }); diff --git a/packages/ui/src/components/FieldLabel/types.ts b/packages/ui/src/components/FieldLabel/types.ts index f1d2857e06..ca18c6c8c1 100644 --- a/packages/ui/src/components/FieldLabel/types.ts +++ b/packages/ui/src/components/FieldLabel/types.ts @@ -41,6 +41,11 @@ export type FieldLabelOwnProps = { */ id?: string; + /** + * The id to apply to the description element for aria-describedby + */ + descriptionId?: string; + className?: string; }; diff --git a/packages/ui/src/components/Slider/Slider.tsx b/packages/ui/src/components/Slider/Slider.tsx index a417dfecb0..9aa2d73beb 100644 --- a/packages/ui/src/components/Slider/Slider.tsx +++ b/packages/ui/src/components/Slider/Slider.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { forwardRef, useEffect } from 'react'; +import { forwardRef, useEffect, useId } from 'react'; import { Slider as AriaSlider, SliderTrack, @@ -36,37 +36,35 @@ function SliderImpl( const { classes, className, label, secondaryLabel, description, isRequired } = ownProps; - const ariaLabel = restProps['aria-label']; - const ariaLabelledBy = restProps['aria-labelledby']; - const defaultValue = restProps.defaultValue; - const value = restProps.value; + const labelId = useId(); + const descriptionId = useId(); useEffect(() => { - if (!label && !ariaLabel && !ariaLabelledBy) { + if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) { console.warn( 'Slider requires either a visible label, aria-label, or aria-labelledby for accessibility', ); } - }, [label, ariaLabel, ariaLabelledBy]); + }, [label, restProps]); const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null); return ( {label && (
{({ state }) => diff --git a/packages/ui/src/components/Slider/types.ts b/packages/ui/src/components/Slider/types.ts index d0d0667e42..b254519fce 100644 --- a/packages/ui/src/components/Slider/types.ts +++ b/packages/ui/src/components/Slider/types.ts @@ -29,18 +29,4 @@ export interface SliderOwnProps { /** @public */ export interface SliderProps extends Omit, 'children' | 'className'>, - Omit< - FieldLabelProps, - | 'htmlFor' - | 'id' - | 'className' - | 'defaultValue' - | 'onChange' - | 'slot' - | 'style' - | 'label' - | 'secondaryLabel' - | 'description' - | 'isRequired' - >, SliderOwnProps {}