Merge pull request #4019 from jedwardmook/WV-505

[TEAM REVIEW] WV 505 On the Ready Page, Update Tab order (UI Accessibility) - John Mook
wevote · Sep 12, 2024 · e1d38aa · e1d38aa
2 parents 80a64bd + 6949dd4
commit e1d38aa
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -110,11 +110,11 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@loadable/component": "^5.16.4",
-    "@mui/icons-material": "^5.15.20",
+    "@mui/icons-material": "^5.16.0",
     "@mui/lab": "^5.0.0-alpha.96",
-    "@mui/material": "^5.15.20",
+    "@mui/material": "^5.16.0",
     "@mui/styled-engine-sc": "^5.10.1",
-    "@mui/styles": "^5.15.20",
+    "@mui/styles": "^5.16.0",
     "@openreplay/tracker": "^8.1.1",
     "@storybook/addon-actions": "^7.6.20",
     "@stripe/react-stripe-js": "^1.3.0",

diff --git a/src/js/components/Ballot/BallotElectionListWithFilters.jsx b/src/js/components/Ballot/BallotElectionListWithFilters.jsx
@@ -786,9 +786,12 @@ const ElectionState = styled('div')`
   margin: 0 2px;
 `;
 
-const SimpleModeItemWrapper = styled('div')`
+const SimpleModeItemWrapper = styled('button')`
   cursor: pointer;
   margin-top: 12px;
+  padding: 0;
+  background: transparent;
+  border: none;
 `;
 
 const PriorOrUpcomingElectionsWrapper = styled('div')`

diff --git a/src/js/components/Navigation/FooterMainWeVote.jsx b/src/js/components/Navigation/FooterMainWeVote.jsx
@@ -84,7 +84,7 @@ class FooterMainWeVote extends Component {
         <TopSectionOuterWrapper>
           <TopSectionInnerWrapper>
             <OneRow>
-              <div id="footerLinkHowItWorks" className={classes.onClickDiv} onClick={this.openHowItWorksModal}>How It Works</div>
+              <button type="button" style={{ border: 'none', backgroundColor: 'transparent', padding: '0' }} id="footerLinkHowItWorks" className={classes.onClickDiv} onClick={this.openHowItWorksModal}>How It Works</button>
               <RowSpacer />
               <OpenExternalWebSite
                 linkIdAttribute="footerLinkWeVoteHelp"

diff --git a/src/js/components/Ready/ReadyFinePrint.jsx b/src/js/components/Ready/ReadyFinePrint.jsx
@@ -28,6 +28,7 @@ class ReadyFinePrint extends Component {
     this.state = {
       contentUnfurled: false,
     };
+    this.firstListItemRef = React.createRef();
   }
 
   componentDidMount () {
@@ -42,6 +43,9 @@ class ReadyFinePrint extends Component {
     this.setState({
       contentUnfurled: !contentUnfurled,
     });
+    if (!contentUnfurled) {
+      this.firstListItemRef.current.focus();
+    }
   }
 
   render () {
@@ -51,7 +55,7 @@ class ReadyFinePrint extends Component {
     return (
       <OuterWrapper>
         <InnerWrapper>
-          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge}>
+          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.firstListItemRef}>
             The fine print:
           </IntroHeader>
           <ListWrapper>

diff --git a/src/js/components/Ready/ReadyIntroduction.jsx b/src/js/components/Ready/ReadyIntroduction.jsx
@@ -34,6 +34,7 @@ class ReadyIntroduction extends Component {
     this.state = {
       contentUnfurled: false,
     };
+    this.firstListItemRef = React.createRef();
   }
 
   componentDidMount () {
@@ -65,6 +66,9 @@ class ReadyIntroduction extends Component {
     this.setState({
       contentUnfurled: !contentUnfurled,
     });
+    if (!contentUnfurled) {
+      this.firstListItemRef.current.focus();
+    }
   }
 
   showSelectBallotModalEditAddress = () => {
@@ -91,7 +95,7 @@ class ReadyIntroduction extends Component {
     return (
       <OuterWrapper>
         <InnerWrapper>
-          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge}>
+          <IntroHeader titleCentered={titleCentered} titleLarge={titleLarge} tabIndex={0} ref={this.firstListItemRef}>
             WeVote helps you:
           </IntroHeader>
           <ListWrapper>
@@ -104,9 +108,9 @@ class ReadyIntroduction extends Component {
                 <ListRow>
                   <Dot><StepNumberPlaceholder>&nbsp;</StepNumberPlaceholder></Dot>
                   <StepText id="readyIntroductionStepText1">
-                    <span className="u-link-color u-link-color-on-hover u-cursor--pointer" onClick={this.showSelectBallotModalEditAddress}>
-                      Enter your address
-                    </span>
+                    <button style={{ backgroundColor: 'transparent', border: 'none', padding: '0' }} onClick={this.showSelectBallotModalEditAddress} type="button">
+                      <span className="u-link-color u-link-color-on-hover u-link-underline-on-hover">Enter your address</span>
+                    </button>
                     {' '}
                     to find out when your next election is, and
                     {' '}

diff --git a/src/js/components/Widgets/ShowMoreButtons.jsx b/src/js/components/Widgets/ShowMoreButtons.jsx
@@ -57,7 +57,7 @@ const styles = (theme) => ({
   },
 });
 
-const ShowMoreButtonsStyled = styled('div')(({ theme }) => (`
+const ShowMoreButtonsStyled = styled('button')(({ theme }) => (`
   border: 0 !important;
   color: #0858A1;
   cursor: pointer;

diff --git a/src/js/pages/Ready.jsx b/src/js/pages/Ready.jsx
@@ -266,11 +266,6 @@ class Ready extends Component {
                   </DelayedLoad>
                 </Suspense>
               )}
-              {nextReleaseFeaturesEnabled && (
-                <ReadyTaskPlan
-                  arrowsOn
-                />
-              )}
             </div>
             <div className="col-lg-4 d-none d-lg-block">
               {(chosenReadyIntroductionTitle || chosenReadyIntroductionText) && (
@@ -293,6 +288,11 @@ class Ready extends Component {
               </ReadyIntroductionDesktopWrapper>
               {/* nextReleaseFeaturesEnabled && <PledgeToVote /> */}
             </div>
+            {nextReleaseFeaturesEnabled && (
+              <ReadyTaskPlan
+                arrowsOn
+              />
+            )}
           </div>
         </ReadyPageContainer>
       </PageContentContainer>