FinishSlide: improved accessibility

bocoup · Jul 30, 2020 · 55689d0 · 55689d0
1 parent 97c8a1b
commit 55689d0
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/client/components/Scenario/FinishSlide.jsx b/client/components/Scenario/FinishSlide.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Card, Header, Icon, Modal } from '@components/UI';
 import { NavLink } from 'react-router-dom';
+import { Button, Card, Header, Icon, Modal } from '@components/UI';
+import Identity from '@utils/Identity';
 import './Scenario.css';
 
 class FinishSlide extends React.Component {
@@ -57,34 +58,39 @@ class FinishSlide extends React.Component {
     }`;
 
     const extra = (
-      <Card.Content extra tabIndex="0">
+      <Card.Content extra>
         {this.isCohortScenarioRun ? (
           <NavLink to={`/cohort/${cohortId}`}>Return to cohort</NavLink>
         ) : (
           <NavLink to="/scenarios/">Return to scenarios</NavLink>
         )}
       </Card.Content>
     );
+
+    const ariaLabelledby = Identity.id();
+    const ariaDescribedby = Identity.id();
+    const ariaLabel = `Ready to finish this scenario? If you're ready to finish, click "I'm done!"`;
+
     return (
       <React.Fragment>
         <Modal.Accessible open={isConfirmBoxOpen}>
           <Modal
             role="dialog"
-            aria-modal="true"
             size="tiny"
+            aria-modal="true"
             open={isConfirmBoxOpen}
           >
-            <Header>
+            <Header aria-label={ariaLabel}>
               <Icon.Group className="em__icon-group-margin">
                 <Icon name="newspaper outline" />
                 <Icon corner="top right" name="check circle" color="orange" />
               </Icon.Group>
 
-              <Header.Content tabIndex="0">
+              <Header.Content>
                 Ready to finish this scenario?
               </Header.Content>
             </Header>
-            <Modal.Content tabIndex="0">
+            <Modal.Content>
               If you&apos;re ready to finish, click &quot;I&apos;m done!&quot;
             </Modal.Content>
             <Modal.Actions>