fix(ui): a11y + codemirror scrolls + minor addons (#1103)

packages/ui/client/components/CodeMirror.vue

@@ -60,7 +60,7 @@ onMounted(async() => {
     relative
     font-mono
     text-sm
-    class="scrolls"
+    class="codemirror-scrolls"
   >
     <textarea ref="el" />
   </div>

packages/ui/client/components/FileDetails.vue

@@ -45,13 +45,14 @@ const consoleCount = computed(() => {
         <div class="flex text-lg">
           <IconButton
             v-tooltip.bottom="'Open in editor'"
+            title="Open in editor"
             icon="i-carbon-launch"
             :disabled="!current?.filepath"
             @click="open"
           />
         </div>
       </div>
-      <div flex="~" items-center bg-header border="b-2 base" text-sm h-38px>
+      <div flex="~" items-center bg-header border="b-2 base" text-sm h-41px>
         <button
           tab-button
           :class="{ 'tab-button-active': viewMode == null }"

packages/ui/client/components/IconButton.vue

@@ -8,6 +8,7 @@ defineProps<{ icon?: `i-${string}` | `dark:i-${string}`; title?: string; disable
     role="button"
     :opacity="disabled ? 10 : 70"
     rounded
+    :disabled="disabled"
     :hover="disabled ? '' : 'bg-active op100'"
     class="w-1.4em h-1.4em flex"
   >

packages/ui/client/components/Navigation.vue

@@ -22,7 +22,7 @@ const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
 <template>
   <TasksList border="r base" :tasks="files" :on-item-click="onItemClick" :group-by-type="true" @run="runAll">
     <template #header="{ filteredTests }">
-      <img w-6 h-6 src="/favicon.svg">
+      <img w-6 h-6 src="/favicon.svg" alt="Vitest logo">
       <span font-light text-sm flex-1>Vitest</span>
       <div class="flex text-lg">
         <IconButton

packages/ui/client/components/TasksList.vue

@@ -22,6 +22,7 @@ const emit = defineEmits<{
 }>()
 
 const search = ref('')
+const searchBox = ref<HTMLInputElement | undefined>()
 const isFiltered = computed(() => search.value.trim() !== '')
 
 const matchTasks = (tasks: Task[], search: string): boolean => {
@@ -63,6 +64,14 @@ const running = computed(() => filtered.value.filter(task =>
   && !skipped.value.includes(task),
 ))
 const throttledRunning = useThrottle(running, 250)
+
+const clearSearch = (focus: boolean) => {
+  search.value = ''
+  focus && searchBox.value?.focus()
+}
+const disableClearSearch = computed(() => {
+  return search.value === ''
+})
 </script>
 
 <script lang="ts">
@@ -78,14 +87,15 @@ export default {
         <slot name="header" :filteredTests="isFiltered ? filteredTests : undefined" />
       </div>
       <div
-        p="x3 y2"
+        p="l3 y2 r2"
         flex="~ gap-2"
         items-center
         bg-header
         border="b-2 base"
       >
-        <div i-carbon:search flex-shrink-0 />
+        <div class="i-carbon:search" flex-shrink-0 />
         <input
+          ref="searchBox"
           v-model="search"
           placeholder="Search..."
           outline="none"
@@ -95,9 +105,16 @@ export default {
           flex-1
           pl-1
           :op="search.length ? '100' : '50'"
-          @keydown.esc="search = ''"
+          @keydown.esc="clearSearch(false)"
           @keydown.enter="emit('run', isFiltered ? filteredTests : undefined)"
         >
+        <IconButton
+          v-tooltip.bottom="'Clear search'"
+          :disabled="disableClearSearch"
+          title="Clear search"
+          icon="i-carbon:filter-remove"
+          @click.passive="clearSearch(true)"
+        />
       </div>
     </div>
 
@@ -153,7 +170,7 @@ export default {
         </DetailsPanel>
         <DetailsPanel v-if="skipped.length">
           <template #summary>
-            <div text-purple5:50>
+            <div class="text-purple5:50">
               SKIP ({{ skipped.length }})
             </div>
           </template>
@@ -194,7 +211,7 @@ export default {
             border="~ gray-400/50 rounded"
             p="x2 y0.5"
             m="t2"
-            @click="search = ''"
+            @click.passive="clearSearch(true)"
           >
             Clear
           </button>

packages/ui/client/components/views/ViewEditor.vue

@@ -40,6 +40,10 @@ const clearListeners = () => {
   listeners.length = 0
 }
 
+useResizeObserver(editor, () => {
+  cm.value?.refresh()
+})
+
 watch([cm, failed], () => {
   if (!cm.value) {
     clearListeners()
@@ -65,7 +69,7 @@ watch([cm, failed], () => {
         pre.textContent = `${' '.repeat(pos.column)}^ ${e?.nameStr}: ${e?.message}`
         div.appendChild(pre)
         const span = document.createElement('span')
-        span.className = 'i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer'
+        span.className = 'i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em'
         span.tabIndex = 0
         span.ariaLabel = 'Open in Editor'
         const tooltip = createTooltip(span, {

packages/ui/client/components/views/ViewReport.vue

@@ -43,7 +43,7 @@ function relative(p: string) {
               <div
                 v-if="shouldOpenInEditor(efile, props.file?.name)"
                 v-tooltip.bottom="'Open in Editor'"
-                class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer"
+                class="i-carbon-launch c-red-600 dark:c-red-400 hover:cursor-pointer min-w-1em min-h-1em"
                 tabindex="0"
                 aria-label="Open in Editor"
                 @click.passive="openInEditor(efile, line, column)"

packages/ui/client/composables/codemirror.ts

@@ -7,6 +7,8 @@ import 'codemirror/mode/xml/xml'
 // import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/mode/jsx/jsx'
 import 'codemirror/addon/display/placeholder'
+import 'codemirror/addon/scroll/simplescrollbars'
+import 'codemirror/addon/scroll/simplescrollbars.css'
 
 export function useCodeMirror(
   textarea: Ref<HTMLTextAreaElement | null | undefined>,
@@ -18,6 +20,7 @@ export function useCodeMirror(
     {
       theme: 'vars',
       ...options,
+      scrollbarStyle: 'simple',
     },
   )
 

packages/ui/client/styles/main.css

@@ -113,13 +113,13 @@ html.dark {
 
 .splitpanes--vertical > .splitpanes__splitter:before {
   /* make vertical scroll usable */
-  left: -10px;
+  left: 0;
   right: -10px;
   height: 100%;
 }
 
 .splitpanes--horizontal > .splitpanes__splitter:before {
-  top: -10px;
+  top: 0;
   bottom: -10px;
   width: 100%;
 }
@@ -128,50 +128,73 @@ html.dark {
   transition: none !important;
   height: 100%;
 }
+
+/* CODEMIRROR SCROLLS */
 .CodeMirror-scroll::-webkit-scrollbar,
+.codemirror-scrolls::-webkit-scrollbar {
+  display: none;
+}
+.codemirror-scrolls {
+  overflow: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
+}
+/* the horizontal/vertical background */
+.CodeMirror-simplescroll-horizontal,
+.CodeMirror-simplescroll-vertical {
+  background-color: var(--cm-ttc-c-track) !important;
+  border: none !important;
+}
+/* the horizontal/vertical bubble background */
+.CodeMirror-simplescroll-horizontal div,
+.CodeMirror-simplescroll-vertical div {
+  background-color: var(--cm-ttc-c-thumb) !important;
+  border: none !important;
+}
+/* the right bottom corner background*/
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
+  background-color: var(--cm-ttc-c-track) !important;
+}
+.CodeMirror {
+  overflow: unset !important;
+}
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar {
+  display: none !important;
+}
+.CodeMirror-scroll {
+  margin-bottom: unset !important;
+  margin-right: unset !important;
+  padding-bottom: unset !important;
+}
+/* END CODEMIRROR SCROLLS */
+
+/* SCROLLS */
 .scrolls::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
-.CodeMirror-scroll,
 .scrolls {
   overflow: auto !important;
   scrollbar-width: thin;
   scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
 }
-.CodeMirror-scroll::-webkit-scrollbar-track,
 .scrolls::-webkit-scrollbar-track {
   background: var(--cm-ttc-c-track);
 }
-.CodeMirror-scroll::-webkit-scrollbar-thumb,
 .scrolls::-webkit-scrollbar-thumb {
   background-color: var(--cm-ttc-c-thumb);
   border: 2px solid var(--cm-ttc-c-thumb);
 }
-.CodeMirror-scroll::-webkit-scrollbar-thumb,
 .scrolls::-webkit-scrollbar-thumb,
 .scrolls-rounded::-webkit-scrollbar-track {
   border-radius: 3px;
 }
-.CodeMirror-scroll::-webkit-scrollbar-corner,
 .scrolls::-webkit-scrollbar-corner {
   background-color: var(--cm-ttc-c-track);
 }
-.CodeMirror {
-  overflow: unset !important;
-}
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar {
-  display: none !important;
-}
-.CodeMirror-scroll {
-  margin-bottom: unset !important;
-  margin-right: unset !important;
-  padding-bottom: unset !important;
-}
-.CodeMirror-sizer {
-  border-right: none;
-}
+/* END SCROLLS */
 
 .v-popper__popper .v-popper__inner {
   font-size: 12px;

packages/ui/package.json

@@ -76,6 +76,7 @@
         "birpc",
         "codemirror",
         "codemirror/addon/display/placeholder",
+        "codemirror/addon/scroll/simplescrollbars",
         "codemirror/mode/javascript/javascript",
         "codemirror/mode/jsx/jsx",
         "codemirror/mode/xml/xml",