fix(ui-angular + ui-vue): Hide decorative alert icons from screen readers (#2419)

Author: ioanabrooks

.changeset/weak-pillows-dream.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-angular': patch
+'@aws-amplify/ui-vue': patch
+---
+
+Hide decorative alert icons from screen readers.

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

@@ -9,6 +9,7 @@
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="amplify-icon"
+      [attr.aria-hidden]="true"
       viewBox="0 0 24 24"
       fill="currentColor"
     >
@@ -29,6 +30,7 @@
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="amplify-icon"
+      [attr.aria-hidden]="true"
       viewBox="0 0 24 24"
       fill="currentColor"
     >

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

@@ -1,7 +1,6 @@
 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', () => {
@@ -25,6 +24,7 @@ describe('Base Alert', () => {
     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', {
@@ -39,4 +39,15 @@ describe('Base Alert', () => {
     const defaultButton = queryByRole('button');
     expect(defaultButton?.getAttribute('aria-label')).toBe(translatedAriaLabel);
   });
+
+  it('should set aria-hidden to be true on dismiss button decorative icon', () => {
+    const { queryByRole } = render(BaseAlert, {
+      global: {
+        components,
+      },
+    });
+    const defaultButton = queryByRole('button');
+    const icon = defaultButton?.children[0];
+    expect(icon?.getAttribute('aria-hidden')).toBe('true');
+  });
 });

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

@@ -22,6 +22,7 @@ function close() {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="amplify-icon"
+        aria-hidden="true"
         viewBox="0 0 24 24"
         fill="currentColor"
       >
@@ -42,6 +43,7 @@ function close() {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="amplify-icon"
+        aria-hidden="true"
         viewBox="0 0 24 24"
         fill="currentColor"
       >