Make cancel link more accessible (#469)

* Make cancel link more accessible * Fix test markup
shipshapecode · Jul 30, 2019 · 94ba9ba · 94ba9ba
1 parent 08788a8
commit 94ba9ba
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/js/components/shepherd-content/shepherd-header/index.jsx b/src/js/components/shepherd-content/shepherd-header/index.jsx
@@ -43,11 +43,14 @@ export default class ShepherdHeader extends Component {
 
   _addCancelLink(showCancelLink, styles) {
     if (showCancelLink) {
-      return <a
-        href=''
+      return <button
+        aria-label='Close Tour'
         className={styles['cancel-link'].trim()}
         onClick={this.cancelStep}
-      />;
+        type='button'
+      >
+        <span aria-hidden='true'>&times;</span>
+      </button>;
     }
 
     return null;

diff --git a/src/js/components/shepherd-content/shepherd-header/styles.js b/src/js/components/shepherd-content/shepherd-header/styles.js
@@ -3,6 +3,8 @@ import { lighten } from 'polished';
 export default function headerStyles(classPrefix, variables) {
   return {
     'cancel-link': {
+      background: 'transparent',
+      border: 'none',
       color: lighten(0.7, variables.shepherdThemeTextHeader),
       fontSize: '2em',
       fontWeight: 'normal',
@@ -15,9 +17,6 @@ export default function headerStyles(classPrefix, variables) {
       '&:hover': {
         color: variables.shepherdThemeTextHeader,
         cursor: 'pointer'
-      },
-      '&:before': {
-        content: '"\u00d7"'
       }
     },
 

diff --git a/test/unit/components/shepherd-header.spec.js b/test/unit/components/shepherd-header.spec.js
@@ -20,7 +20,7 @@ describe('components/ShepherdHeader', () => {
     };
 
     const header = <ShepherdHeader step={step} styles={styles}/>;
-    expect(header).to.include(<a class="shepherd-cancel-link" href=""></a>);
+    expect(header).to.include(<button aria-label="Close Tour" class="shepherd-cancel-link" type="button"><span aria-hidden="true">×</span></button>);
   });
 
   it('cancel link is not added when showCancelLink === false', () => {
@@ -31,7 +31,7 @@ describe('components/ShepherdHeader', () => {
     };
 
     const header = <ShepherdHeader step={step} styles={styles}/>;
-    expect(header).to.not.include(<a class="shepherd-cancel-link" href=""></a>);
+    expect(header).to.not.include(<button aria-label="Close Tour" className="shepherd-cancel-link" type="button"><span aria-hidden="true">×</span></button>);
   });
 
   it('cancel link cancels the tour', async () => {