Add aria label; close #131

Former-commit-id: 8fc595933b73d635bbe20e018958343d9dd3e31b [formerly c056d2fa20bec942e89710ff469e12cb07a498a9] [formerly a455096212ba0cb70102a99c714d8ff3e1401f17 [formerly 1861645b0421c2989def739a5d40aa7cde5a5288]]
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>