Fix review comments

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>

packages/ui/src/components/FieldLabel/FieldLabel.tsx

@@ -23,8 +23,15 @@ import { FieldLabelDefinition } from './definition';
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
   (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<HTMLDivElement, FieldLabelProps>(
           </Label>
         )}
         {description && (
-          <div className={classes.description}>{description}</div>
+          <div className={classes.description} id={descriptionId}>
+            {description}
+          </div>
         )}
       </div>
     );

packages/ui/src/components/FieldLabel/definition.ts

@@ -36,6 +36,7 @@ export const FieldLabelDefinition = defineComponent<FieldLabelOwnProps>()({
     description: {},
     htmlFor: {},
     id: {},
+    descriptionId: {},
     className: {},
   },
 });

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;
 };
 

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<T extends number | number[]>(
   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 (
     <AriaSlider
       className={clsx(classes.root, className)}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      defaultValue={defaultValue}
-      value={value}
+      aria-labelledby={label ? labelId : undefined}
+      aria-describedby={label && description ? descriptionId : undefined}
       {...restProps}
       ref={ref}
     >
       {label && (
         <div className={classes.header}>
           <FieldLabel
+            id={labelId}
             label={label}
             secondaryLabel={secondaryLabelText}
             description={description}
+            descriptionId={description ? descriptionId : undefined}
           />
           <SliderOutput className={classes.output}>
             {({ state }) =>

packages/ui/src/components/Slider/types.ts

@@ -29,18 +29,4 @@ export interface SliderOwnProps {
 /** @public */
 export interface SliderProps<T extends number | number[]>
   extends Omit<AriaSliderProps<T>, 'children' | 'className'>,
-    Omit<
-      FieldLabelProps,
-      | 'htmlFor'
-      | 'id'
-      | 'className'
-      | 'defaultValue'
-      | 'onChange'
-      | 'slot'
-      | 'style'
-      | 'label'
-      | 'secondaryLabel'
-      | 'description'
-      | 'isRequired'
-    >,
     SliderOwnProps {}