Merge pull request #3939 from jpena925/develop

WV-332 TEAM REVIEW: add tab navigation on ballot page and candidate page
wevote · Jun 5, 2024 · 085c03a · 085c03a
2 parents 10dbba2 + 5a64384
commit 085c03a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -154,10 +154,6 @@ button {
   border-radius:0
 }
 
-button:focus:not(:focus-visible) {
-  outline:0
-}
-
 input,button,select,optgroup,textarea {
   margin:0;
   font-family:inherit;
@@ -1583,10 +1579,6 @@ img {
   max-width:100%
 }
 
-button:focus {
-  outline:0!important
-}
-
 .icon-office-child {
   font-size:24px
 }

diff --git a/src/js/common/components/Style/CampaignDetailsStyles.jsx b/src/js/common/components/Style/CampaignDetailsStyles.jsx
@@ -245,8 +245,17 @@ export const OtherElectionsWrapper = styled('div')`
   //padding-top: 25px;
 `;
 
-export const ReadMoreSpan = styled('div')`
+export const ReadMoreSpan = styled('button')`
   color: #4371cc;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+
+  &:focus {
+    outline: 5px solid #4371cc;
+    outline-offset: 2px;
+  }
 `;
 
 export const SpeakerAndPhotoOuterWrapper = styled('div')(({ theme }) => (`

diff --git a/src/js/components/Style/BallotStyles.jsx b/src/js/components/Style/BallotStyles.jsx
@@ -92,13 +92,16 @@ export const CandidateNameH1 = styled('h1')(({ theme }) => (`
   }
 `));
 
-export const CandidateNameH4 = styled('h4')`
+export const CandidateNameH4 = styled('button')`
   color: #4371cc;
   font-weight: 400;
   font-size: 20px;
   margin-bottom: 0 !important;
   min-width: 124px;
   white-space: normal;
+  border: none;
+  background-color: #FFF;
+  padding: 0;
   &:hover {
     text-decoration: underline;
   }

diff --git a/src/js/components/Values/ValueNameWithPopoverDisplay.jsx b/src/js/components/Values/ValueNameWithPopoverDisplay.jsx
@@ -287,11 +287,14 @@ const RenderedOrganizationsWrapper = styled('div')`
   margin-top: 6px;
 `;
 
-const WordWrapper = styled('span')`
+const WordWrapper = styled('button')`
   color: #000;
   opacity: 0.6;
   text-decoration: underline;
   text-decoration-color: #ccc;
+  border: none;
+  background-color: #FFF;
+  padding: 0;
   &:hover {
     text-decoration: underline;
   }