fix(select): clean up helper text interactions

PiperOrigin-RevId: 313496188

Author: allan-chen

packages/mdc-select/foundation.ts

@@ -253,9 +253,6 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
  this.layout();
 
  this.adapter.activateBottomLine();
- if (this.helperText) {
- this.helperText.showToScreenReader();
- }
  }
 
  /**

packages/mdc-select/helper-text/foundation.ts

@@ -99,31 +99,47 @@ export class MDCSelectHelperTextFoundation extends MDCFoundation<MDCSelectHelper
  }
 
  /**
- * Sets the validity of the helper text based on the select validity.
+ * When acting as a validation message, shows/hides the helper text and
+ * triggers alerts as necessary based on the select's validity.
  */
  setValidity(selectIsValid: boolean) {
- const helperTextIsPersistentValidationMsg =
- this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);
- const helperTextIsValidationMsg =
+ const isValidationMsg =
  this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG);
- const validationMsgNeedsDisplay =
- helperTextIsValidationMsg && !selectIsValid;
 
- if (validationMsgNeedsDisplay) {
- this.adapter.setAttr(strings.ROLE, 'alert');
- } else {
- this.adapter.removeAttr(strings.ROLE);
+ if (!isValidationMsg) {
+ // Non-validating helper-text is always displayed and does not participate
+  // in validation logic.
+ return;
  }
 
- if (!validationMsgNeedsDisplay && !helperTextIsPersistentValidationMsg) {
- this.hide_();
+ const isPersistentValidationMsg =
+ this.adapter.hasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT);
+
+ // Validating helper text is displayed if select is invalid, unless it is
+ // set as persistent, in which case it always displays.
+ const msgShouldDisplay = !selectIsValid || isPersistentValidationMsg;
+ if (msgShouldDisplay) {
+ this.showToScreenReader();
+
+ // In addition to displaying, also trigger an alert if the select
+ // has become invalid.
+ if (!selectIsValid) {
+ this.adapter.setAttr(strings.ROLE, 'alert');
+ } else {
+ this.adapter.removeAttr(strings.ROLE);
+ }
+ return;
  }
+
+ // Hide everything.
+ this.adapter.removeAttr(strings.ROLE);
+ this.hide();
  }
 
  /**
  * Hides the help text from screen readers.
  */
- private hide_() {
+ private hide() {
  this.adapter.setAttr(strings.ARIA_HIDDEN, 'true');
  }
 }

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

@@ -89,8 +89,8 @@ describe('MDCSelectHelperTextFoundation', () => {
  expect(mockAdapter.removeAttr).toHaveBeenCalledWith('aria-hidden');
  });
 
- it('#setValidity adds role="alert" to helper text if input is invalid and helper text is being used ' +
- 'as a validation message',
+ it('#setValidity adds role="alert" to helper text if input is invalid and' +
+ 'helper text is being used as a validation message',
  () => {
  const {foundation, mockAdapter} = setupTest();
  const inputIsValid = false;
@@ -115,17 +115,32 @@ describe('MDCSelectHelperTextFoundation', () => {
  expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');
  });
 
- it('#setValidity sets aria-hidden="true" on helper text by default', () => {
- const {foundation, mockAdapter} = setupTest();
- const inputIsValid = true;
- mockAdapter.hasClass
- .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)
- .and.returnValue(false);
- mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)
- .and.returnValue(false);
- foundation.setValidity(inputIsValid);
- expect(mockAdapter.setAttr).toHaveBeenCalledWith('aria-hidden', 'true');
- });
+ it('#setValidity removes role="alert" if input is valid and validation' +
+ ' msg is persistent',
+ () => {
+ const {foundation, mockAdapter} = setupTest();
+ const inputIsValid = true;
+ mockAdapter.hasClass
+ .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)
+ .and.returnValue(true);
+ mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)
+ .and.returnValue(true);
+ foundation.setValidity(inputIsValid);
+ expect(mockAdapter.removeAttr).toHaveBeenCalledWith('role');
+ });
+
+ it('#setValidity does not set aria-hidden="true" on helper text by default',
+ () => {
+ const {foundation, mockAdapter} = setupTest();
+ const inputIsValid = true;
+ mockAdapter.hasClass
+ .withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT)
+ .and.returnValue(false);
+ mockAdapter.hasClass.withArgs(cssClasses.HELPER_TEXT_VALIDATION_MSG)
+ .and.returnValue(false);
+ foundation.setValidity(inputIsValid);
+ expect(mockAdapter.setAttr).not.toHaveBeenCalled();
+ });
 
  it('#setValidity does not set aria-hidden on helper text when it is persistent validation',
  () => {

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

@@ -320,14 +320,6 @@ describe('MDCSelectFoundation', () => {
  expect(mockAdapter.activateBottomLine).toHaveBeenCalledTimes(1);
  });
 
- it('#handleFocus calls helperText.showToScreenReader', () => {
- const hasIcon = true;
- const hasHelperText = true;
- const {foundation, helperText} = setupTest(hasIcon, hasHelperText);
- foundation.handleFocus();
- expect(helperText.showToScreenReader).toHaveBeenCalledTimes(1);
- });
-
  it('#handleFocus calls adapter.activateBottomLine() if isMenuOpen_=true',
  () => {
  const {foundation, mockAdapter} = setupTest();