Fix two old, minor a11y complaints

changelog/unreleased/enhancement-accessibility-improvements

@@ -2,7 +2,10 @@ Enhancement: Accessibility improvements
 
 Across the board, we have implemented improvements in regards of accessibility for the web UI.
 
+https://github.com/owncloud/web/issues/5379
+https://github.com/owncloud/web/issues/5381
 https://github.com/owncloud/web/issues/5383
 https://github.com/owncloud/web/issues/5391
 https://github.com/owncloud/web/issues/10731
 https://github.com/owncloud/web/pull/10802
+https://github.com/owncloud/web/pull/10830

packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue

@@ -0,0 +1,57 @@
+<template>
+  <dl class="details-list">
+    <!-- eslint-disable-next-line vue/no-v-for-template-key -->
+    <template v-for="item in items" :key="item.term">
+      <dt>{{ item.term }}</dt>
+      <dd>{{ item.definition }}</dd>
+    </template>
+  </dl>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue'
+
+/**
+ * Icons are used to visually communicate core parts of the product and
+ * available actions. They can act as wayfinding tools to help users more
+ * easily understand where they are in the product.
+ */
+
+interface DefinitionItem {
+  term: string
+  definition: string
+}
+
+export default defineComponent({
+  name: 'OcDefinitionList',
+  status: 'ready',
+  release: '15.0.0-alpha.1',
+  props: {
+    /**
+     * The name of the icon to display.
+     */
+    items: {
+      type: Array as PropType<DefinitionItem[]>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.details-list {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  dt,
+  dd {
+    margin-bottom: var(--oc-space-small);
+  }
+  dt {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+  dd {
+    margin-inline-start: var(--oc-space-medium);
+  }
+}
+</style>

packages/design-system/src/components/index.ts

@@ -11,6 +11,7 @@ export { default as OcButton } from './OcButton/OcButton.vue'
 export { default as OcCheckbox } from './OcCheckbox/OcCheckbox.vue'
 export { default as OcContextualHelper } from './OcContextualHelper/OcContextualHelper.vue'
 export { default as OcDatepicker } from './OcDatepicker/OcDatepicker.vue'
+export { default as OcDefinitionList } from './OcDefinitionList/OcDefinitionList.vue'
 export { default as OcDrop } from './OcDrop/OcDrop.vue'
 export { default as OcDropzone } from './OcDropzone/OcDropzone.vue'
 export { default as OcFilterChip } from './OcFilterChip/OcFilterChip.vue'

packages/web-app-admin-settings/src/components/General/InfoSection.vue

@@ -1,36 +1,20 @@
 <template>
   <div>
     <h2 class="oc-py-s" v-text="$gettext('Info')" />
-
-    <table class="details-table">
-      <tr>
-        <th scope="col" class="oc-pr-s" v-text="$gettext('ownCloud')" />
-        <td v-text="backendProductName" />
-      </tr>
-      <tr>
-        <th scope="col" class="oc-pr-s" v-text="$gettext('Edition')" />
-        <td v-text="backendEdition" />
-      </tr>
-      <tr>
-        <th scope="col" class="oc-pr-s" v-text="$gettext('Version')" />
-        <td v-text="backendVersion" />
-      </tr>
-      <tr>
-        <th scope="col" class="oc-pr-s" v-text="$gettext('Web client version')" />
-        <td v-text="webClientVersion" />
-      </tr>
-    </table>
+    <oc-definition-list :items="infoItems" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useCapabilityStore } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'InfoSection',
   setup() {
     const capabilityStore = useCapabilityStore()
+    const { $gettext } = useGettext()
 
     let backendProductName = ''
     let backendVersion = ''
@@ -46,12 +30,39 @@ export default defineComponent({
       webClientVersion = process.env.PACKAGE_VERSION
     }
 
+    const infoItems = [
+      { term: $gettext('ownCloud'), definition: backendProductName },
+      { term: $gettext('Edition'), definition: backendEdition },
+      { term: $gettext('Version'), definition: backendVersion },
+      { term: $gettext('Web client version'), definition: webClientVersion }
+    ]
+
     return {
-      webClientVersion,
       backendProductName,
       backendVersion,
-      backendEdition
+      backendEdition,
+      infoItems,
+      webClientVersion
     }
   }
 })
 </script>
+
+<style lang="scss">
+.details-list {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+
+  dt,
+  dd {
+    margin-bottom: var(--oc-space-small);
+  }
+  dt {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+  dd {
+    margin-inline-start: var(--oc-space-medium);
+  }
+}
+</style>

packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue

@@ -10,15 +10,13 @@
     </div>
     <div v-if="group">
       <GroupInfoBox :group="group" />
-      <table
-        class="details-table"
+      <p
+        class="selected-group-details"
         :aria-label="$gettext('Overview of the information about the selected group')"
       >
-        <tr>
-          <th scope="col" class="oc-pr-s" v-text="$gettext('Group name')" />
-          <td v-text="group.displayName" />
-        </tr>
-      </table>
+        <span class="oc-pr-s oc-font-semibold" v-text="$gettext('Group name')" />
+        <span v-text="group.displayName" />
+      </p>
     </div>
   </div>
 </template>
@@ -64,15 +62,12 @@ export default defineComponent({
   font-size: 1.5rem;
 }
 
-.details-table {
+.selected-group-details {
+  display: table;
   text-align: left;
 
-  tr {
-    height: 1.5rem;
-  }
-
-  th {
-    font-weight: 600;
+  span {
+    padding: 0.2rem;
   }
 }
 </style>

packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div>
-      <table class="details-table" :aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel" role="presentation">
         <tr data-testid="filesCount">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="filesText" />
           <td v-text="filesCount" />

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -167,9 +167,10 @@
       />
     </template>
     <template #ddate="{ item }">
-      <span
+      <p
         v-oc-tooltip="formatDate(item.ddate)"
         tabindex="0"
+        class="oc-m-rm"
         v-text="formatDateRelative(item.ddate)"
       />
     </template>

packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue

@@ -6,35 +6,12 @@
         <p class="preview-text" v-text="selectedSpacesString" />
       </div>
     </div>
-    <div>
-      <table class="details-table" :aria-label="detailsTableLabel">
-        <tr>
-          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Total quota:')" />
-          <td v-text="totalSelectedSpaceQuotaTotal" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Remaining quota:')" />
-          <td v-text="totalSelectedSpaceQuotaRemaining" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Used quota:')" />
-          <td v-text="totalSelectedSpaceQuotaUsed" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Enabled:')" />
-          <td v-text="totalEnabledSpaces" />
-        </tr>
-        <tr>
-          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Disabled:')" />
-          <td v-text="totalDisabledSpaces" />
-        </tr>
-      </table>
-    </div>
+    <oc-definition-list :aria-label="detailsTableLabel" :items="items" />
   </div>
 </template>
 <script lang="ts">
 import { formatFileSize } from '../../../../helpers'
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, unref } from 'vue'
 import { SpaceResource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
 
@@ -94,14 +71,19 @@ export default defineComponent({
         }
       )
     })
+
+    const items = [
+      { term: $gettext('Total quota:'), definition: unref(totalSelectedSpaceQuotaTotal) },
+      { term: $gettext('Remaining quota:'), definition: unref(totalSelectedSpaceQuotaRemaining) },
+      { term: $gettext('Used quota:'), definition: unref(totalSelectedSpaceQuotaUsed) },
+      { term: $gettext('Enabled:'), definition: unref(totalEnabledSpaces) },
+      { term: $gettext('Disabled:'), definition: unref(totalDisabledSpaces) }
+    ]
+
     return {
       detailsTableLabel,
-      selectedSpacesString,
-      totalSelectedSpaceQuotaTotal,
-      totalSelectedSpaceQuotaRemaining,
-      totalSelectedSpaceQuotaUsed,
-      totalEnabledSpaces,
-      totalDisabledSpaces
+      items,
+      selectedSpacesString
     }
   }
 })
@@ -131,11 +113,4 @@ export default defineComponent({
     }
   }
 }
-.details-table {
-  text-align: left;
-
-  tr {
-    height: 1.5rem;
-  }
-}
 </style>