Merge pull request #4239 from eaw-pid/WV-616

[MERGE READY] - WV-616 - Ballot Page: ADA - Not tabbing through 'Edit Address'
wevote · Feb 5, 2025 · 06859e1 · 06859e1
2 parents f5008dd + b4301bf
commit 06859e1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/js/components/Ballot/BallotTitleHeader.jsx b/src/js/components/Ballot/BallotTitleHeader.jsx
@@ -203,7 +203,7 @@ class BallotTitleHeader extends Component {
                             >
                               Ballot for
                               {' '}
-                              <span
+                              <span tabIndex={0}
                                 className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}
                               >
                                 <span>
@@ -224,7 +224,7 @@ class BallotTitleHeader extends Component {
                                 >
                                   Ballot for
                                   {' '}
-                                  <span className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
+                                  <span tabIndex={0} className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
                                     {substitutedAddress}
                                   </span>
                                   {linksOff ? <></> : editIconStyled}
@@ -237,7 +237,7 @@ class BallotTitleHeader extends Component {
                                   id="ballotTitleBallotAddress"
                                   onClick={this.showSelectBallotModalEditAddress}
                                 >
-                                  <span className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
+                                  <span tabIndex={0} className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
                                     Click to enter your address
                                   </span>
                                   {linksOff ? <></> : editIconStyled}

diff --git a/src/js/components/Style/BallotTitleHeaderStyles.jsx b/src/js/components/Style/BallotTitleHeaderStyles.jsx
@@ -4,9 +4,10 @@ import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { isCordova, isWebApp } from '../../common/utils/isCordovaOrWebApp';
 import isMobileScreenSize from '../../common/utils/isMobileScreenSize'; // 2024-04-16 Upgrade to using this
 
-export const BallotAddress = styled('div', {
+export const BallotAddress = styled('button', {
   shouldForwardProp: (prop) => !['centerText', 'allowTextWrap'].includes(prop),
 })(({ allowTextWrap, centerText }) => (`
+  all: unset;
   margin-left: 2px;
   ${isMobileScreenSize() || isCordova() ? '' : 'font-size: 18px;'}
   ${allowTextWrap || isMobileScreenSize() || isCordova() ? '' : 'overflow: hidden;'}