chore: Add ariaLabelledBy to InternalDragHandle component (#3431)

Co-authored-by: Johannes Weber <[email protected]>

Author: johannes-weber

src/internal/components/drag-handle/__tests__/drag-handle-button.test.tsx

@@ -42,6 +42,17 @@ test('assigns aria label and aria description', () => {
   expect(document.querySelector(`.${styles.handle}`)).toHaveAccessibleDescription('handle');
 });
 
+test('assigns aria-labelledby attribute', () => {
+  render(
+    <div>
+      <div id="label-element">custom label</div>
+      <DragHandleButton ariaLabelledBy="label-element" />
+    </div>
+  );
+  expect(document.querySelector(`.${styles.handle}`)).toHaveAttribute('aria-labelledby', 'label-element');
+  expect(document.querySelector(`.${styles.handle}`)).toHaveAccessibleName('custom label');
+});
+
 test('has role="button" by default', () => {
   render(<DragHandleButton ariaLabel="drag handle" />);
 

src/internal/components/drag-handle/__tests__/drag-handle.test.tsx

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import InternalDragHandle from '../../../../../lib/components/internal/components/drag-handle/index.js';
+
+import styles from '../../../../../lib/components/internal/components/drag-handle/styles.css.js';
+
+test('passes ariaLabelledBy to DragHandleButton', () => {
+  render(
+    <div>
+      <div id="label-element">custom label</div>
+      <InternalDragHandle ariaLabelledBy="label-element" />
+    </div>
+  );
+
+  expect(document.querySelector(`.${styles.handle}`)).toHaveAttribute('aria-labelledby', 'label-element');
+  expect(document.querySelector(`.${styles.handle}`)).toHaveAccessibleName('custom label');
+});

src/internal/components/drag-handle/button.tsx

@@ -18,6 +18,7 @@ const DragHandleButton = forwardRef(
       size = 'normal',
       className,
       ariaLabel,
+      ariaLabelledBy,
       ariaDescribedby,
       ariaValue,
       disabled,
@@ -62,6 +63,7 @@ const DragHandleButton = forwardRef(
           disabled && styles['handle-disabled']
         )}
         aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedby}
         aria-disabled={disabled}
         aria-valuemax={ariaValue?.valueMax}

src/internal/components/drag-handle/index.tsx

@@ -15,6 +15,7 @@ const InternalDragHandle = forwardRef(
       variant,
       size,
       ariaLabel,
+      ariaLabelledBy,
       ariaDescribedby,
       tooltipText,
       ariaValue,
@@ -41,6 +42,7 @@ const InternalDragHandle = forwardRef(
           variant={variant}
           size={size}
           ariaLabel={ariaLabel}
+          ariaLabelledBy={ariaLabelledBy}
           ariaDescribedby={ariaDescribedby}
           ariaValue={ariaValue}
           disabled={disabled}

src/internal/components/drag-handle/interfaces.ts

@@ -10,6 +10,7 @@ export interface DragHandleProps {
   variant?: DragHandleProps.Variant;
   size?: DragHandleProps.Size;
   ariaLabel?: string;
+  ariaLabelledBy?: string;
   ariaDescribedby?: string;
   ariaValue?: DragHandleProps.AriaValue;
   disabled?: boolean;