fix(Angular + Vue): Add accessible label to Alert dismiss button Authenticator (#2339)

* Added aria label for Angular and Vue dismiss buttons

* Added vue test

* Added changeset

* Fixed test

* Fixed Angular bug

* removed import

Co-authored-by: Erik Hanchett <[email protected]>

Author: ErikCH

.changeset/late-ducks-divide.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-angular': patch
+'@aws-amplify/ui-vue': patch
+---
+
+Adds an accessible label for the Alert dismiss button, which is configurable via translation.

packages/angular/projects/ui-angular/src/lib/primitives/error/error.component.html

@@ -20,7 +20,8 @@
   </div>
   <button
     amplify-button
-    class="amplify-field-group__control"
+    class="amplify-field-group__control amplify-alert__dismiss"
+    [attr.aria-label]="dismissAriaLabel"
     variation="link"
     [fullWidth]="false"
     (click)="close()"

packages/angular/projects/ui-angular/src/lib/primitives/error/error.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
+import { translate } from '@aws-amplify/ui';
 
 @Component({
   selector: 'amplify-error',
   templateUrl: './error.component.html',
 })
 export class ErrorComponent {
   public isVisible = true;
+  public dismissAriaLabel = translate('Dismiss alert');
 
   public close() {
     this.isVisible = false;

packages/vue/src/components/primitives/__tests__/base-alert.spec.ts

@@ -0,0 +1,42 @@
+import BaseAlert from '../base-alert.vue';
+import { components } from '../../../../global-spec';
+import { render } from '@testing-library/vue';
+
+import { I18n } from 'aws-amplify';
+
+describe('Base Alert', () => {
+  it('Base Alert Exists', () => {
+    const wrapper = render(BaseAlert, {
+      global: {
+        components,
+      },
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('shows correct default accessible label', () => {
+    const { queryByRole } = render(BaseAlert, {
+      global: {
+        components,
+      },
+    });
+
+    const defaultButton = queryByRole('button');
+    expect(defaultButton?.getAttribute('aria-label')).toBe('Dismiss alert');
+  });
+  it('shows correct default translated label', () => {
+    const translatedAriaLabel = 'Translated dismiss alert';
+    I18n.putVocabulariesForLanguage('en', {
+      'Dismiss alert': translatedAriaLabel,
+    });
+    const { queryByRole } = render(BaseAlert, {
+      global: {
+        components,
+      },
+    });
+
+    const defaultButton = queryByRole('button');
+    expect(defaultButton?.getAttribute('aria-label')).toBe(translatedAriaLabel);
+  });
+});

packages/vue/src/components/primitives/base-alert.vue

@@ -1,7 +1,11 @@
 <script setup>
 import { ref } from 'vue';
+import { translate } from '@aws-amplify/ui';
+
 const show = ref(true);
 
+const dismissAriaLabel = translate('Dismiss alert');
+
 function close() {
   show.value = false;
 }
@@ -10,10 +14,7 @@ function close() {
 <template>
   <div
     v-if="show"
-    class="
-      amplify-flex amplify-alert amplify-alert--error
-      amplify-authenticator__base
-    "
+    class="amplify-flex amplify-alert amplify-alert--error amplify-authenticator__base"
     data-variation="error"
     role="alert"
   >
@@ -31,7 +32,8 @@ function close() {
       <div><slot></slot></div>
     </div>
     <amplify-button
-      class="amplify-field-group__control"
+      class="amplify-field-group__control amplify-alert__dismiss"
+      :aria-label="dismissAriaLabel"
       :fullwidth="false"
       :variation="'link'"
       type="button"