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

PiperOrigin-RevId: 512656605

Author: bbritto

packages/mdc-select/foundation.ts

@@ -93,7 +93,6 @@ 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;
@@ -122,11 +121,6 @@ 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. */
@@ -486,20 +480,11 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
     const helperTextId = this.helperText.getId();
 
     if (helperTextVisible && helperTextId) {
-      this.adapter.setSelectAnchorAttr(
-          strings.ARIA_DESCRIBEDBY, this.ariaDescribedbyIds.join(' '));
+      this.adapter.setSelectAnchorAttr(strings.ARIA_DESCRIBEDBY, helperTextId);
     } else {
-      // 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);
-      }
+      // Needed because screenreaders will read labels pointed to by
+      // `aria-describedby` even if they are `aria-hidden`.
+      this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);
     }
   }
 

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

@@ -83,8 +83,7 @@ describe('MDCSelectFoundation', () => {
     ]);
   });
 
-  function setupTest(
-      hasLeadingIcon = true, hasHelperText = false, describedbyElements = '') {
+  function setupTest(hasLeadingIcon = true, hasHelperText = false) {
     const mockAdapter = createMockAdapter(MDCSelectFoundation);
     const leadingIcon = jasmine.createSpyObj('leadingIcon', [
       'setDisabled', 'setAriaLabel', 'setContent', 'registerInteractionHandler',
@@ -108,8 +107,6 @@ 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};
@@ -771,10 +768,10 @@ describe('MDCSelectFoundation', () => {
      () => {
        const hasIcon = false;
        const hasHelperText = true;
-       const mockId = 'foobarbazcool';
        const {foundation, mockAdapter, helperText} =
-           setupTest(hasIcon, hasHelperText, mockId);
+           setupTest(hasIcon, hasHelperText);
 
+       const mockId = 'foobarbazcool';
        helperText.getId.and.returnValue(mockId);
        helperText.isVisible.and.returnValue(true);
 
@@ -783,59 +780,6 @@ 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();