feat: add dev warning for missing field definition labels in attribute-editor (#4337)

Author: Who-is-PS

src/attribute-editor/__tests__/warnings.test.tsx

@@ -0,0 +1,53 @@
+// 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 { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+
+import AttributeEditor from '../../../lib/components/attribute-editor';
+
+jest.mock('@cloudscape-design/component-toolkit', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit'),
+  useContainerQuery: jest.fn().mockImplementation(() => ['m', () => {}]),
+}));
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  warnOnce: jest.fn(),
+}));
+
+afterEach(() => {
+  (warnOnce as jest.Mock).mockReset();
+});
+
+describe('AttributeEditor component', () => {
+  test('warns when a definition has no label', () => {
+    render(
+      <AttributeEditor
+        addButtonText="Add"
+        removeButtonText="Remove"
+        definition={[{ label: 'Key label', control: () => 'key' }]}
+        items={[{}]}
+        gridLayout={[{ rows: [[1]] }]}
+      />
+    );
+    expect(warnOnce).not.toHaveBeenCalled();
+
+    render(
+      <AttributeEditor
+        addButtonText="Add"
+        removeButtonText="Remove"
+        definition={[{ label: 'Key label', control: () => 'key' }, { control: () => 'value' }]}
+        items={[{}]}
+        gridLayout={[{ rows: [[1, 1]] }]}
+      />
+    );
+
+    expect(warnOnce).toHaveBeenCalledTimes(1);
+    expect(warnOnce).toHaveBeenCalledWith(
+      'AttributeEditor',
+      'A `label` should be provided for each field definition. It is used as `aria-label` for accessibility.'
+    );
+  });
+});

src/attribute-editor/internal.tsx

@@ -3,7 +3,7 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
@@ -92,6 +92,16 @@ const InternalAttributeEditor = React.forwardRef(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items, i18nStrings?.itemRemovedAriaLive]);
 
+    for (const def of definition) {
+      if (def && !def.label) {
+        warnOnce(
+          'AttributeEditor',
+          'A `label` should be provided for each field definition. It is used as `aria-label` for accessibility.'
+        );
+        break;
+      }
+    }
+
     if (!gridLayout) {
       gridLayout = gridDefaults[definition.length];
       if (!gridLayout) {