Add aria label; close #131

Former-commit-id: 8fc595933b73d635bbe20e018958343d9dd3e31b [formerly c056d2fa20bec942e89710ff469e12cb07a498a9] [formerly a455096212ba0cb70102a99c714d8ff3e1401f17 [formerly 1861645b04]]
Former-commit-id: 794d333ef3a2788c5e76f7c1a558af8be1137c20 [formerly ab8ca7057862e8919a7d01c3d71ecd70ba7b32f3]
Former-commit-id: 3430567351ec7425e167c4c128bb7316ff631eac

assets/src/components/files/Listing.vue

@@ -15,16 +15,31 @@
       <div class="item header">
         <div></div>
         <div>
-          <p :class="{ active: nameSorted }" class="name" @click="sort('name')">
+          <p :class="{ active: nameSorted }" class="name"
+            role="button"
+            tabindex="0"
+            @click="sort('name')"
+            :title="$t('files.sortByName')"
+            :aria-label="$t('files.sortByName')">
             <span>{{ $t('files.name') }}</span>
             <i class="material-icons">{{ nameIcon }}</i>
           </p>
 
-          <p :class="{ active: sizeSorted }" class="size" @click="sort('size')">
+          <p :class="{ active: sizeSorted }" class="size"
+            role="button"
+            tabindex="0"
+            @click="sort('size')"
+            :title="$t('files.sortBySize')"
+            :aria-label="$t('files.sortBySize')">
             <span>{{ $t('files.size') }}</span>
             <i class="material-icons">{{ sizeIcon }}</i>
           </p>
-          <p :class="{ active: modifiedSorted }" class="modified" @click="sort('modified')">
+          <p :class="{ active: modifiedSorted }" class="modified"
+            role="button"
+            tabindex="0"
+            @click="sort('modified')"
+            :title="$t('files.sortByLastModified')"
+            :aria-label="$t('files.sortByLastModified')">
             <span>{{ $t('files.lastModified') }}</span>
             <i class="material-icons">{{ modifiedIcon }}</i>
           </p>

assets/src/components/files/ListingItem.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="item"
+  role="button"
+  tabindex="0"
   draggable="true"
   @dragstart="dragStart"
   @dragover="dragOver"
@@ -7,6 +9,7 @@
   @click="click"
   @dblclick="open"
   @touchstart="touchstart"
+  :aria-label="name"
   :aria-selected="isSelected">
     <div>
       <i class="material-icons">{{ icon }}</i>

assets/src/components/prompts/Copy.vue

@@ -6,7 +6,10 @@
     <file-list @update:selected="val => dest = val"></file-list>
 
     <div>
-      <button class="ok" @click="copy">{{ $t('buttons.copy') }}</button>
+      <button class="ok"
+        @click="copy"
+        :aria-label="$t('buttons.copy')"
+        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/Delete.vue

