Merge branch 'yeion7-sandbox-navigation-a11y'

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Header/Header.tsx

@@ -44,7 +44,7 @@ export const Header: React.FC<IHeaderProps> = ({ zenMode }) => {
   } = useOvermind();
 
   return (
-    <Container zenMode={zenMode}>
+    <Container zenMode={zenMode} as="header">
       <Left>
         {hasLogIn ? (
           <DashboardLink to={dashboardUrl()}>

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx

@@ -105,7 +105,7 @@ export const SandboxName: FunctionComponent = () => {
               ) : (
                 'Anonymous '
               )}
-              /{' '}
+              <span role="presentation">/ </span>
             </Folder>
           </animated.div>
         )}
@@ -124,10 +124,18 @@ export const SandboxName: FunctionComponent = () => {
               onKeyUp={handleKeyUp}
               placeholder={name}
               value={value}
+              arial-label="sandbox name"
             />
           </Form>
         ) : (
-          <Name onClick={owned ? handleNameClick : noop} owned={owned}>
+          <Name
+            as={owned ? 'button' : 'span'}
+            onClick={owned ? handleNameClick : noop}
+            owned={owned}
+            aria-label={
+              owned ? `${sandboxName}, change sandbox name` : sandboxName
+            }
+          >
             {sandboxName}
           </Name>
         )}

packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/elements.ts

@@ -64,6 +64,10 @@ export const Name = styled.span<{ owned?: boolean }>`
     margin-left: 0.25rem;
     cursor: ${owned ? 'pointer' : 'initial'};
     text-overflow: ellipsis;
+    appearance: ${owned ? 'none' : 'initial'};
+    background: none;
+    border: 0;
+    outline: 0;
   `}
 `;
 

packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx

@@ -70,6 +70,8 @@ const IconComponent: FunctionComponent<IconProps> = ({
       <IconContainer
         isDisabled={isDisabled}
         selected={selected}
+        as="button"
+        aria-label={name}
         onClick={() => {
           if (selected) {
             setWorkspaceHidden({ hidden: true });
@@ -79,7 +81,7 @@ const IconComponent: FunctionComponent<IconProps> = ({
           }
         }}
       >
-        <Icon />
+        <Icon aria-hidden />
       </IconContainer>
     </Tooltip>
   );
@@ -99,7 +101,12 @@ export const Navigation: FunctionComponent<Props> = ({
   const disabledItems = getDisabledItems(state);
 
   return (
-    <Container topOffset={topOffset} bottomOffset={bottomOffset}>
+    <Container
+      topOffset={topOffset}
+      bottomOffset={bottomOffset}
+      as="nav"
+      aria-label="Sandbox Navigation"
+    >
       <SingletonTooltip placement="right">
         {singleton => (
           <>

packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts

@@ -43,6 +43,10 @@ export const IconContainer = styled.div<{
     props.theme[`activityBar.inactiveForeground`] ||
     css`rgba(255, 255, 255, 0.5)`};
   cursor: pointer;
+  background: transparent;
+  border: 0;
+  appearance: none;
+  outline: 0;
 
   &:hover {
     color: ${props => props.theme[`activityBar.foreground`] || css`white`};