From 7674752177fee2fc59316a7ee8a8a09fd9a871f6 Mon Sep 17 00:00:00 2001
From: Conor <conor@launchpadlab.com>
Date: Sat, 19 Mar 2022 14:21:04 -0400
Subject: [PATCH] Add aria-label for flash dismiss button (#521)

* Add aria-label for flash dismiss button

* Bump patch

* Add spec

* Update package.json
---
 package.json                          |  2 +-
 src/indicators/flash-message.js       |  2 +-
 test/indicators/flash-message.test.js | 13 +++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4e6076b6..aaec1d90 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "5.4.7",
+  "version": "5.4.8",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },
diff --git a/src/indicators/flash-message.js b/src/indicators/flash-message.js
index 323f7786..da54c61b 100644
--- a/src/indicators/flash-message.js
+++ b/src/indicators/flash-message.js
@@ -49,7 +49,7 @@ function FlashMessage({ children, isError, onDismiss, className, ...rest }) {
       {...rest}
     >
       {onDismiss && (
-        <button type="button" className="dismiss" onClick={() => onDismiss()}>
+        <button type="button" className="dismiss" onClick={() => onDismiss()} aria-label="Dismiss">
           ×
         </button>
       )}
diff --git a/test/indicators/flash-message.test.js b/test/indicators/flash-message.test.js
index 65bd7766..c4ec3ed1 100644
--- a/test/indicators/flash-message.test.js
+++ b/test/indicators/flash-message.test.js
@@ -17,6 +17,19 @@ test('FlashMessage only shows dismiss button when callback is provided', () => {
   expect(dismissWrapper.find('button.dismiss').exists()).toBe(true)
 })
 
+test('FlashMessage dismiss button includes label for screenreaders', () => {
+  const dismissWrapper = mount(
+    <FlashMessage
+      onDismiss={() => {
+        /* do something */
+      }}
+    >
+      Success!
+    </FlashMessage>
+  )
+  expect(dismissWrapper.find('button.dismiss').prop('aria-label')).toBeDefined()
+})
+
 test('FlashMessage sets class based on isError prop', () => {
   const wrapper = mount(<FlashMessage>Success!</FlashMessage>)
   expect(wrapper.find('div.success').exists()).toBe(true)