[WNMGDS-2779] Replace dropdown label with div (#3099)

* replace dropdown label with div.

* remove redundant prop on dropdown label

* re-implement the id prop.

* change root id name to exclude word button.

packages/design-system/src/components/Dropdown/Dropdown.tsx

@@ -9,7 +9,6 @@ import mergeRefs from '../utilities/mergeRefs';
 import useClickOutsideHandler from '../utilities/useClickOutsideHandler';
 import useId from '../utilities/useId';
 import useAutofocus from '../utilities/useAutoFocus';
-import { Label } from '../Label';
 import { SvgIcon } from '../Icons';
 import { getFirstOptionValue, isOptGroup, parseChildren, validateProps } from './utils';
 import { Item, Section, useSelectState } from '../react-aria'; // from react-stately
@@ -139,7 +138,7 @@ export type DropdownProps = BaseDropdownProps &
 export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
   validateProps(props);
 
-  const id = useId('dropdown__button--', props.id);
+  const id = useId('dropdown--', props.id);
   const buttonContentId = `${id}__button-content`;
   const menuId = `${id}__menu`;
 
@@ -246,8 +245,11 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
 
   const labelProps = {
     ...useSelectProps.labelProps,
-    ...useLabelProps({ ...props, id }),
-    fieldId: id,
+    ...useLabelProps({
+      ...props,
+      id,
+      labelClassName: classNames('ds-c-label', 'ds-c-dropdown__label', props.labelClassName),
+    }),
   };
 
   const buttonProps = {
@@ -286,7 +288,8 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
       className={classNames('ds-c-dropdown', className, state.isOpen && 'ds-c-dropdown--open')}
       ref={wrapperRef}
     >
-      <Label {...labelProps} />
+      {/* `<div>` is used instead of `<label>` to satisfy a11y issue. Because dropdown is a `<button>`, a `<label>` is inappropriate to use with it. */}
+      <div {...labelProps} />
       {hintElement}
       {topError}
       <HiddenSelect

packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -137,12 +137,12 @@ exports[`Dropdown dropdown matches snapshot 1`] = `
 <div
   class="ds-c-dropdown"
 >
-  <label
-    class="ds-c-label"
+  <div
+    class="ds-c-label ds-c-dropdown__label"
     id="static-id__label"
   >
     Select an option
-  </label>
+  </div>
   <div
     aria-hidden="true"
     data-a11y-ignore="aria-hidden-focus"

packages/design-system/src/styles/components/_Dropdown.scss

@@ -28,6 +28,13 @@
   }
 }
 
+// This class is applied to a `<div>` that acts as a label
+// Because the dropdown is a `<button>` element, a `<label>` element
+// breaks for some a11y checkers. Using a `<div>` is correct.
+.ds-c-dropdown__label {
+  margin-block: 1.5em 0;
+}
+
 .ds-c-dropdown__label-text {
   max-width: 100%;
   overflow: hidden;