Merge pull request #1588 from yamadashy/a11y/tabs-and-file-upload

fix(website): Improve accessibility of tabs and file upload widgets

Author: yamadashy

website/client/components/Home/TryIt.vue

@@ -2,31 +2,51 @@
   <div class="container">
     <form class="try-it-container" @submit.prevent="handleSubmit($event)">
       <div class="input-row">
-        <div class="tab-container">
+        <div class="tab-container" role="tablist" aria-label="Repository input source">
           <button
+            id="tab-url"
             type="button"
+            role="tab"
+            aria-label="Remote repository URL"
+            aria-controls="tabpanel-input"
+            :aria-selected="mode === 'url'"
             :class="{ active: mode === 'url' }"
             @click="setMode('url')"
           >
             <Link2 size="20" class="icon" />
           </button>
           <button
+            id="tab-folder"
             type="button"
+            role="tab"
+            aria-label="Upload local folder"
+            aria-controls="tabpanel-input"
+            :aria-selected="mode === 'folder'"
             :class="{ active: mode === 'folder' }"
             @click="setMode('folder')"
           >
             <FolderOpen size="20" class="icon" />
           </button>
           <button
+            id="tab-file"
             type="button"
+            role="tab"
+            aria-label="Upload ZIP archive"
+            aria-controls="tabpanel-input"
+            :aria-selected="mode === 'file'"
             :class="{ active: mode === 'file' }"
             @click="setMode('file')"
           >
             <FolderArchive size="20" class="icon" />
           </button>
         </div>
 
-        <div class="input-field">
+        <div
+          id="tabpanel-input"
+          class="input-field"
+          role="tabpanel"
+          :aria-labelledby="`tab-${mode}`"
+        >
           <TryItFileUpload
             v-if="mode === 'file'"
             @upload="handleFileUpload"
@@ -345,6 +365,12 @@ onMounted(() => {
   color: white;
 }
 
+.tab-container button:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
 .tab-container button.active::before {
   display: none;
 }

website/client/components/Home/TryItFileUpload.vue

@@ -66,10 +66,15 @@ function clearFile() {
     <div
       class="upload-container"
       :class="{ 'drag-active': dragActive, 'has-error': hasError }"
+      role="button"
+      tabindex="0"
+      aria-label="Upload ZIP file"
       @dragover.prevent="handleDragOver"
       @dragleave="handleDragLeave"
       @drop.prevent="onDrop"
       @click="triggerFileInput"
+      @keydown.enter.self.prevent="triggerFileInput"
+      @keydown.space.self.prevent="triggerFileInput"
     >
       <input
         ref="fileInput"
@@ -88,7 +93,12 @@ function clearFile() {
           </p>
           <p v-else-if="selectedFile" class="selected-file">
             Selected: {{ selectedFile }}
-            <button class="clear-button" @click.stop="clearFile">×</button>
+            <button
+              type="button"
+              class="clear-button"
+              aria-label="Clear selected file"
+              @click.stop="clearFile"
+            >×</button>
           </p>
           <template v-else>
             <p>Drop your ZIP file here or click to browse (max 10MB)</p>
@@ -129,6 +139,11 @@ function clearFile() {
   background-color: var(--vp-c-bg-soft);
 }
 
+.upload-container:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
 .drag-active {
   border-color: var(--vp-c-brand-1);
   background-color: var(--vp-c-bg-soft);

website/client/components/Home/TryItFolderUpload.vue

@@ -76,10 +76,15 @@ function clearFolder() {
     <div
       class="upload-container"
       :class="{ 'drag-active': dragActive, 'has-error': hasError }"
+      role="button"
+      tabindex="0"
+      aria-label="Upload folder"
       @dragover.prevent="handleDragOver"
       @dragleave="handleDragLeave"
       @drop.prevent="onDrop"
       @click="triggerFileInput"
+      @keydown.enter.self.prevent="triggerFileInput"
+      @keydown.space.self.prevent="triggerFileInput"
     >
       <input
         ref="fileInput"
@@ -98,7 +103,12 @@ function clearFolder() {
           </p>
           <p v-else-if="selectedFolder" class="selected-file">
             Selected: {{ selectedFolder }}
-            <button class="clear-button" @click.stop="clearFolder">×</button>
+            <button
+              type="button"
+              class="clear-button"
+              aria-label="Clear selected folder"
+              @click.stop="clearFolder"
+            >×</button>
           </p>
           <template v-else>
             <p>Drop your folder here or click to browse (max 10MB)</p>
@@ -142,6 +152,11 @@ function clearFolder() {
   background-color: var(--vp-c-bg-soft);
 }
 
+.upload-container:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
 .drag-active {
   border-color: var(--vp-c-brand-1);
   background-color: var(--vp-c-bg-soft);

website/client/components/Home/TryItResult.vue

@@ -75,17 +75,25 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
     />
     <div v-else-if="result" class="result-content">
       <!-- Tab Navigation -->
-      <div v-if="hasFileSelection" class="tab-navigation">
-        <button 
+      <div v-if="hasFileSelection" class="tab-navigation" role="tablist" aria-label="Pack result view">
+        <button
+          id="tab-result"
           type="button"
+          role="tab"
+          aria-controls="tabpanel-result"
+          :aria-selected="activeTab === 'result'"
           class="tab-button"
           :class="{ active: activeTab === 'result' }"
           @click="handleTabClick('result')"
         >
           Result
         </button>
-        <button 
+        <button
+          id="tab-files"
           type="button"
+          role="tab"
+          aria-controls="tabpanel-files"
+          :aria-selected="activeTab === 'files'"
           class="tab-button"
           :class="{ active: activeTab === 'files' }"
           @click="handleTabClick('files')"
@@ -95,10 +103,20 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
       </div>
 
       <!-- Tab Content -->
-      <div v-show="activeTab === 'result' || !hasFileSelection">
+      <div
+        id="tabpanel-result"
+        role="tabpanel"
+        aria-labelledby="tab-result"
+        v-show="activeTab === 'result' || !hasFileSelection"
+      >
         <TryItResultContent :result="result" :pack-options="packOptions" />
       </div>
-      <div v-show="activeTab === 'files' && hasFileSelection">
+      <div
+        id="tabpanel-files"
+        role="tabpanel"
+        aria-labelledby="tab-files"
+        v-show="activeTab === 'files' && hasFileSelection"
+      >
         <TryItFileSelection
           v-if="hasFileSelection"
           :all-files="result.metadata!.allFiles!"
@@ -147,6 +165,11 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
   color: var(--vp-c-text-1);
 }
 
+.tab-button:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: -2px;
+}
+
 .tab-button.active {
   color: var(--vp-c-brand-1);
   border-bottom-color: var(--vp-c-brand-1);