Bug/171 - Random small bug fixes (#172)

* 171 - Unify checkbox container's border-color with other filters' border-color * 171 - Fix front page's icon size and margins * 171 - Fix footer's logo's role * 171 - Fix breadcrumbs' aria-labels: https://www.w3.org/WAI/WCAG21/Understanding/label-in-name * 171 - Add aria-labels for offsetButtons * 171 - Fix pie charts' header level and then its styles * 171 - Fix tabs' active links' hover * 171 - Remove redundant title * 171 - Correct alt text for scrollButton * 171 - Remove duplicate 'main' * 171 - Remove redundant class, links have underline by default * 171 - Remove redundant !importants * 171 - Replace pixels with variables * 171 - Remove text-decoration from links because it's default style * 171 - Delete redundant file * 171 - Fix accordion's first th's width * 171 - Fix table th's margin * 171 - Fix footer's height and add some margin * 171 - Open all external links in a new tab * 171 - Add default case for breadcrumb's switch case * 171 - Remove redundant aria attributes and content + hide 'loading' text so it's not read twice by screen reader
salabs · Apr 8, 2021 · 6a1c4d6 · 6a1c4d6
1 parent 36cdf71
commit 6a1c4d6
Show file tree

Hide file tree

Showing 34 changed files with 111 additions and 144 deletions.
diff --git a/frontend/src/components/BreadcrumbNav.jsx b/frontend/src/components/BreadcrumbNav.jsx
@@ -45,19 +45,19 @@ const ListItems = ({ status }) => {
         .set('series', {
             to: `/series/${seriesName}/overview`,
             id: 'SeriesBreadCrumb',
-            ariaLabel: `series ${selectedBranchState.name}`,
+            ariaLabel: `${selectedBranchState.name}: series' name`,
             name: selectedBranchState.name,
         })
         .set('build', {
             to: `/series/${seriesId}/build/${buildId}/overview`,
             id: 'BuildBreadCrumb',
-            ariaLabel: `build id ${buildId}`,
+            ariaLabel: `${buildId}: build's id`,
             name: buildId,
         })
         .set('suite', {
             to: `/series/${seriesId}/build/${buildId}/suite/${suiteId}/history`,
             id: 'SuiteBreadCrumb',
-            ariaLabel: `suite id ${suiteId}`,
+            ariaLabel: `${suiteId}: suite's id`,
             name: suiteId,
         });
 
@@ -93,6 +93,8 @@ const ListItems = ({ status }) => {
                 <LinkItem key="suite" link={links.get('suite')} current />
             );
             break;
+        default:
+            breadcrumbArray.push('');
     }
 
     return breadcrumbArray;

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -8,16 +8,20 @@ const Footer = () => {
 
     return (
         <FooterContainer>
-            <EpiIcon role="img" aria-hidden="true">
+            <EpiIcon role="presentation" aria-hidden="true">
                 {t('footer.E')}
             </EpiIcon>
             <TextStyles>
                 {t('footer.epimetheus')} {t('footer.version')}{' '}
                 <span className="underline">{packageJson.version}</span>{' '}
                 {t('footer.powered')}{' '}
-                <span className="underline">
-                    <a href="https://www.siili.com">{t('footer.siili')}</a>
-                </span>
+                <a
+                    href="https://www.siili.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t('footer.siili')}
+                </a>
                 .
             </TextStyles>
         </FooterContainer>

diff --git a/frontend/src/components/Footer.styles.js b/frontend/src/components/Footer.styles.js
@@ -6,11 +6,11 @@ export const FooterContainer = styled.footer`
     color: var(--nero-white);
     display: flex;
     align-items: center;
-    height: var(--space-48);
+    min-height: var(--space-48);
 
     a {
         background-color: var(--titan-green);
-        color: var(--nero-white) !important;
+        color: var(--nero-white);
 
         &:focus {
             outline-color: var(--nero-white);
@@ -32,5 +32,6 @@ export const EpiIcon = styled.span`
 `;
 
 export const TextStyles = styled.span`
+    margin-right: var(--space-8);
     margin-left: var(--space-24);
 `;
diff --git a/frontend/src/components/Loading.jsx b/frontend/src/components/Loading.jsx
@@ -9,7 +9,7 @@ const Loading = () => {
             aria-label="Loading"
             aria-relevant="all"
         >
-            Loading
+            <span aria-hidden="true">Loading</span>
         </LoadingDiv>
     );
 };

diff --git a/frontend/src/components/Loading.styles.js b/frontend/src/components/Loading.styles.js
@@ -12,7 +12,7 @@ export const LoadingDiv = styled.div`
         content: '...';
         vertical-align: bottom;
         display: inline-block;
-        width: 0px;
+        width: 0;
         height: 30px;
         animation-name: history-loader;
         animation-duration: 1.5s;

diff --git a/frontend/src/components/MainNav.jsx b/frontend/src/components/MainNav.jsx
@@ -23,7 +23,11 @@ const MainNav = () => {
                     <NavLink to="/team" className={team ? 'active' : ''}>
                         {t('team')}
                     </NavLink>
-                    <a href="https://github.com/salabs/Epimetheus">
+                    <a
+                        href="https://github.com/salabs/Epimetheus"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
                         {t('github')}
                     </a>
                 </LinkContainer>

diff --git a/frontend/src/components/MainNav.styles.js b/frontend/src/components/MainNav.styles.js
@@ -9,8 +9,8 @@ export const NavBar = styled.nav`
 `;
 
 export const SiteLogo = styled.div`
-    margin: 0px var(--space-24) 0px var(--space-40);
-    font-family: 'Hack' !important;
+    margin: 0 var(--space-24) 0 var(--space-40);
+    font-family: 'Hack';
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: 700;

diff --git a/frontend/src/components/accordion/Accordion.jsx b/frontend/src/components/accordion/Accordion.jsx
@@ -9,7 +9,7 @@ import {
 } from './Accordion.styles';
 import { ReactComponent as Up } from '../../images/chevron-up.svg';
 import { ReactComponent as Down } from '../../images/chevron-down.svg';
-import { SimpleTable } from '../table/Table.styles';
+import { NarrowTh, SimpleTable } from '../table/Table.styles';
 
 const Accordion = ({ header, name, value }) => {
     const [t] = useTranslation(['accordion']);
@@ -38,7 +38,7 @@ const Accordion = ({ header, name, value }) => {
                 <SimpleTable id="datatable">
                     <thead>
                         <tr>
-                            <th>{t('name')}</th>
+                            <NarrowTh>{t('name')}</NarrowTh>
                             <th>{t('value')}</th>
                         </tr>
                     </thead>
@@ -49,7 +49,13 @@ const Accordion = ({ header, name, value }) => {
                                 <td>
                                     {item.value.includes('Http') ||
                                     item.value.includes('http') ? (
-                                        <a href={item.value}>{item.value}</a>
+                                        <a
+                                            href={item.value}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                        >
+                                            {item.value}
+                                        </a>
                                     ) : (
                                         <span key={index}>{item.value}</span>
                                     )}

diff --git a/frontend/src/components/accordion/Accordion.styles.js b/frontend/src/components/accordion/Accordion.styles.js
@@ -67,7 +67,7 @@ export const Content = styled.div`
         word-break: break-word;
 
         th:first-of-type {
-            min-width: 150px;
+            min-width: 110px;
         }
     }
 `;

diff --git a/frontend/src/components/attributeTag/AttributeTag.styles.js b/frontend/src/components/attributeTag/AttributeTag.styles.js
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 export const AttributeTagContainer = styled.div`
-    padding: 0 8px;
-    border-radius: 8px;
+    padding: 0 var(--space-8);
+    border-radius: var(--space-8);
     font-size: 10px;
-    margin: 0 8px;
+    margin: 0 var(--space-8);
     display: inline-block;
     line-height: 14px;
     white-space: nowrap;

diff --git a/frontend/src/components/buildTable/Error.styles.js b/frontend/src/components/buildTable/Error.styles.js
@@ -6,6 +6,6 @@ export const ErrorMsg = styled.td`
     & > span {
         display: block;
         background: ${props =>
-            props.build.status === 'FAIL' && 'var(--arabia-red) !important'};
+            props.build.status === 'FAIL' && 'var(--arabia-red)'};
     }
 `;
diff --git a/frontend/src/components/buttons/LastRunCheckbox.styles.js b/frontend/src/components/buttons/LastRunCheckbox.styles.js
@@ -8,7 +8,7 @@ export const Header = styled.div`
 export const StyledDiv = styled.div`
     display: flex;
     flex-direction: ${props => props.direction};
-    border: 1px solid var(--tonic-grey);
+    border: 1px solid var(--evidence-grey);
     border-radius: var(--space-4);
     width: ${props => (props.direction === 'column' ? '10%' : '30%')};
     max-width: 230px;

diff --git a/frontend/src/components/buttons/OffSetButtons.jsx b/frontend/src/components/buttons/OffSetButtons.jsx
@@ -108,6 +108,7 @@ const Offset = () => {
                     onClick={() => handleDirectionButtonPress('left')}
                     disabled={leftDisabled}
                     id="left_offset_button"
+                    aria-label="<"
                     className={`left${leftDisabled}`}
                 >
                     <Left alt="<" />
@@ -122,6 +123,7 @@ const Offset = () => {
                     onClick={() => handleDirectionButtonPress('right')}
                     disabled={rightDisabled}
                     id="right_offset_button"
+                    aria-label=">"
                     className={`right${rightDisabled}`}
                 >
                     <Right src={Right} alt=">" />

diff --git a/frontend/src/components/buttons/OffSetButtons.styles.js b/frontend/src/components/buttons/OffSetButtons.styles.js
@@ -15,8 +15,8 @@ export const FlexDiv = styled.div`
 
 export const StyledInput = styled.input`
     border: 1px solid var(--evidence-grey);
-    border-radius: 4px;
-    max-width: 54px;
+    border-radius: var(--space-4);
+    max-width: var(--space-64);
     height: var(--space-32);
     text-align: right;
 `;
diff --git a/frontend/src/components/buttons/button.styles.jsx b/frontend/src/components/buttons/button.styles.jsx
@@ -71,7 +71,7 @@ export const ToggleButton = styled.button`
     min-width: var(--space-40);
     padding: 0 var(--space-16);
     white-space: nowrap;
-    box-shadow: 0px 3px 3px -1px var(--tonic-grey);
+    box-shadow: 0 3px 3px -1px var(--tonic-grey);
 
     &:hover {
         background-color: var(--hermanni-grey);

diff --git a/frontend/src/components/card/card.styles.js b/frontend/src/components/card/card.styles.js
@@ -87,7 +87,7 @@ export const CardHeading = styled.span`
     font-size: 20px;
     font-weight: 500;
     font-family: 'Noto Serif Semibold';
-    line-height: 24px;
+    line-height: var(--space-24);
     display: flex;
     justify-content: space-between;
     align-items: center;

diff --git a/frontend/src/components/dashlist/KeywordAnalysisTable.styles.js b/frontend/src/components/dashlist/KeywordAnalysisTable.styles.js
diff --git a/frontend/src/components/graphs/SuiteInstability.js b/frontend/src/components/graphs/SuiteInstability.js
@@ -9,7 +9,7 @@ import { pickIcon } from '../TestIcon';
 import { Table } from '../table/Table';
 
 const canvasStyles = css`
-    padding: 20px 0px;
+    padding: 20px 0;
     summary {
         display: none;
     }

diff --git a/frontend/src/components/historyTable/Heading.styles.js b/frontend/src/components/historyTable/Heading.styles.js
@@ -5,7 +5,7 @@ export const StyledLink = styled(Link)`
     display: block;
     width: 100%;
     margin: 0;
-    padding: 0px;
+    padding: 0;
     text-align: center;
     height: 100%;
     text-decoration: none;

diff --git a/frontend/src/components/overview/Build.styles.js b/frontend/src/components/overview/Build.styles.js
@@ -22,8 +22,9 @@ export const ChartContainer = styled.div`
     height: ${props => props.height};
 `;
 
-export const ElementHeader = styled.h3`
-    text-align: center;
-    margin: 10px;
+export const ElementHeader = styled.h2`
     font-family: 'Hack';
+    font-size: 20px;
+    text-align: center;
+    margin: 0;
 `;
diff --git a/frontend/src/components/suite/LogMessages.jsx b/frontend/src/components/suite/LogMessages.jsx
@@ -34,10 +34,7 @@ const LogMessages = ({ test }) => {
                                         <SuiteLogMessage message={message} />
                                     </td>
                                     <td>
-                                        <div
-                                            className="table-item"
-                                            title={timestamp}
-                                        >
+                                        <div className="table-item">
                                             {timestamp}
                                         </div>
                                     </td>

diff --git a/frontend/src/components/suite/SuiteLogMessage.jsx b/frontend/src/components/suite/SuiteLogMessage.jsx
@@ -43,7 +43,6 @@ const SuiteLogMessage = ({ message }) => {
 
     return (
         <TestMessage
-            title={message}
             role="button"
             className={canBeOpened.current ? 'can-be-opened' : ''}
             tabIndex={canBeOpened.current ? 0 : -1}

diff --git a/frontend/src/components/suite/Testlist.styles.js b/frontend/src/components/suite/Testlist.styles.js
@@ -8,7 +8,7 @@ import { ReactComponent as Down } from '../../images/chevron-down-white.svg';
 export const FlexContainer = styled.div`
     display: flex;
     flex-direction: column;
-    margin: var(--space-40) 0px;
+    margin: var(--space-40) 0;
 
     .open,
     .close {
@@ -72,7 +72,7 @@ export const SvgUp = styled(Up)`
 `;
 
 export const TestListContainer = styled.div`
-    padding-left: 24px;
+    padding-left: var(--space-24);
 
     ul {
         list-style: none;
@@ -138,18 +138,18 @@ export const TestStatusRow = styled.div`
 export const StyledLink = styled(({ isselected, ...props }) => (
     <NavLink {...props} />
 ))`
-    padding: 0 4px;
+    padding: 0 var(--space-4);
     font-weight: bolder;
     text-decoration: none;
     flex: 2;
-    color: ${props => props.isselected && 'var(--pirlo-blue) !important'};
+    color: ${props => props.isselected && 'var(--pirlo-blue)'};
     outline-offset: -2px;
 `;
 
 export const SvgStatus = styled.span`
     position: relative;
     top: -2px;
-    left: 8px;
+    left: var(--space-8);
     flex: 0.5;
 `;
 

diff --git a/frontend/src/components/table/ScrollTableButton.jsx b/frontend/src/components/table/ScrollTableButton.jsx
@@ -13,7 +13,7 @@ const ScrollTableButton = props => {
                 onClick={() => props.moveLeft()}
                 disabled={!canScrollLeft}
             >
-                <img src={ChevronLeft} alt=">" />
+                <img src={ChevronLeft} alt="<" />
             </ScrollButton>
 
             <ScrollButton