Must be at least 8 characters long
@@ -157,7 +157,7 @@Must be at least 8 characters
@@ -425,7 +425,7 @@+
Must provide a name
+
We will never share your email address with third parties
``` -#### Help text and accessibility +#### Helper text and accessibility -Note that in every example where the help text is dependent on the state of the input element, we -assign an id to the `mdc-text-field-helptext` element and set that id to the value of the +Note that in every example where the helper text is dependent on the state of the input element, we +assign an id to the `mdc-text-field-helper-text` element and set that id to the value of the `aria-controls` attribute on the input element. We recommend doing this as well as it will help -indicate to assistive devices that the display of the help text is dependent on the interaction with +indicate to assistive devices that the display of the helper text is dependent on the interaction with the input element. When using our vanilla JS component, if it sees that the input element has an `aria-controls` @@ -165,9 +165,9 @@ By default an input's validity is checked via `checkValidity()` on blur, and the accordingly. Set the MDCTextField.valid variable to set the input's validity explicitly. MDC TextField automatically appends an asterisk to the label text if the required attribute is set. -Help text can be used to provide additional validation messages. Use -`mdc-text-field-helptext--validation-msg` to provide styles for using the help text as a validation -message. This can be easily combined with `mdc-text-field-helptext--persistent` to provide a robust +Helper text can be used to provide additional validation messages. Use +`mdc-text-field-helper-text--validation-msg` to provide styles for using the helper text as a validation +message. This can be easily combined with `mdc-text-field-helper-text--persistent` to provide a robust UX for client-side form field validation. ```html @@ -177,9 +177,9 @@ UX for client-side form field validation. -Must be at least 8 characters long
@@ -366,10 +366,10 @@ By default the ripple factory simply calls `new MDCRipple(el)` and returns the r Similar to regular DOM elements, the `MDCTextField` functionality is exposed through accessor methods. -##### MDCTextField.helptextElement +##### MDCTextField.helperTextElement HTMLLabelElement. This is a normal property (non-accessor) that holds a reference to the element -being used as the text field's "help text". It defaults to `null`. If the text field's input element +being used as the text field's "helper text". It defaults to `null`. If the text field's input element contains an `aria-controls` attribute on instantiation of the component, it will look for an element with the corresponding id within the document and automatically assign it to this property. @@ -404,16 +404,16 @@ complicated. | notifyIconAction() => void | Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon | | addClassToBottomLine(className: string) => void | Adds a class to the bottom line element | | removeClassFromBottomLine(className: string) => void | Removes a class from the bottom line element | -| addClassToHelptext(className: string) => void | Adds a class to the help text element. Note that in our code we check for whether or not we have a help text element and if we don't, we simply return. | -| removeClassFromHelptext(className: string) => void | Removes a class from the help text element. | -| helptextHasClass(className: string) => boolean | Returns whether or not the help text element contains the current class | +| addClassToHelperText(className: string) => void | Adds a class to the helper text element. Note that in our code we check for whether or not we have a helper text element and if we don't, we simply return. | +| removeClassFromHelperText(className: string) => void | Removes a class from the helper text element. | +| helperTextHasClass(className: string) => boolean | Returns whether or not the helper text element contains the current class | | registerInputInteractionHandler(evtType: string, handler: EventListener) => void | Registers an event listener on the native input element for a given event | | deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event listener on the native input element for a given event | | registerTransitionEndHandler(handler: EventListener) => void | Registers an event listener on the bottom line element for a "transitionend" event | | deregisterTransitionEndHandler(handler: EventListener) => void | Deregisters an event listener on the bottom line element for a "transitionend" event | | setBottomLineAttr(attr: string, value: string) => void | Sets an attribute with a given value on the bottom line element | -| setHelptextAttr(name: string, value: string) => void | Sets an attribute with a given value on the help text element | -| removeHelptextAttr(name: string) => void | Removes an attribute from the help text element | +| setHelperTextAttr(name: string, value: string) => void | Sets an attribute with a given value on the helper text element | +| removeHelperTextAttr(name: string) => void | Removes an attribute from the helper text element | | getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value`, `disabled` and `badInput` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. | #### The full foundation API diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js index 6fdb3b1152a..467c234a705 100644 --- a/packages/mdc-textfield/adapter.js +++ b/packages/mdc-textfield/adapter.js @@ -112,25 +112,25 @@ class MDCTextFieldAdapter { removeClassFromBottomLine(className) {} /** - * Adds a class to the help text element. Note that in our code we check for - * whether or not we have a help text element and if we don't, we simply + * Adds a class to the helper text element. Note that in our code we check for + * whether or not we have a helper text element and if we don't, we simply * return. * @param {string} className */ - addClassToHelptext(className) {} + addClassToHelperText(className) {} /** - * Removes a class from the help text element. + * Removes a class from the helper text element. * @param {string} className */ - removeClassFromHelptext(className) {} + removeClassFromHelperText(className) {} /** - * Returns whether or not the help text element contains the given class. + * Returns whether or not the helper text element contains the given class. * @param {string} className * @return {boolean} */ - helptextHasClass(className) {} + helperTextHasClass(className) {} /** * Registers an event listener on the native input element for a given event. @@ -166,17 +166,17 @@ class MDCTextFieldAdapter { setBottomLineAttr(attr, value) {} /** - * Sets an attribute with a given value on the help text element. + * Sets an attribute with a given value on the helper text element. * @param {string} name * @param {string} value */ - setHelptextAttr(name, value) {} + setHelperTextAttr(name, value) {} /** - * Removes an attribute from the help text element. + * Removes an attribute from the helper text element. * @param {string} name */ - removeHelptextAttr(name) {} + removeHelperTextAttr(name) {} /** * Returns an object representing the native text input element, with a diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js index ef267eab0e2..8a6643ff72a 100644 --- a/packages/mdc-textfield/constants.js +++ b/packages/mdc-textfield/constants.js @@ -33,8 +33,8 @@ const cssClasses = { DISABLED: 'mdc-text-field--disabled', FOCUSED: 'mdc-text-field--focused', INVALID: 'mdc-text-field--invalid', - HELPTEXT_PERSISTENT: 'mdc-text-field-helptext--persistent', - HELPTEXT_VALIDATION_MSG: 'mdc-text-field-helptext--validation-msg', + HELPER_TEXT_PERSISTENT: 'mdc-text-field-helper-text--persistent', + HELPER_TEXT_VALIDATION_MSG: 'mdc-text-field-helper-text--validation-msg', LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above', LABEL_SHAKE: 'mdc-text-field__label--shake', BOX: 'mdc-text-field--box', diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js index 8748db75908..8e83e23036d 100644 --- a/packages/mdc-textfield/foundation.js +++ b/packages/mdc-textfield/foundation.js @@ -53,16 +53,16 @@ class MDCTextFieldFoundation extends MDCFoundation { notifyIconAction: () => {}, addClassToBottomLine: () => {}, removeClassFromBottomLine: () => {}, - addClassToHelptext: () => {}, - removeClassFromHelptext: () => {}, - helptextHasClass: () => false, + addClassToHelperText: () => {}, + removeClassFromHelperText: () => {}, + helperTextHasClass: () => false, registerInputInteractionHandler: () => {}, deregisterInputInteractionHandler: () => {}, registerTransitionEndHandler: () => {}, deregisterTransitionEndHandler: () => {}, setBottomLineAttr: () => {}, - setHelptextAttr: () => {}, - removeHelptextAttr: () => {}, + setHelperTextAttr: () => {}, + removeHelperTextAttr: () => {}, getNativeInput: () => {}, }); } @@ -156,7 +156,7 @@ class MDCTextFieldFoundation extends MDCFoundation { this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE); this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE); this.adapter_.removeClassFromLabel(LABEL_SHAKE); - this.showHelptext_(); + this.showHelperText_(); this.isFocused_ = true; } @@ -185,12 +185,12 @@ class MDCTextFieldFoundation extends MDCFoundation { } /** - * Makes the help text visible to screen readers. + * Makes the helper text visible to screen readers. * @private */ - showHelptext_() { + showHelperText_() { const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings; - this.adapter_.removeHelptextAttr(ARIA_HIDDEN); + this.adapter_.removeHelperTextAttr(ARIA_HIDDEN); } /** @@ -243,40 +243,40 @@ class MDCTextFieldFoundation extends MDCFoundation { this.adapter_.addClassToLabel(LABEL_SHAKE); this.adapter_.addClass(INVALID); } - this.updateHelptext_(isValid); + this.updateHelperText_(isValid); } /** - * Updates the state of the Text Field's help text based on validity and + * Updates the state of the Text Field's helper text based on validity and * the Text Field's options. * @param {boolean} isValid */ - updateHelptext_(isValid) { - const {HELPTEXT_PERSISTENT, HELPTEXT_VALIDATION_MSG} = MDCTextFieldFoundation.cssClasses; + updateHelperText_(isValid) { + const {HELPER_TEXT_PERSISTENT, HELPER_TEXT_VALIDATION_MSG} = MDCTextFieldFoundation.cssClasses; const {ROLE} = MDCTextFieldFoundation.strings; - const helptextIsPersistent = this.adapter_.helptextHasClass(HELPTEXT_PERSISTENT); - const helptextIsValidationMsg = this.adapter_.helptextHasClass(HELPTEXT_VALIDATION_MSG); - const validationMsgNeedsDisplay = helptextIsValidationMsg && !isValid; + const helperTextIsPersistent = this.adapter_.helperTextHasClass(HELPER_TEXT_PERSISTENT); + const helperTextIsValidationMsg = this.adapter_.helperTextHasClass(HELPER_TEXT_VALIDATION_MSG); + const validationMsgNeedsDisplay = helperTextIsValidationMsg && !isValid; if (validationMsgNeedsDisplay) { - this.adapter_.setHelptextAttr(ROLE, 'alert'); + this.adapter_.setHelperTextAttr(ROLE, 'alert'); } else { - this.adapter_.removeHelptextAttr(ROLE); + this.adapter_.removeHelperTextAttr(ROLE); } - if (helptextIsPersistent || validationMsgNeedsDisplay) { + if (helperTextIsPersistent || validationMsgNeedsDisplay) { return; } - this.hideHelptext_(); + this.hideHelperText_(); } /** - * Hides the help text from screen readers. + * Hides the helper text from screen readers. * @private */ - hideHelptext_() { + hideHelperText_() { const {ARIA_HIDDEN} = MDCTextFieldFoundation.strings; - this.adapter_.setHelptextAttr(ARIA_HIDDEN, 'true'); + this.adapter_.setHelperTextAttr(ARIA_HIDDEN, 'true'); } /** diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js index b8d898c2ab2..96c841fd786 100644 --- a/packages/mdc-textfield/index.js +++ b/packages/mdc-textfield/index.js @@ -37,7 +37,7 @@ class MDCTextField extends MDCComponent { /** @private {?Element} */ this.label_; /** @type {?Element} */ - this.helptextElement; + this.helperTextElement; /** @type {?MDCRipple} */ this.ripple; /** @private {?Element} */ @@ -61,10 +61,10 @@ class MDCTextField extends MDCComponent { initialize(rippleFactory = (el) => new MDCRipple(el)) { this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR); this.label_ = this.root_.querySelector(strings.LABEL_SELECTOR); - this.helptextElement = null; + this.helperTextElement = null; this.ripple = null; if (this.input_.hasAttribute('aria-controls')) { - this.helptextElement = document.getElementById(this.input_.getAttribute('aria-controls')); + this.helperTextElement = document.getElementById(this.input_.getAttribute('aria-controls')); } if (this.root_.classList.contains(cssClasses.BOX)) { this.ripple = rippleFactory(this.root_); @@ -138,7 +138,7 @@ class MDCTextField extends MDCComponent { notifyIconAction: () => this.emit(MDCTextFieldFoundation.strings.ICON_EVENT, {}), }, this.getInputAdapterMethods_(), - this.getHelptextAdapterMethods_(), + this.getHelperTextAdapterMethods_(), this.getBottomLineAdapterMethods_(), this.getIconAdapterMethods_()))); } @@ -214,39 +214,39 @@ class MDCTextField extends MDCComponent { /** * @return {!{ - * addClassToHelptext: function(string): undefined, - * removeClassFromHelptext: function(string): undefined, - * helptextHasClass: function(string): boolean, - * setHelptextAttr: function(string, string): undefined, - * removeHelptextAttr: function(string): undefined, + * addClassToHelperText: function(string): undefined, + * removeClassFromHelperText: function(string): undefined, + * helperTextHasClass: function(string): boolean, + * setHelperTextAttr: function(string, string): undefined, + * removeHelperTextAttr: function(string): undefined, * }} */ - getHelptextAdapterMethods_() { + getHelperTextAdapterMethods_() { return { - addClassToHelptext: (className) => { - if (this.helptextElement) { - this.helptextElement.classList.add(className); + addClassToHelperText: (className) => { + if (this.helperTextElement) { + this.helperTextElement.classList.add(className); } }, - removeClassFromHelptext: (className) => { - if (this.helptextElement) { - this.helptextElement.classList.remove(className); + removeClassFromHelperText: (className) => { + if (this.helperTextElement) { + this.helperTextElement.classList.remove(className); } }, - helptextHasClass: (className) => { - if (!this.helptextElement) { + helperTextHasClass: (className) => { + if (!this.helperTextElement) { return false; } - return this.helptextElement.classList.contains(className); + return this.helperTextElement.classList.contains(className); }, - setHelptextAttr: (name, value) => { - if (this.helptextElement) { - this.helptextElement.setAttribute(name, value); + setHelperTextAttr: (name, value) => { + if (this.helperTextElement) { + this.helperTextElement.setAttribute(name, value); } }, - removeHelptextAttr: (name) => { - if (this.helptextElement) { - this.helptextElement.removeAttribute(name); + removeHelperTextAttr: (name) => { + if (this.helperTextElement) { + this.helperTextElement.removeAttribute(name); } }, }; diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss index e760c88962e..54a64622be9 100644 --- a/packages/mdc-textfield/mdc-text-field.scss +++ b/packages/mdc-textfield/mdc-text-field.scss @@ -408,7 +408,7 @@ // stylelint-disable plugin/selector-bem-pattern .mdc-text-field__input, .mdc-text-field__label, - + .mdc-text-field-helptext { + + .mdc-text-field-helper-text { @include mdc-theme-prop(color, text-disabled-on-light); } // stylelint-enable plugin/selector-bem-pattern @@ -422,7 +422,7 @@ @include mdc-theme-dark(".mdc-text-field", true) { // stylelint-disable plugin/selector-bem-pattern - + .mdc-text-field-helptext { + + .mdc-text-field-helper-text { @include mdc-theme-prop(color, text-disabled-on-dark); } // stylelint-enable plugin/selector-bem-pattern @@ -649,9 +649,9 @@ // postcss-bem-linter: end -// postcss-bem-linter: define text-field-helptext +// postcss-bem-linter: define text-field-helper-text -.mdc-text-field-helptext { +.mdc-text-field-helper-text { @include mdc-theme-prop(color, text-hint-on-light); margin: 0; @@ -685,7 +685,7 @@ // stylelint-enable plugin/selector-bem-pattern } -.mdc-text-field-helptext--persistent { +.mdc-text-field-helper-text--persistent { transition: none; opacity: 1; will-change: initial; @@ -694,13 +694,13 @@ // postcss-bem-linter: end .mdc-text-field--invalid { - + .mdc-text-field-helptext--validation-msg { + + .mdc-text-field-helper-text--validation-msg { opacity: 1; color: $mdc-text-field-error-on-light; } @include mdc-theme-dark(".mdc-text-field", true) { - + .mdc-text-field-helptext--validation-msg { + + .mdc-text-field-helper-text--validation-msg { color: $mdc-text-field-error-on-dark; } } diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js index e1ed0049b42..4e0682ffd63 100644 --- a/test/unit/mdc-textfield/foundation.test.js +++ b/test/unit/mdc-textfield/foundation.test.js @@ -39,10 +39,10 @@ test('defaultAdapter returns a complete adapter implementation', () => { 'setIconAttr', 'eventTargetHasClass', 'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler', 'notifyIconAction', 'addClassToBottomLine', 'removeClassFromBottomLine', - 'addClassToHelptext', 'removeClassFromHelptext', 'helptextHasClass', + 'addClassToHelperText', 'removeClassFromHelperText', 'helperTextHasClass', 'registerInputInteractionHandler', 'deregisterInputInteractionHandler', 'registerTransitionEndHandler', 'deregisterTransitionEndHandler', - 'setBottomLineAttr', 'setHelptextAttr', 'removeHelptextAttr', 'getNativeInput', + 'setBottomLineAttr', 'setHelperTextAttr', 'removeHelperTextAttr', 'getNativeInput', ]); }); @@ -237,7 +237,7 @@ test('on focus adds mdc-text-field__label--float-above class', () => { td.verify(mockAdapter.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE)); }); -test('on focus removes aria-hidden from helptext', () => { +test('on focus removes aria-hidden from helperText', () => { const {foundation, mockAdapter} = setupTest(); let focus; td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function))) @@ -246,7 +246,7 @@ test('on focus removes aria-hidden from helptext', () => { }); foundation.init(); focus(); - td.verify(mockAdapter.removeHelptextAttr('aria-hidden')); + td.verify(mockAdapter.removeHelperTextAttr('aria-hidden')); }); const setupBlurTest = () => { @@ -316,47 +316,47 @@ test('on blur does not add mdc-textfied--invalid if custom validity is true and' td.verify(mockAdapter.addClass(cssClasses.INVALID), {times: 0}); }); -test('on blur adds role="alert" to helptext if input is invalid and helptext is being used ' + +test('on blur adds role="alert" to helper text if input is invalid and helper text is being used ' + 'as a validation message', () => { const {mockAdapter, blur, nativeInput} = setupBlurTest(); nativeInput.checkValidity = () => false; - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('role', 'alert')); + td.verify(mockAdapter.setHelperTextAttr('role', 'alert')); }); test('on blur remove role="alert" if input is valid', () => { const {mockAdapter, blur} = setupBlurTest(); blur(); - td.verify(mockAdapter.removeHelptextAttr('role')); + td.verify(mockAdapter.removeHelperTextAttr('role')); }); -test('on blur sets aria-hidden="true" on help text by default', () => { +test('on blur sets aria-hidden="true" on helper text by default', () => { const {mockAdapter, blur} = setupBlurTest(); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true')); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true')); }); -test('on blur does not set aria-hidden on help text when it is persistent', () => { +test('on blur does not set aria-hidden on helper text when it is persistent', () => { const {mockAdapter, blur} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_PERSISTENT)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_PERSISTENT)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true'), {times: 0}); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true'), {times: 0}); }); -test('on blur does not set aria-hidden if input is invalid and help text is validation message', () => { +test('on blur does not set aria-hidden if input is invalid and helper text is validation message', () => { const {mockAdapter, blur, nativeInput} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); nativeInput.checkValidity = () => false; blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true'), {times: 0}); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true'), {times: 0}); }); -test('on blur sets aria-hidden=true if input is valid and help text is validation message', () => { +test('on blur sets aria-hidden=true if input is valid and helper text is validation message', () => { const {mockAdapter, blur} = setupBlurTest(); - td.when(mockAdapter.helptextHasClass(cssClasses.HELPTEXT_VALIDATION_MSG)).thenReturn(true); + td.when(mockAdapter.helperTextHasClass(cssClasses.HELPER_TEXT_VALIDATION_MSG)).thenReturn(true); blur(); - td.verify(mockAdapter.setHelptextAttr('aria-hidden', 'true')); + td.verify(mockAdapter.setHelperTextAttr('aria-hidden', 'true')); }); test('on blur handles getNativeInput() not returning anything gracefully', () => { diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js index b6d727be1d8..0131581ce5f 100644 --- a/test/unit/mdc-textfield/mdc-text-field.test.js +++ b/test/unit/mdc-textfield/mdc-text-field.test.js @@ -39,16 +39,16 @@ test('attachTo returns an MDCTextField instance', () => { assert.isOk(MDCTextField.attachTo(getFixture()) instanceof MDCTextField); }); -const getHelptext = () => bel`help text
`; +const getHelperText = () => bel`helper text
`; -test('#constructor assigns helptextElement to the id specified in the input aria-controls if present', () => { +test('#constructor assigns helperTextElement to the id specified in the input aria-controls if present', () => { const root = getFixture(); - root.querySelector('.mdc-text-field__input').setAttribute('aria-controls', 'helptext'); - const helptext = getHelptext(); - document.body.appendChild(helptext); + root.querySelector('.mdc-text-field__input').setAttribute('aria-controls', 'helper-text'); + const helperText = getHelperText(); + document.body.appendChild(helperText); const component = new MDCTextField(root); - assert.equal(component.helptextElement, helptext); - document.body.removeChild(helptext); + assert.equal(component.helperTextElement, helperText); + document.body.removeChild(helperText); }); class FakeRipple { @@ -262,72 +262,72 @@ test('#adapter.getNativeInput returns the component input element', () => { ); }); -test('#adapter.addClassToHelptext does nothing if no help text element present', () => { +test('#adapter.addClassToHelperText does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.addClassToHelptext('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.addClassToHelperText('foo')); }); -test('#adapter.addClassToHelptext adds a class to the helptext element when present', () => { +test('#adapter.addClassToHelperText adds a class to the helper text element when present', () => { const {component} = setupTest(); - component.helptextElement = getHelptext(); - component.getDefaultFoundation().adapter_.addClassToHelptext('foo'); - assert.isOk(component.helptextElement.classList.contains('foo')); + component.helperTextElement = getHelperText(); + component.getDefaultFoundation().adapter_.addClassToHelperText('foo'); + assert.isOk(component.helperTextElement.classList.contains('foo')); }); -test('#adapter.removeClassFromHelptext does nothing if no help text element present', () => { +test('#adapter.removeClassFromHelperText does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeClassFromHelptext('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeClassFromHelperText('foo')); }); -test('#adapter.removeClassFromHelptext removes a class from the helptext element when present', () => { +test('#adapter.removeClassFromHelperText removes a class from the helper text element when present', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - helptext.classList.add('foo'); - component.getDefaultFoundation().adapter_.removeClassFromHelptext('foo'); - assert.isNotOk(helptext.classList.contains('foo')); + const helperText = getHelperText(); + component.helperTextElement = helperText; + helperText.classList.add('foo'); + component.getDefaultFoundation().adapter_.removeClassFromHelperText('foo'); + assert.isNotOk(helperText.classList.contains('foo')); }); -test('#adapter.helptextHasClass does nothing if no help text element present', () => { +test('#adapter.helperTextHasClass does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.helptextHasClass returns whether or not the help text contains a certain class', () => { +test('#adapter.helperTextHasClass returns whether or not the helper text contains a certain class', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - helptext.classList.add('foo'); - assert.isOk(component.getDefaultFoundation().adapter_.helptextHasClass('foo')); - helptext.classList.remove('foo'); - assert.isNotOk(component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + const helperText = getHelperText(); + component.helperTextElement = helperText; + helperText.classList.add('foo'); + assert.isOk(component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); + helperText.classList.remove('foo'); + assert.isNotOk(component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.setHelptextAttr does nothing if no help text element present', () => { +test('#adapter.setHelperTextAttr does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helptextHasClass('foo')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.helperTextHasClass('foo')); }); -test('#adapter.setHelptextAttr sets an attribute to a certain value on the help text element', () => { +test('#adapter.setHelperTextAttr sets an attribute to a certain value on the helper text element', () => { const {component} = setupTest(); - const helptext = getHelptext(); - component.helptextElement = helptext; - component.getDefaultFoundation().adapter_.setHelptextAttr('aria-label', 'foo'); - assert.equal(helptext.getAttribute('aria-label'), 'foo'); + const helperText = getHelperText(); + component.helperTextElement = helperText; + component.getDefaultFoundation().adapter_.setHelperTextAttr('aria-label', 'foo'); + assert.equal(helperText.getAttribute('aria-label'), 'foo'); }); -test('#adapter.removeHelptextAttr does nothing if no help text element present', () => { +test('#adapter.removeHelperTextAttr does nothing if no helper text element present', () => { const {component} = setupTest(); - assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeHelptextAttr('aria-label')); + assert.doesNotThrow(() => component.getDefaultFoundation().adapter_.removeHelperTextAttr('aria-label')); }); -test('#adapter.removeHelptextAttr removes an attribute on the help text element', () => { +test('#adapter.removeHelperTextAttr removes an attribute on the helper text element', () => { const {component} = setupTest(); - const helptext = getHelptext(); - helptext.setAttribute('aria-label', 'foo'); - component.helptextElement = helptext; - component.getDefaultFoundation().adapter_.removeHelptextAttr('aria-label'); - assert.isNotOk(helptext.hasAttribute('aria-label')); + const helperText = getHelperText(); + helperText.setAttribute('aria-label', 'foo'); + component.helperTextElement = helperText; + component.getDefaultFoundation().adapter_.removeHelperTextAttr('aria-label'); + assert.isNotOk(helperText.hasAttribute('aria-label')); }); test(`#adapter.notifyIconAction emits ${strings.ICON_EVENT}`, () => {