test(alert): check for aria-label and aria-labelledby being passed

Author: brandyscarney

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -60,5 +60,26 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     test('should allow for manually specifying aria attributes', async ({ page }) => {
       await testAria(page, 'customAria', 'Custom title', 'Custom description');
     });
+
+    test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page }) => {
+      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+      const button = page.locator('#ariaLabelButton');
+      await button.click();
+
+      await didPresent.next();
+
+      const alertButton = page.locator('ion-alert .alert-button');
+
+      /**
+       * expect().toHaveAttribute() can't check for a null value, so grab and check
+       * the value manually instead.
+       */
+      const ariaLabelledBy = await alertButton.getAttribute('aria-labelledby');
+      expect(ariaLabelledBy).toBe('close-label');
+
+      const ariaLabel = await alertButton.getAttribute('aria-label');
+      expect(ariaLabel).toBe('close button');
+    });
   });
 });

core/src/components/alert/test/a11y/index.html

@@ -24,6 +24,7 @@ <h1>Alert - A11y</h1>
       <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
       <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
       <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
     </main>
 
     <script>
@@ -76,6 +77,21 @@ <h1>Alert - A11y</h1>
           },
         });
       }
+
+      function presentAriaLabelButton() {
+        openAlert({
+          header: 'Header',
+          subHeader: 'Subtitle',
+          message: 'This is an alert message with custom aria attributes passed to the button.',
+          buttons: [{
+            text: 'Close',
+            htmlAttributes: {
+              ariaLabel: 'close button',
+              'aria-labelledby': 'close-label',
+            }
+          }],
+        });
+      }
     </script>
   </body>
 </html>