updates for WV-505 tab flow order

wevote · Sep 10, 2024 · 0d4aba5 · 0d4aba5
1 parent 708ad08
commit 0d4aba5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
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>