fix accessibility errors in CloseButton of Sidebar

sumup-oss · Oct 25, 2019 · 2e007f7 · 2e007f7
1 parent 305dfe5
commit 2e007f7
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
@@ -65,7 +65,7 @@ const Sidebar = ({ children, open, closeButtonLabel, onClose, className }) => (
     <Backdrop visible={open} onClick={onClose} data-testid="sidebar-backdrop" />
     <CloseButton
       visible={open}
-      closeButtonLabel={closeButtonLabel}
+      label={closeButtonLabel}
       onClick={onClose}
       data-testid="sidebar-close-button"
     />

diff --git a/src/components/Sidebar/Sidebar.spec.js b/src/components/Sidebar/Sidebar.spec.js
@@ -61,7 +61,7 @@ describe('<Sidebar />', () => {
 
   describe('accessibility', () => {
     it('should meet accessibility guidelines', async () => {
-      const wrapper = renderToHtml(<Sidebar />);
+      const wrapper = renderToHtml(<Sidebar closeButtonLabel="close" />);
       const actual = await axe(wrapper);
       expect(actual).toHaveNoViolations();
     });

diff --git a/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap b/src/components/Sidebar/__snapshots__/Sidebar.spec.js.snap
@@ -113,7 +113,7 @@ HTMLCollection [
     data-testid="sidebar-close-button"
   >
     <div
-      aria-hidden="true"
+      role="presentation"
     >
       closeIcon.svg
     </div>
@@ -218,7 +218,7 @@ HTMLCollection [
     data-testid="sidebar-close-button"
   >
     <div
-      aria-hidden="true"
+      role="presentation"
     >
       closeIcon.svg
     </div>

diff --git a/src/components/Sidebar/components/CloseButton/CloseButton.js b/src/components/Sidebar/components/CloseButton/CloseButton.js
@@ -17,6 +17,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
+import { hideVisually } from 'polished';
 
 import { ReactComponent as CloseIcon } from './closeIcon.svg';
 
@@ -56,14 +57,21 @@ const FloatingButton = styled.button`
   ${visibleStyles};
 `;
 
-const CloseButton = ({ visible, closeButtonLabel, onClick, ...props }) => (
+const labelStyles = () => css`
+  ${hideVisually()};
+`;
+
+const Label = styled('span')(labelStyles);
+
+const CloseButton = ({ visible, label, onClick, ...props }) => (
   <FloatingButton
     visible={visible}
     onClick={onClick}
     {...props}
-    aria-label={closeButtonLabel}
+    aria-label={label}
   >
-    <CloseIcon aria-hidden="true" />
+    <CloseIcon role="presentation" />
+    {label && <Label>{label}</Label>}
   </FloatingButton>
 );
 
@@ -75,7 +83,7 @@ CloseButton.propTypes = {
   /**
    * Accessibility label for the CloseButton
    */
-  closeButtonLabel: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * A function to handle the the click on the CloseButton
    */

diff --git a/src/components/Sidebar/components/CloseButton/CloseButton.spec.js b/src/components/Sidebar/components/CloseButton/CloseButton.spec.js
@@ -32,7 +32,7 @@ describe('CloseButton', () => {
 
   describe('accessibility', () => {
     it('should meet accessibility guidelines', async () => {
-      const wrapper = renderToHtml(<CloseButton />);
+      const wrapper = renderToHtml(<CloseButton label="close" />);
       const actual = await axe(wrapper);
       expect(actual).toHaveNoViolations();
     });

diff --git a/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap b/src/components/Sidebar/components/CloseButton/__snapshots__/CloseButton.spec.js.snap
@@ -40,7 +40,7 @@ exports[`CloseButton styles should render and match snapshot when not visible 1`
   class="circuit-0 circuit-1"
 >
   <div
-    aria-hidden="true"
+    role="presentation"
   >
     closeIcon.svg
   </div>
@@ -89,7 +89,7 @@ exports[`CloseButton styles should render and match snapshot when visible 1`] =
   class="circuit-0 circuit-1"
 >
   <div
-    aria-hidden="true"
+    role="presentation"
   >
     closeIcon.svg
   </div>