feat(select): Select foundation preserves describedby elements on validate

PiperOrigin-RevId: 512630101

Author: bbritto

packages/mdc-select/foundation.ts

@@ -93,6 +93,7 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
 
   private readonly leadingIcon: MDCSelectIconFoundation|undefined;
   private readonly helperText: MDCSelectHelperTextFoundation|undefined;
+  private readonly ariaDescribedbyIds: string[];
 
   // Disabled state
   private disabled = false;
@@ -121,6 +122,11 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
 
     this.leadingIcon = foundationMap.leadingIcon;
     this.helperText = foundationMap.helperText;
+    this.ariaDescribedbyIds =
+        this.adapter.getSelectAnchorAttr(strings.ARIA_DESCRIBEDBY)
+            ?.trim()
+            ?.split(' ') ||
+        [];
   }
 
   /** Returns the index of the currently selected menu item, or -1 if none. */
@@ -480,11 +486,20 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
     const helperTextId = this.helperText.getId();
 
     if (helperTextVisible && helperTextId) {
-      this.adapter.setSelectAnchorAttr(strings.ARIA_DESCRIBEDBY, helperTextId);
+      this.adapter.setSelectAnchorAttr(
+          strings.ARIA_DESCRIBEDBY, this.ariaDescribedbyIds.join(' '));
     } else {
-      // Needed because screenreaders will read labels pointed to by
-      // `aria-describedby` even if they are `aria-hidden`.
-      this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);
+      // Remove helptext from list of describedby ids. Needed because
+      // screenreaders will read labels pointed to by `aria-describedby` even if
+      // they are `aria-hidden`.
+      if (this.ariaDescribedbyIds.length > 1) {
+        this.adapter.setSelectAnchorAttr(
+            strings.ARIA_DESCRIBEDBY,
+            this.ariaDescribedbyIds.filter(id => id !== helperTextId)
+                .join(' '));
+      } else {  // helper text is the only describedby element
+        this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);
+      }
     }
   }
 

packages/mdc-select/test/foundation.test.ts

@@ -83,7 +83,8 @@ describe('MDCSelectFoundation', () => {
     ]);
   });
 
-  function setupTest(hasLeadingIcon = true, hasHelperText = false) {
+  function setupTest(
+      hasLeadingIcon = true, hasHelperText = false, describedbyElements = '') {
     const mockAdapter = createMockAdapter(MDCSelectFoundation);
     const leadingIcon = jasmine.createSpyObj('leadingIcon', [
       'setDisabled', 'setAriaLabel', 'setContent', 'registerInteractionHandler',
@@ -107,6 +108,8 @@ describe('MDCSelectFoundation', () => {
     mockAdapter.getMenuItemTextAtIndex.withArgs(0).and.returnValue('foo');
     mockAdapter.getMenuItemTextAtIndex.withArgs(1).and.returnValue('bar');
     mockAdapter.getMenuItemCount.and.returnValue(2);
+    mockAdapter.getSelectAnchorAttr.withArgs('aria-describedby')
+        .and.returnValue(describedbyElements);
 
     const foundation = new MDCSelectFoundation(mockAdapter, foundationMap);
     return {foundation, mockAdapter, leadingIcon, helperText};
@@ -768,10 +771,10 @@ describe('MDCSelectFoundation', () => {
      () => {
        const hasIcon = false;
        const hasHelperText = true;
+       const mockId = 'foobarbazcool';
        const {foundation, mockAdapter, helperText} =
-           setupTest(hasIcon, hasHelperText);
+           setupTest(hasIcon, hasHelperText, mockId);
 
-       const mockId = 'foobarbazcool';
        helperText.getId.and.returnValue(mockId);
        helperText.isVisible.and.returnValue(true);
 
@@ -780,6 +783,59 @@ describe('MDCSelectFoundation', () => {
            .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY, mockId);
      });
 
+  it('#setValid, with client ids, sets aria-describedby', () => {
+    const hasIcon = false;
+    const hasHelperText = true;
+    const mockId = 'foobarbazcool';
+    const clientDescribedbyIds = 'id1 id2 id3';
+
+    const {foundation, mockAdapter, helperText} =
+        setupTest(hasIcon, hasHelperText, clientDescribedbyIds + ' ' + mockId);
+
+    helperText.getId.and.returnValue(mockId);
+    helperText.isVisible.and.returnValue(true);
+
+    foundation.setValid(false);
+    expect(mockAdapter.setSelectAnchorAttr)
+        .toHaveBeenCalledWith(
+            strings.ARIA_DESCRIBEDBY, clientDescribedbyIds + ' ' + mockId);
+  });
+
+  it('#setValid, w/ client ids, remove helpertextId from aria-describedby',
+     () => {
+       const hasIcon = false;
+       const hasHelperText = true;
+       const mockId = 'foobarbazcool';
+       const clientDescribedbyIds = `id1 id2 id3`;
+
+       const {foundation, mockAdapter, helperText} = setupTest(
+           hasIcon, hasHelperText, clientDescribedbyIds + ' ' + mockId);
+
+       helperText.getId.and.returnValue(mockId);
+       helperText.isVisible.and.returnValue(false);
+
+       foundation.setValid(false);
+       expect(mockAdapter.setSelectAnchorAttr)
+           .toHaveBeenCalledWith(
+               strings.ARIA_DESCRIBEDBY, clientDescribedbyIds);
+     });
+
+  it('#setValid, no client describedby ids, remove aria-describedby', () => {
+    const hasIcon = false;
+    const hasHelperText = true;
+    const mockId = 'foobarbazcool';
+
+    const {foundation, mockAdapter, helperText} =
+        setupTest(hasIcon, hasHelperText, mockId);
+
+    helperText.getId.and.returnValue(mockId);
+    helperText.isVisible.and.returnValue(false);
+
+    foundation.setValid(false);
+    expect(mockAdapter.removeSelectAnchorAttr)
+        .toHaveBeenCalledWith(strings.ARIA_DESCRIBEDBY);
+  });
+
   it('#setValid true sets aria-invalid to false and removes invalid classes',
      () => {
        const {foundation, mockAdapter} = setupTest();