🔀 Merge pull request #11 from clean-css/feature/a11n

Improve a11n

Author: johannchopin

package.json

@@ -21,6 +21,7 @@
     "sirv-cli": "^1.0.12",
     "svelte": "^3.0.0",
     "svelte-bootstrap-icons": "1.5.0",
+    "svelte-emoji": "^1.0.2",
     "svelte-file-dropzone": "^0.0.15",
     "svelte-loader": "^3.1.2",
     "util": "^0.12.4",

src/App.svelte

@@ -1,4 +1,5 @@
 <script>
+  import GoToMainContent from './components/GoToMainContent.svelte'
   import Navbar from './components/Navbar.svelte'
   import Header from './components/Header.svelte'
   import Footer from './components/Footer.svelte'
@@ -7,9 +8,10 @@
   import Textarea from './components/Textarea.svelte'
 </script>
 
+<GoToMainContent />
 <Navbar />
 <Header />
-<main class="d-flex flex-column justify-content-center align-items-center px-2 px-sm-5">
+<main id="mainContent" class="d-flex flex-column justify-content-center align-items-center px-2 px-sm-5">
   <Settings />
   <Textarea />
   <FileDropzone />

src/components/CopySaveActions.svelte

@@ -8,6 +8,9 @@
   export let onSave
 
   const VALIDATION_ANIMATION_DURATION = 700
+  const DOWNLOAD_MINIFIED_CSS = 'Download minified css'
+  const COPY_MINIFIED_CSS = 'Copy minified css to clipboard'
+
   let isSavedToClipboard = false
   let isSaved = false
 
@@ -31,10 +34,20 @@
 </script>
 
 <div class={`d-flex ${className} copy-save-actions`}>
-  <button class="btn btn-link p-1" on:click={saveToClipboard}>
+  <button
+    class="btn btn-link p-1"
+    title={COPY_MINIFIED_CSS}
+    aria-label={COPY_MINIFIED_CSS}
+    on:click={saveToClipboard}
+  >
     <Icon name={isSavedToClipboard ? 'check' : 'clipboard'}/>
   </button>
-  <button class="btn btn-link p-1 ms-1" on:click={save}>
+  <button
+    class="btn btn-link p-1 ms-1"
+    title={DOWNLOAD_MINIFIED_CSS}
+    aria-label={DOWNLOAD_MINIFIED_CSS}
+    on:click={save}
+  >
     <Icon name={isSaved ? 'check' : 'download'}/>
   </button>
 </div>

src/components/Footer.svelte

@@ -1,5 +1,9 @@
+<script>
+  import Emoji from 'svelte-emoji'
+</script>
+
 <footer class="text-center mt-5 mb-2">
-  Hosted with <span>❤️&nbsp;</span> on <a href="//pages.github.com/">GitHub Pages</a>.
+  Hosted with <Emoji symbol="❤️ " label="love" /> on <a href="//pages.github.com/">GitHub Pages</a>.
 </footer>
 
 <style>

src/components/GoToMainContent.svelte

@@ -0,0 +1,12 @@
+<a
+  href="#mainContent"
+  class="position-absolute top-0 start-0 btn btn-outline-secondary bg-light text-primary m-2 visually-hidden-focusable"
+>
+  Go to main content
+</a>
+
+<style>
+  a {
+    z-index: 5;
+  }
+</style>

src/components/Icon/Icon.svelte

@@ -35,4 +35,4 @@
   }
 </style>
 
-<img src={icons[name]} class={`icon ${className}`} alt={`Icon ${name}`} />
+<img src={icons[name]} class={`icon ${className}`} alt="" />

src/components/SavedSizeBadge.svelte

@@ -4,4 +4,9 @@
   export { className as class }
 </script>
 
-<span class={`fw-lighter fst-italic ${className}`}> - saved {size / 1000} kB</span>
+<span 
+  class={`fw-lighter fst-italic ${className}`}
+  aria-live="polite"
+> 
+  - saved {size / 1000} kB
+</span>

src/components/Settings.svelte

@@ -11,8 +11,9 @@
 
 <div class="settings">
   <div class="d-flex justify-content-end">
-    <button class="btn mb-2" on:click={toggleOpen}>
+    <button class="btn btn-outline-secondary mb-2 d-flex bg-light text-dark" on:click={toggleOpen}>
       <Icon name={open ? 'gear-highlighted' : 'gear'}/>
+      <p class="m-0 ms-1">Settings</p>
     </button>
   </div>
 

src/components/Textarea.svelte

@@ -1,6 +1,8 @@
 <script>
   import { saveAs } from 'file-saver'
   import * as CleanCSS from 'clean-css'
+  import Emoji from 'svelte-emoji'
+
   import CopySaveActions from './CopySaveActions.svelte'
   import SavedSizeBadge from './SavedSizeBadge.svelte'
 
@@ -34,10 +36,23 @@
 
 <textarea bind:value={input} class="form-control" rows="6" placeholder="enter your raw css here to optimize it..."></textarea>
 <div class="row mt-2">
-  <button class="btn btn-primary d-inline" style="background-color: #27AAE1;" on:click={optimize}>optimize ➜</button>
+  <button
+    class="btn btn-primary d-inline"
+    style="background-color: #27AAE1;"
+    on:click={optimize}
+  >
+    optimize
+    <Emoji symbol="➜" />
+  </button>
 
   <div id="result" class="position-relative ms-2 flex-grow-1 d-flex p-0 align-items-center" style="width: 0;">
-    <input class="form-control" type="text" disabled={optimizedInput === undefined} bind:value={optimizedInput}>
+    <input
+      type="text"
+      class="form-control"
+      aria-hidden={true}
+      disabled={optimizedInput === undefined}
+      bind:value={optimizedInput}
+    >
     {#if optimizedInput !== undefined}
       <SavedSizeBadge size={savedSize} class="text-nowrap ms-2" />
       <CopySaveActions

yarn.lock

@@ -3730,6 +3730,11 @@ svelte-dev-helper@^1.1.9:
   resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
   integrity sha1-fRh9tcbNu9ZNdaMvkbiZi94yc8M=
 
+svelte-emoji@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/svelte-emoji/-/svelte-emoji-1.0.2.tgz#43212210bc77fcd766cc846022a98c787a2a6cbd"
+  integrity sha512-vJCBsgrSKZONxBn7ICZxCKzDRaJk7Bi3dALwa3PrIiPS8DP8Fw64N38EuuY90eKNuLmOm4DLNRM+hSeH0V2G5g==
+
 svelte-file-dropzone@^0.0.15:
   version "0.0.15"
   resolved "https://registry.yarnpkg.com/svelte-file-dropzone/-/svelte-file-dropzone-0.0.15.tgz#6145fbafc448ea47ec803303641246efdb31cae6"