fix: the a11y issues in app component

insodoc · Aug 23, 2021 · 886555f · 886555f
1 parent 2f09925
commit 886555f
Showing 1 changed file with 66 additions and 59 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,7 +1,7 @@
 <script>
-  import Sidebar from "./components/Sidebar.svelte";
-  import Content from "./components/Content.svelte";
-  import applyEnvForObject from "./lib/applyEnvForObject";
+  import Sidebar from './components/Sidebar.svelte';
+  import Content from './components/Content.svelte';
+  import applyEnvForObject from './lib/applyEnvForObject';
 
   export let config;
 
@@ -30,8 +30,65 @@
   }
 </script>
 
+<svelte:head>
+  <title>{config.workspace.name}</title>
+</svelte:head>
+
+<header style="border-top: 6px solid {color !== null ? color : '#6a57d5'};">
+  <div class="header-left">
+    <span class="hamburger-toggler" on:click={toggleHamburger}>
+      <i class="fa fa-bars" aria-hidden="true" />
+    </span>
+
+    <div class="logo">
+      <img src="logo.png" alt={config.workspace.name} />
+    </div>
+
+    <h1 class="title">{config.workspace.name}</h1>
+  </div>
+  <div class="header-right">
+    <div class="run">
+      <a href={runInInsomniaLink} target="_blank">
+        <img src="https://insomnia.rest/images/run.svg" alt="Run in Insomnia" />
+      </a>
+    </div>
+    <div class="environment">
+      <label for="env" style="display:inline-block;">Environment:</label>
+      <select id="env" bind:value={envId}>
+        {#each config.environments as environment, idx}
+          <option value={idx}>{environment.name}</option>
+        {/each}
+      </select>
+    </div>
+    <span
+      class="example-toggler"
+      class:inactive={!exampleVisible}
+      on:click={toggleExample}
+      title="Toggle request examples"
+    >
+      <i class="fa fa-code" aria-hidden="true" />
+    </span>
+  </div>
+</header>
+
+<section class="wrapper" class:hide-right={!exampleVisible}>
+  <Sidebar
+    {requests}
+    {groups}
+    workspace={config.workspace}
+    visible={menuVisible}
+  />
+  <Content
+    {requests}
+    {groups}
+    workspace={config.workspace}
+    cookiejars={config.cookiejars}
+    {env}
+  />
+</section>
+
 <style type="scss" global>
-  @import "./styles/main";
+  @import './styles/main';
 
   header {
     box-sizing: border-box;
@@ -68,6 +125,7 @@
     vertical-align: middle;
     font-size: 22px;
     color: #000;
+    cursor: pointer;
   }
 
   header .logo {
@@ -100,62 +158,11 @@
     vertical-align: middle;
   }
 
+  .example-toggler {
+    cursor: pointer;
+  }
+
   .wrapper {
     margin-top: 60px;
   }
 </style>
-
-<svelte:head>
-  <title>{config.workspace.name}</title>
-</svelte:head>
-
-<header style="border-top: 6px solid {color !== null ? color : '#6a57d5'};">
-  <div class="header-left">
-    <a href="javascript:" class="hamburger-toggler" on:click={toggleHamburger}>
-      <i class="fa fa-bars" aria-hidden="true"></i>
-    </a>
-
-    <div class="logo">
-      <img src="logo.png" alt={config.workspace.name} />
-    </div>
-
-    <h1 class="title">{config.workspace.name}</h1>
-  </div>
-  <div class="header-right">
-    <div class="run">
-      <a href={runInInsomniaLink} target="_blank">
-        <img src="https://insomnia.rest/images/run.svg" alt="Run in Insomnia" />
-      </a>
-    </div>
-    <div class="environment">
-      <label for="env" style="display:inline-block;">Environment:</label>
-      <select id="env" bind:value={envId}>
-        {#each config.environments as environment, idx}
-          <option value={idx}>{environment.name}</option>
-        {/each}
-      </select>
-    </div>
-    <a
-      href="javascript:;"
-      class="example-toggler"
-      class:inactive={!exampleVisible}
-      on:click={toggleExample}
-      title="Toggle request examples">
-      <i class="fa fa-code" aria-hidden="true"></i>
-    </a>
-  </div>
-</header>
-
-<section class="wrapper" class:hide-right={!exampleVisible}>
-  <Sidebar
-    {requests}
-    {groups}
-    workspace={config.workspace}
-    visible={menuVisible} />
-  <Content
-    {requests}
-    {groups}
-    workspace={config.workspace}
-    cookiejars={config.cookiejars}
-    {env} />
-</section>