use semantic element

Author: yeion7

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

@@ -106,7 +106,7 @@ export const SandboxName: FunctionComponent = () => {
               ) : (
                 'Anonymous '
               )}
-              /{' '}
+              <span role="presentation">/ </span>
             </Folder>
           </animated.div>
         )}
@@ -125,10 +125,15 @@ 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}
+          >
             {sandboxName}
           </Name>
         )}

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

@@ -65,6 +65,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;
   `}
 `;