@@ -4,7 +4,9 @@
     <p v-show="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
     <p v-show="req.kind === 'listing'">{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
     <div>
-      <button @click="submit" autofocus>{{ $t('buttons.delete') }}</button>
+      <button @click="submit"
+        :aria-label="$t('buttons.delete')"
+        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/Error.vue

@@ -4,8 +4,14 @@
     <h3>{{ $t('prompts.error') }}</h3>
     <pre>{{ $store.state.showMessage }}</pre>
     <div>
-      <button @click="close" autofocus>{{ $t('buttons.close') }}</button>
+      <button @click="close"
-      <button @click="reportIssue" class="cancel">{{ $t('buttons.reportIssue') }}</button>
+        autofocus
+        :aria-label="$t('buttons.close')"
+        :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>
+      <button @click="reportIssue"
+        class="cancel"
+        :aria-label="$t('buttons.reportIssue')"
+        :title="$t('buttons.reportIssue')">{{ $t('buttons.reportIssue') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/FileList.vue

@@ -4,6 +4,9 @@
       <li @click="select"
         @touchstart="touchstart"
         @dblclick="next"
+        role="button"
+        tabindex="0"
+        :aria-label="item.name"
         :aria-selected="selected == item.url"
         :key="item.name" v-for="item in items"
         :data-url="item.url">{{ item.name }}</li>

assets/src/components/prompts/Help.vue

@@ -15,7 +15,11 @@
     </ul>
 
     <div>
-      <button type="submit" @click="$store.commit('closeHovers')" class="ok">{{ $t('buttons.ok') }}</button>
+      <button type="submit"
+        @click="$store.commit('closeHovers')"
+        class="ok"
+        :aria-label="$t('buttons.ok')"
+        :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Info.vue

@@ -21,7 +21,11 @@
     </section>
 
     <div>
-      <button type="submit" @click="$store.commit('closeHovers')" class="ok">{{ $t('buttons.ok') }}</button>
+      <button type="submit"
+        @click="$store.commit('closeHovers')"
+        class="ok"
+        :aria-label="$t('buttons.ok')"
+        :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Move.vue

@@ -6,7 +6,10 @@
     <file-list @update:selected="val => dest = val"></file-list>
 
     <div>
-      <button class="ok" @click="move">{{ $t('buttons.move') }}</button>
+      <button class="ok"
+        @click="move"
+        :aria-label="$t('buttons.move')"
+        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/NewDir.vue

@@ -4,7 +4,10 @@
     <p>{{ $t('prompts.newDirMessage') }}</p>
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
-      <button class="ok" @click="submit">{{ $t('buttons.create') }}</button>
+      <button class="ok"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')"
+        @click="submit">{{ $t('buttons.create') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/NewFile.vue

@@ -4,7 +4,10 @@
     <p>{{ $t('prompts.newFileMessage') }}</p>
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
-      <button class="ok" @click="submit">{{ $t('buttons.create') }}</button>
+      <button class="ok"
+        @click="submit"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/Prompts.vue

@@ -26,7 +26,10 @@
           :name="input.name"
           :placeholder="input.placeholder">
         <div>
-          <input type="submit" class="ok" :value="prompt.ok">
+          <input type="submit" class="ok"
+          :aria-label="prompt.ok"
+          :title="prompt.ok"
+          :value="prompt.ok">
           <button class="cancel"
             @click="$store.commit('closeHovers')"
             :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/Rename.vue

@@ -5,7 +5,10 @@
 
     <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
     <div>
-      <button @click="submit" type="submit">{{ $t('buttons.rename') }}</button>
+      <button @click="submit"
+        type="submit"
+        :aria-label="$t('buttons.rename')"
+        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
       <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"

assets/src/components/prompts/Success.vue

@@ -3,7 +3,10 @@
     <i class="material-icons">done</i>
     <h3>{{ $store.state.showMessage }}</h3>
     <div>
-      <button @click="close" autofocus>{{ $t('buttons.ok') }}</button>
+      <button @click="close"
+        :aria-label="$t('buttons.ok')"
+        :title="$t('buttons.ok')"
+        autofocus>{{ $t('buttons.ok') }}</button>
     </div>
   </div>
 </template>

assets/src/i18n/en.yaml

@@ -42,6 +42,9 @@ files:
   multipleSelectionEnabled: Multiple selection enabled
   name: Name
   size: Size
+  sortByName: Sort by name
+  sortBySize: Sort by size
+  sortByLastModified: Sort by last modified
 help:
   click: select file or directory
   ctrl:

assets/src/i18n/pt.yaml

@@ -42,6 +42,9 @@ files:
   multipleSelectionEnabled: Seleção múltipla ativada
   name: Nome
   size: Tamanho
+  sortByName: Ordenar pelo nome
+  sortBySize: Ordenar pelo tamanho
+  sortByLastModified: Ordenar pela última modificação
 help:
   click: selecionar pasta ou ficheiro
   ctrl: