Adds changes from @pburdette review

- Falls back to the close selector
- Renames all CLOSE variables to DISMISS for clarity
- Prettifies the files

app/assets/javascripts/alert_handler.js

@@ -5,12 +5,14 @@
 
 export default function initAlertHandler() {
   const DISMISSIBLE_SELECTORS = ['.gl-alert', '.gl-banner'];
-  const CLOSE_SELECTOR = '[aria-label="Dismiss"]';
+  const DISMISS_LABEL = '[aria-label="Dismiss"]';
+  const DISMISS_CLASS = '.gl-alert-dismiss';
 
   DISMISSIBLE_SELECTORS.forEach(selector => {
     const elements = document.querySelectorAll(selector);
-    elements.forEach(element =>
-      element.querySelector(CLOSE_SELECTOR).addEventListener('click', () => element.remove()),
-    );
+    elements.forEach(element => {
+      const button = element.querySelector(DISMISS_LABEL) || element.querySelector(DISMISS_CLASS);
+      button.addEventListener('click', () => element.remove());
+    });
   });
 }

spec/frontend/alert_handler_spec.js

@@ -4,17 +4,19 @@ import initAlertHandler from '~/alert_handler';
 describe('Alert Handler', () => {
   const ALERT_CLASS = 'gl-alert';
   const BANNER_CLASS = 'gl-banner';
-  const CLOSE_LABEL = 'Dismiss';
+  const DISMISS_CLASS = 'gl-alert-dismiss';
+  const DISMISS_LABEL = 'Dismiss';
 
   const generateHtml = parentClass =>
     `<div class="${parentClass}">
-      <button aria-label="${CLOSE_LABEL}">Dismiss</button>
+      <button aria-label="${DISMISS_LABEL}">Dismiss</button>
     </div>`;
 
   const findFirstAlert = () => document.querySelector(`.${ALERT_CLASS}`);
   const findFirstBanner = () => document.querySelector(`.${BANNER_CLASS}`);
   const findAllAlerts = () => document.querySelectorAll(`.${ALERT_CLASS}`);
-  const findFirstCloseButton = () => document.querySelector(`[aria-label="${CLOSE_LABEL}"]`);
+  const findFirstDismissButton = () => document.querySelector(`[aria-label="${DISMISS_LABEL}"]`);
+  const findFirstDismissButtonByClass = () => document.querySelector(`.${DISMISS_CLASS}`);
 
   describe('initAlertHandler', () => {
     describe('with one alert', () => {
@@ -28,7 +30,7 @@ describe('Alert Handler', () => {
       });
 
       it('should dismiss the alert on click', () => {
-        findFirstCloseButton().click();
+        findFirstDismissButton().click();
         expect(findFirstAlert()).not.toExist();
       });
     });
@@ -44,7 +46,7 @@ describe('Alert Handler', () => {
       });
 
       it('should dismiss only one alert on click', () => {
-        findFirstCloseButton().click();
+        findFirstDismissButton().click();
         expect(findAllAlerts()).toHaveLength(1);
       });
     });
@@ -60,9 +62,30 @@ describe('Alert Handler', () => {
       });
 
       it('should dismiss the banner on click', () => {
-        findFirstCloseButton().click();
+        findFirstDismissButton().click();
         expect(findFirstBanner()).not.toExist();
       });
     });
+
+    // Dismiss buttons *should* have the correct aria labels, but some of them won't
+    // because legacy code isn't always a11y compliant.
+    // This tests that the fallback for the incorrectly labelled buttons works.
+    describe('with a mislabelled dismiss button', () => {
+      beforeEach(() => {
+        setHTMLFixture(`<div class="${ALERT_CLASS}">
+          <button class="${DISMISS_CLASS}">Dismiss</button>
+        </div>`);
+        initAlertHandler();
+      });
+
+      it('should render the banner', () => {
+        expect(findFirstAlert()).toExist();
+      });
+
+      it('should dismiss the banner on click', () => {
+        findFirstDismissButtonByClass().click();
+        expect(findFirstAlert()).not.toExist();
+      });
+    });
   });
 });