@momentum-design/components 0.120.38 → 0.121.1

package/dist/components/password/password.component.d.ts

@@ -10,7 +10,8 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
  * - `password` field - contains the value
  * - `help-text` or `validation-message` - displayed below the password field.
  * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
- * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - `show-button-aria-label` - aria label for the trailing show button.
+ * - `hide-button-aria-label` - aria label for the trailing hide button.
  * - all the attributes of the native password field.
  *
  * @tagname mdc-password
@@ -62,9 +63,13 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
  */
 declare class Password extends Input {
     /**
-     * Aria label for the show or hide password icon button.
+     * Aria label for the show password icon button.
      */
-    showHideButtonAriaLabel: string;
+    showButtonAriaLabel: string;
+    /**
+     * Aria label for the hide password icon button.
+     */
+    hideButtonAriaLabel: string;
     /**
      * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
      * @override

package/dist/components/password/password.component.js

@@ -22,7 +22,8 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
  * - `password` field - contains the value
  * - `help-text` or `validation-message` - displayed below the password field.
  * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.
- * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.
+ * - `show-button-aria-label` - aria label for the trailing show button.
+ * - `hide-button-aria-label` - aria label for the trailing hide button.
  * - all the attributes of the native password field.
  *
  * @tagname mdc-password
@@ -76,9 +77,13 @@ class Password extends Input {
     constructor() {
         super(...arguments);
         /**
-         * Aria label for the show or hide password icon button.
+         * Aria label for the show password icon button.
          */
-        this.showHideButtonAriaLabel = '';
+        this.showButtonAriaLabel = '';
+        /**
+         * Aria label for the hide password icon button.
+         */
+        this.hideButtonAriaLabel = '';
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
          * @override
@@ -116,7 +121,7 @@ class Password extends Input {
         ?disabled=${this.disabled || this.readonly || !showBtn}
         size="${DEFAULTS.ICON_SIZE}"
         @click=${this.toggleShowPassword}
-        aria-label=${this.showHideButtonAriaLabel}
+        aria-label=${this.showPassword ? this.hideButtonAriaLabel : this.showButtonAriaLabel}
         prefix-icon=${this.showPassword ? PASSWORD_VISIBILITY_ICONS.HIDE_BOLD : PASSWORD_VISIBILITY_ICONS.SHOW_BOLD}
       ></mdc-button>
     `;
@@ -131,9 +136,13 @@ class Password extends Input {
 }
 Password.styles = [...Input.styles];
 __decorate([
-    property({ type: String, attribute: 'show-hide-button-aria-label' }),
+    property({ type: String, attribute: 'show-button-aria-label' }),
+    __metadata("design:type", Object)
+], Password.prototype, "showButtonAriaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'hide-button-aria-label' }),
     __metadata("design:type", Object)
-], Password.prototype, "showHideButtonAriaLabel", void 0);
+], Password.prototype, "hideButtonAriaLabel", void 0);
 __decorate([
     property({ type: String, attribute: 'help-text-type' }),
     __metadata("design:type", String)