fix(dropdown-select): wire aria details to combobox

packages/components/src/components/dropdown-select/dropdown-select.spec.ts

@@ -49,6 +49,55 @@ describe('DropdownSelect', function () {
     expect(comboboxEl.textContent).toBe('Cedric');
   });
 
+  it('should propagate aria details id to the combobox when no helper text is set', async () => {
+    const ariaDetailsId = 'dropdown-select-extra-details';
+    const page = await newSpecPage({
+      components: [DropdownSelect],
+      html: `
+        <scale-dropdown-select label="My Select" aria-details-id="${ariaDetailsId}">
+          <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>
+          <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>
+        </scale-dropdown-select>`,
+    });
+
+    const selectEl = page.doc.querySelector('scale-dropdown-select');
+    const comboboxEl = selectEl.shadowRoot.querySelector(
+      '[part="combobox"]'
+    ) as HTMLElement;
+
+    expect(comboboxEl.getAttribute('aria-describedby')).toBe(ariaDetailsId);
+    expect(comboboxEl.getAttribute('aria-details')).toBe(ariaDetailsId);
+  });
+
+  it('should keep helper text as aria-describedby and aria details on the combobox', async () => {
+    const ariaDetailsId = 'dropdown-select-extra-details';
+    const page = await newSpecPage({
+      components: [DropdownSelect],
+      html: `
+        <scale-dropdown-select
+          label="My Select"
+          helper-text="Some info"
+          aria-details-id="${ariaDetailsId}"
+        >
+          <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>
+          <scale-dropdown-select-item value="cedric">Cedric</scale-dropdown-select-item>
+        </scale-dropdown-select>`,
+    });
+
+    const selectEl = page.doc.querySelector('scale-dropdown-select');
+    const comboboxEl = selectEl.shadowRoot.querySelector(
+      '[part="combobox"]'
+    ) as HTMLElement;
+    const helperTextEl = selectEl.shadowRoot.querySelector(
+      'scale-helper-text'
+    ) as HTMLElement;
+
+    expect(comboboxEl.getAttribute('aria-describedby')).toBe(
+      `${helperTextEl.id} ${ariaDetailsId}`
+    );
+    expect(comboboxEl.getAttribute('aria-details')).toBe(ariaDetailsId);
+  });
+
   it('should be able to change it`s value via click and emit an event', async () => {
     const page = await newSpecPage({
       components: [DropdownSelect],

packages/components/src/components/dropdown-select/dropdown-select.tsx

@@ -495,8 +495,13 @@ export class DropdownSelect {
     const ValueElement = element.ItemElement;
     const hasEmptyValueElement = element.value === '';
     const helperTextId = `helper-message-${generateUniqueId()}`;
-    const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
-    const ariaDescribedByAttr = { 'aria-describedBy': describedBy };
+    const describedBy = [
+      this.helperText ? helperTextId : null,
+      this.ariaDetailsId,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    const ariaDescribedByAttr = { 'aria-describedby': describedBy };
 
     return (
       <Host>
@@ -528,7 +533,7 @@ export class DropdownSelect {
                     ).value,
                   }
                 : {})}
-              {...ariaDescribedByAttr}
+              {...(describedBy ? ariaDescribedByAttr : {})}
               {...(this.invalid ? { 'aria-invalid': 'true' } : {})}
             >
               <span part="combobox-value">

packages/components/src/html/dropdown-select.html

@@ -28,6 +28,7 @@
       label="Favorite person"
       id="person-select"
       helper-text="not Jerry!"
+      aria-details-id="person-select-extra-details"
       size="small"
       invalid
       value="caspar"
@@ -125,6 +126,9 @@
         >Davin</scale-dropdown-select-item
       >
     </scale-dropdown-select>
+    <div id="person-select-extra-details">
+      Choose a person who can take over the request if needed.
+    </div>
 
     <scale-button id="choose-dario">choose Dario</scale-button>
   </body>