Merge pull request #27 from technikhil314/develop

Author: technikhil314

components/RTStickyCopyButton.vue

@@ -6,6 +6,7 @@
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
       }"
+      :aria-label="ariaLabel"
       @click="handleClick"
     >
       <svg
@@ -49,6 +50,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    ariaLabel: {
+      type: String,
+      default: 'Copy to clipboard',
+    },
   },
   data() {
     return {

components/navbar.vue

@@ -46,7 +46,7 @@
       </div>
 
       <div class="flex items-center justify-between flex-1">
-        <div class="items-center">
+        <div class="items-center w-1/2">
           <a
             href="https://github.com/technikhil314/offline-diff-viewer/stargazers"
             title="github stars on this open source project"
@@ -58,15 +58,16 @@
           </a>
           <slot name="left" />
         </div>
-        <div class="items-center">
+        <div class="flex items-center justify-end w-1/2 gap-4">
           <slot name="right" />
           <button
             type="button"
             class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75"
+            aria-label="Toggle Dark Mode"
             @click="toggleDarkMode"
           >
             <svg
-              v-if="!darkMode"
+              v-if="darkMode"
               fill="none"
               stroke="currentColor"
               class="w-6 h-6"
@@ -81,7 +82,7 @@
               ></path>
             </svg>
             <svg
-              v-if="darkMode"
+              v-if="!darkMode"
               fill="none"
               class="w-6 h-6"
               stroke="currentColor"

helpers/isSkipScrollInSyncTutorial.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipScrollInSyncTutorial?: string
+  } = {
+    isSkipScrollInSyncTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipScrollInSyncTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipScrollInSyncTutorial === 'true'
+}

pages/index.vue

@@ -22,7 +22,11 @@
                 type="text"
                 class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
                 placeholder="Add label to this text block"
+                value="Original Text"
               />
+              <span class="sr-only"
+                >Add label to this original text bloack</span
+              >
             </label>
             <textarea
               id="lhs"
@@ -32,13 +36,19 @@
             ></textarea>
           </div>
           <div class="flex flex-col w-1/2 gap-4">
-            <input
-              id="rhsLabel"
-              name="rhsLabel"
-              type="text"
-              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
-              placeholder="Add label to this text block"
-            />
+            <label for="lhsLabel" class="relative">
+              <input
+                id="rhsLabel"
+                name="rhsLabel"
+                type="text"
+                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
+                placeholder="Add label to this text block"
+                value="Changed text"
+              />
+              <span class="sr-only"
+                >Add label to this original text bloack</span
+              >
+            </label>
             <textarea
               id="rhs"
               rows="28"
@@ -50,6 +60,7 @@
         <div class="self-end flex-grow-0 w-full text-center">
           <button
             class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
+            aria-label="Click here to compare the inputted text blocks"
           >
             Compare
           </button>
@@ -78,26 +89,27 @@ export default Vue.extend({
     const driver = new Driver({
       closeBtnText: 'Skip',
       className: 'dark:filter dark:invert',
-      stageBackground: this.isDarkMode ? 'hsl(221deg 30% 70%)' : '#ffffff',
+      stageBackground: this.isDarkMode
+        ? 'hsl(221deg 50% 90% / 0.5)'
+        : '#ffffff',
       onReset: () => {
         document.cookie = 'isSkipTutorial=true; max-age=31536000; path=/;'
       },
     })
-    // Define the steps for introduction
     if (!this.isSkipTutorial) {
       driver.defineSteps([
         {
           element: '#lhsLabel',
           popover: {
             title: 'New feature',
-            description: 'Now you can add labels to text blocks',
+            description: 'Now you can add custom labels to text blocks',
           },
         },
         {
           element: '#rhsLabel',
           popover: {
             title: 'New feature',
-            description: 'Now you can add labels to text blocks',
+            description: 'Now you can add custom labels to text blocks',
           },
         },
       ])