Some Wave/WebAim recommended fixes. (#1635)

gnosis · Nov 20, 2020 · 43ca2ef · 43ca2ef
1 parent 81e7ef0
commit 43ca2ef
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/src/components/common/Tabs/TabItem.tsx b/src/components/common/Tabs/TabItem.tsx
@@ -14,9 +14,9 @@ interface WrapperProps {
   isActive: boolean
 }
 
-const Wrapper = styled.li<WrapperProps>`
+const Wrapper = styled.button<WrapperProps>`
   background: ${({ isActive, activeColor }): string => `var(${isActive ? activeColor : '--color-primary'})`};
-  color: ${({ isActive }): string => `var(--color-text-${isActive ? 'primary' : 'secondary2'})`};
+  color: ${({ isActive }): string => `var(--color-${isActive ? 'primary' : 'secondary2'})`};
   height: var(--height-button-default);
   display: flex;
   align-items: center;
@@ -25,8 +25,13 @@ const Wrapper = styled.li<WrapperProps>`
   font-size: var(--font-size-large);
   letter-spacing: 0.1rem;
   text-align: center;
+  appearance: none;
+  border: 0;
   justify-content: center;
   cursor: pointer;
+  outline: 0;
+
+  /* TODO: Provide alternative :focus styling because of using outline: 0; */
 
   &:first-of-type {
     border-top-left-radius: var(--border-radius-default);
@@ -43,7 +48,13 @@ const TabItem: React.FC<TabProps> = (props) => {
   const { onTabClick, id, title, isActive, activeColor } = props
 
   return (
-    <Wrapper activeColor={activeColor} isActive={isActive} onClick={(): void => onTabClick(id)}>
+    <Wrapper
+      role="tab"
+      activeColor={activeColor}
+      aria-selected={isActive}
+      isActive={isActive}
+      onClick={(): void => onTabClick(id)}
+    >
       {title}
     </Wrapper>
   )

diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
   flex-flow: column;
   width: 100%;
 
-  > ul {
+  > div {
     list-style: none;
     display: flex;
     flex-flow: row nowrap;
@@ -30,7 +30,7 @@ const Tabs: React.FC<Props> = (props) => {
 
   return (
     <Wrapper>
-      <ul>
+      <div role="tablist">
         {props.tabItems.map(({ id, title, activeColor }) => (
           <TabItem
             key={id}
@@ -41,7 +41,7 @@ const Tabs: React.FC<Props> = (props) => {
             activeColor={activeColor}
           />
         ))}
-      </ul>
+      </div>
       <TabContent tabItems={props.tabItems} activeTab={activeTab} />
     </Wrapper>
   )

diff --git a/src/components/layout/GenericLayout/Header/index.tsx b/src/components/layout/GenericLayout/Header/index.tsx
@@ -59,7 +59,7 @@ interface Props {
 export const Header: React.FC<Props> = ({ menu, tools }) => (
   <HeaderStyled>
     <Logo to="/v2" href="#">
-      <img src={LogoImage} />
+      <img src={LogoImage} alt="Trading interface homepage" />
     </Logo>
     {menu}
     {tools}