Add aria-label for flash dismiss button (#521)

* Add aria-label for flash dismiss button * Bump patch * Add spec * Update package.json
LaunchPadLab · Mar 19, 2022 · 7674752 · 7674752
1 parent 2758543
commit 7674752
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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)