Merge pull request #3989 from eaw-pid/ready-page-accessibility-branch

MERGE READY - WV-373 Audit for ADA usability and implement accessibility improvements: Ready Page [TEAM REVIEW]
wevote · Aug 19, 2024 · 42a9552 · 42a9552
2 parents 9724fd4 + 71b87af
commit 42a9552
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 22 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -102,13 +102,13 @@ small {
 }
 
 a {
-  color:#007bff;
+  color:#0858A1;
   text-decoration:none;
   background-color:transparent
 }
 
 a:hover {
-  color:#0056b3;
+  color:#0858A1;
   text-decoration:underline
 }
 
@@ -1743,15 +1743,15 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .u-link-color {
-  color:#4371cc
+  color:#0858A1
 }
 
 .u-link-color-on-hover {
-  color:#4371cc
+  color:#0858A1
 }
 
 .u-link-color-on-hover:hover {
-  color:#4371cc
+  color:#0858A1
 }
 
 .u-bold {
@@ -1763,7 +1763,8 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .u-link-underline {
-  text-decoration:underline
+  text-decoration:underline;
+  color:#0858A1;
 }
 
 .u-link-underline-on-hover:hover {

diff --git a/src/js/common/components/Style/Colors.js b/src/js/common/components/Style/Colors.js
@@ -6,7 +6,7 @@ const colors = {
   primaryHover: '#09288A',
   secondaryHover: '#F5F7FD',
   darkGrey: '#454F69',
-  middleGrey: '#8C92A2',
+  middleGrey: '#5E5E5B',
   grey: '#AEB2BE',
   lightGrey: '#E5E6EA',
   ultraLightGrey: '#FAFAFA',

diff --git a/src/js/common/components/Widgets/ReadMore.jsx b/src/js/common/components/Widgets/ReadMore.jsx
@@ -115,7 +115,8 @@ export default class ReadMore extends Component {
         &hellip;
         {' '}
         <a //eslint-disable-line
-          className="u-link-color u-link-underline-on hover u-no-break"
+//         className="u-underline"
+          className="u-link-underline u-no-break"
           href="#"
           id="readMore"
           onClick={this.toggleLines}

diff --git a/src/js/components/Ballot/BallotTitleHeader.jsx b/src/js/components/Ballot/BallotTitleHeader.jsx
@@ -74,6 +74,7 @@ class BallotTitleHeader extends Component {
       substitutedAddress: BallotStore.getSubstitutedAddress(),
       substitutedState: BallotStore.getSubstitutedState(),
     });
+
   }
 
   onVoterStoreChange () {
@@ -109,6 +110,7 @@ class BallotTitleHeader extends Component {
   }
 
   render () {
+
     renderLog('BallotTitleHeader');  // Set LOG_RENDER_EVENTS to log all renders
     const { allowTextWrap, centerText, electionDateBelow, linksOff, shareButtonText, showBallotCaveat, showShareButton, turnOffVoteByBelow } = this.props;
     const {

diff --git a/src/js/components/Navigation/FooterCandidateList.jsx b/src/js/components/Navigation/FooterCandidateList.jsx
@@ -38,11 +38,13 @@ const FooterCandidateListWrapper = styled('span')`
   display: flex;
   flex-flow: column;
   margin-top: 10px; // To match BallotElectionListWithFilters
+
 `;
 
 const SimpleModeItemWrapper = styled('div')`
   cursor: pointer;
   margin-top: 12px;
+
 `;
 
 const SimpleModeTitle = styled('h2')`

diff --git a/src/js/components/Navigation/FooterMainWeVote.jsx b/src/js/components/Navigation/FooterMainWeVote.jsx
@@ -181,24 +181,24 @@ FooterMainWeVote.propTypes = {
 
 const styles = () => ({
   link: {
-    color: '#808080',
+    color: '#5E5E5B',
     '&:hover': {
-      color: '#4371cc',
+      color: '#5E5E5B',
     },
     textDecoration: 'none',
   },
   bottomLink: {
     color: '#333',
     textDecoration: 'none',
     '&:hover': {
-      color: '#4371cc',
+      color: '#5E5E5B',
     },
   },
   onClickDiv: {
-    color: '#808080',
+    color: '#5E5E5B',
     cursor: 'pointer',
     '&:hover': {
-      color: '#4371cc',
+      color: '#5E5E5B',
       textDecoration: 'underline',
     },
   },
@@ -244,7 +244,7 @@ const SearchEngineOptimizationSection = styled('div')`
 `;
 
 const Text = styled('p')(({ theme }) => (`
-  color: #808080;
+  color: #5E5E5B;
   font-size: 14px;
   margin-right: 0.5em;
   text-align: center;

diff --git a/src/js/components/Navigation/HeaderNotificationMenu.jsx b/src/js/components/Navigation/HeaderNotificationMenu.jsx
@@ -271,6 +271,7 @@ class HeaderNotificationMenu extends Component {
     return (
       <HeaderNotificationMenuWrapper id="HeaderNotificationMenuWrapper">
         <IconButton
+          aria-label="IconButton"
           aria-controls="headerNotificationsMenu"
           aria-haspopup="true"
           classes={menuOpen ? { root: classes.iconButtonRootSelected } : { root: classes.iconButtonRoot }}

diff --git a/src/js/components/Values/IssueCard.jsx b/src/js/components/Values/IssueCard.jsx
@@ -467,7 +467,7 @@ const IssueCardWrapper = styled('div', {
 `));
 
 const FollowersWrapper = styled('div')`
-  color: #999;
+  color: #5E5E5B;
   font-size: 14px;
 `;
 
@@ -497,7 +497,7 @@ const IssueAdvocatesImages = styled('div')`
 
 const IssueAdvocatesWrapper = styled('div')`
   align-items: center;
-  color: #999;
+  color: #5E5E5B;
   display: flex;
   font-size: 14px;
   justify-content: flex-start;

diff --git a/src/js/components/Values/IssueImageDisplay.jsx b/src/js/components/Values/IssueImageDisplay.jsx
@@ -16,13 +16,14 @@ export default class IssueImageDisplay extends Component {
       return null;
     }
 
-    const oneIssue = IssueStore.getIssueByWeVoteId(this.props.issueWeVoteId);
 
+    const oneIssue = IssueStore.getIssueByWeVoteId(this.props.issueWeVoteId);
+      //   console.log(oneIssue.issue_name)
     let issueIconLocalPath = '';
     if (oneIssue.issue_icon_local_path) {
       issueIconLocalPath = oneIssue.issue_icon_local_path;
     }
-    // console.log('IssueImageDisplay issueIconLocalPath:', issueIconLocalPath);
+      //     console.log('IssueImageDisplay issueIconLocalPath:', issueIconLocalPath);
 
     const issueIconImageUrl = (!issueIconLocalPath || issueIconLocalPath.length === 0) ?
       normalizedImagePath('/img/global/svg-icons/issues/thumbs-up-icon.svg') :
@@ -52,7 +53,7 @@ export default class IssueImageDisplay extends Component {
     if (issueImageSize === 'SMALL') {
       issueImage = (
         <ImageHandler
-          alt=""
+          alt={oneIssue.issue_name}
           className={`card-main__org-avatar ${supportOrOpposeClass}${voterIsNotFollowingThisIssueClass}`}
           hidePlaceholder={hidePlaceholder}
           imageUrl={issueIconImageUrl}
@@ -62,7 +63,7 @@ export default class IssueImageDisplay extends Component {
     } else if (issueImageSize === 'MEDIUM') {
       issueImage = (
         <ImageHandler
-          alt=""
+          alt={oneIssue.issue_name}
           className={`card-main__org-avatar ${supportOrOpposeClass}${voterIsNotFollowingThisIssueClass}`}
           hidePlaceholder={hidePlaceholder}
           imageUrl={issueIconImageUrl}
@@ -72,7 +73,7 @@ export default class IssueImageDisplay extends Component {
     } else if (issueImageSize === 'LARGE') {
       issueImage = (
         <ImageHandler
-          alt=""
+          alt={oneIssue.issue_name}
           className={`card-main__org-avatar ${supportOrOpposeClass}${voterIsNotFollowingThisIssueClass}`}
           hidePlaceholder={hidePlaceholder}
           imageUrl={issueIconImageUrl}

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