Merge pull request #5058 from owncloud/new-files-menu-a11y

Improve accessibility on new file menu

changelog/unreleased/enhancement-new-file-menu-a11y

@@ -0,0 +1,6 @@
+Enhancement: Improve accessibility on new file menu
+
+We now use buttons instead of a-tags in the new file menu. Also fixed the double-focus per item when
+navigating via tab.
+
+https://github.com/owncloud/web/pull/5058

packages/web-app-files/src/components/AppBar.vue

@@ -42,40 +42,57 @@
               close-on-click
               :options="{ delayHide: 0 }"
             >
-              <oc-nav>
-                <file-upload
-                  :path="currentPath"
-                  :headers="headers"
-                  @success="onFileSuccess"
-                  @error="onFileError"
-                  @progress="onFileProgress"
-                />
-                <folder-upload
-                  v-if="!isIE11()"
-                  :root-path="currentPath"
-                  :path="currentPath"
-                  :headers="headers"
-                  @success="onFileSuccess"
-                  @error="onFileError"
-                  @progress="onFileProgress"
-                />
-                <oc-nav-item
-                  id="new-folder-btn"
-                  icon="create_new_folder"
-                  @click="showCreateResourceModal"
-                >
-                  <translate>New folder…</translate>
-                </oc-nav-item>
-                <oc-nav-item
-                  v-for="(newFileHandler, key) in newFileHandlers"
-                  :key="key"
-                  :class="'new-file-btn-' + newFileHandler.ext"
-                  :icon="newFileHandler.icon || 'save'"
-                  @click="showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)"
-                >
-                  {{ newFileHandler.menuTitle($gettext) }}
-                </oc-nav-item>
-              </oc-nav>
+              <ul class="uk-list">
+                <li>
+                  <file-upload
+                    :path="currentPath"
+                    :headers="headers"
+                    @success="onFileSuccess"
+                    @error="onFileError"
+                    @progress="onFileProgress"
+                  />
+                </li>
+                <li v-if="checkIfBrowserSupportsFolderUpload">
+                  <folder-upload
+                    v-if="!isIE11()"
+                    :root-path="currentPath"
+                    :path="currentPath"
+                    :headers="headers"
+                    @success="onFileSuccess"
+                    @error="onFileError"
+                    @progress="onFileProgress"
+                  />
+                </li>
+                <li>
+                  <div>
+                    <oc-button
+                      id="new-folder-btn"
+                      appearance="raw"
+                      class="uk-width-1-1"
+                      justify-content="left"
+                      @click="showCreateResourceModal"
+                    >
+                      <oc-icon name="create_new_folder" />
+                      <translate>New folder…</translate>
+                    </oc-button>
+                  </div>
+                </li>
+                <li v-for="(newFileHandler, key) in newFileHandlers" :key="key">
+                  <div>
+                    <oc-button
+                      appearance="raw"
+                      justify-content="left"
+                      :class="['new-file-btn-' + newFileHandler.ext, 'uk-width-1-1']"
+                      @click="
+                        showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)
+                      "
+                    >
+                      <oc-icon :name="newFileHandler.icon || 'save'" />
+                      <span>{{ newFileHandler.menuTitle($gettext) }}</span>
+                    </oc-button>
+                  </div>
+                </li>
+              </ul>
             </oc-drop>
           </template>
         </template>

packages/web-app-files/src/components/FileUpload.vue

@@ -1,18 +1,20 @@
 <template>
-  <oc-nav-item icon="file_upload" @click="triggerUpload">
-    <span id="files-file-upload-button" v-translate>Upload File</span>
-    <div slot="outer-content">
-      <input
-        id="fileUploadInput"
-        ref="input"
-        type="file"
-        aria-labelledby="files-file-upload-button"
-        name="file"
-        multiple
-        @change="$_ocUpload_addFileToQue"
-      />
-    </div>
-  </oc-nav-item>
+  <div>
+    <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
+      <oc-icon name="file_upload" />
+      <span id="files-file-upload-button" v-translate>Upload File</span>
+    </oc-button>
+    <input
+      id="fileUploadInput"
+      ref="input"
+      type="file"
+      aria-labelledby="files-file-upload-button"
+      name="file"
+      multiple
+      tabindex="-1"
+      @change="$_ocUpload_addFileToQue"
+    />
+  </div>
 </template>
 
 <script>

packages/web-app-files/src/components/FolderUpload.vue

@@ -1,19 +1,22 @@
 <template>
-  <oc-nav-item v-if="checkIfBrowserSupportsFolderUpload" icon="cloud_upload" @click="triggerUpload">
-    <label v-translate for="folderUploadInput">Upload Folder</label>
-    <div slot="outer-content">
-      <input
-        id="folderUploadInput"
-        ref="input"
-        type="file"
-        name="folder"
-        webkitdirectory
-        mozdirectory
-        allowdirs
-        @change="$_ocUpload_addDirectoryToQue"
-      />
-    </div>
-  </oc-nav-item>
+  <div>
+    <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
+      <oc-icon name="cloud_upload" />
+      <span id="files-folder-upload-button" v-translate>Upload Folder</span>
+    </oc-button>
+    <input
+      id="folderUploadInput"
+      ref="input"
+      type="file"
+      name="folder"
+      aria-labelledby="files-folder-upload-button"
+      webkitdirectory
+      mozdirectory
+      allowdirs
+      tabindex="-1"
+      @change="$_ocUpload_addDirectoryToQue"
+    />
+  </div>
 </template>
 
 <script>