From 2f896a74d6faa5f9a5ac4e2859d029731e5f614e Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 24 Apr 2024 14:28:40 +0200
Subject: [PATCH 1/3] Fix two old, minor a11y complaints

---
 changelog/unreleased/enhancement-accessibility-improvements    | 3 +++
 .../src/components/General/InfoSection.vue                     | 2 +-
 .../src/components/SideBar/Details/FileDetailsMultiple.vue     | 2 +-
 packages/web-pkg/src/components/FilesList/ResourceTable.vue    | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/changelog/unreleased/enhancement-accessibility-improvements b/changelog/unreleased/enhancement-accessibility-improvements
index b0d90aa0732..b26932c3b08 100644
--- a/changelog/unreleased/enhancement-accessibility-improvements
+++ b/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
diff --git a/packages/web-app-admin-settings/src/components/General/InfoSection.vue b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
index 684cedae21a..fb26c6e9f2f 100644
--- a/packages/web-app-admin-settings/src/components/General/InfoSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
@@ -2,7 +2,7 @@
   <div>
     <h2 class="oc-py-s" v-text="$gettext('Info')" />
 
-    <table class="details-table">
+    <table class="details-table" role="presentation">
       <tr>
         <th scope="col" class="oc-pr-s" v-text="$gettext('ownCloud')" />
         <td v-text="backendProductName" />
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 04c5ef4aabf..16f07e0ed96 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/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" />
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 90c6a6f34e3..64ce8574b1f 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/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>

From 343c06ad352a04e059bd855b84ebe0036257af10 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 15 May 2024 15:45:02 +0200
Subject: [PATCH 2/3] fix: convert presentational table to definition list

---
 .../src/components/General/InfoSection.vue    | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/General/InfoSection.vue b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
index fb26c6e9f2f..bf424eb60c2 100644
--- a/packages/web-app-admin-settings/src/components/General/InfoSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
@@ -2,24 +2,16 @@
   <div>
     <h2 class="oc-py-s" v-text="$gettext('Info')" />
 
-    <table class="details-table" role="presentation">
-      <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>
+    <dl class="details-list">
+      <dt v-text="$gettext('ownCloud')" />
+      <dd v-text="backendProductName" />
+      <dt v-text="$gettext('Edition')" />
+      <dd v-text="backendEdition" />
+      <dt v-text="$gettext('Version')" />
+      <dd v-text="backendVersion" />
+      <dt v-text="$gettext('Web client version')" />
+      <dd v-text="webClientVersion" />
+    </dl>
   </div>
 </template>
 
@@ -55,3 +47,22 @@ export default defineComponent({
   }
 })
 </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>

From eb5b7631cbac09ec081e4ea6c8451dba8b94b223 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 24 Jun 2024 12:47:50 +0200
Subject: [PATCH 3/3] Extract details-list into ODS component, remove further
 instances of representional tables

---
 .../OcDefinitionList/OcDefinitionList.vue     | 57 +++++++++++++++++++
 .../design-system/src/components/index.ts     |  1 +
 .../src/components/General/InfoSection.vue    | 26 ++++-----
 .../Groups/SideBar/DetailsPanel.vue           | 23 +++-----
 .../Spaces/Details/SpaceDetailsMultiple.vue   | 51 +++++------------
 5 files changed, 93 insertions(+), 65 deletions(-)
 create mode 100644 packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue

diff --git a/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue b/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
new file mode 100644
index 00000000000..1e611e1f7c5
--- /dev/null
+++ b/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>
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index fb2b91e0ec1..065ce800364 100644
--- a/packages/design-system/src/components/index.ts
+++ b/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'
diff --git a/packages/web-app-admin-settings/src/components/General/InfoSection.vue b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
index bf424eb60c2..c113b25dc09 100644
--- a/packages/web-app-admin-settings/src/components/General/InfoSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/InfoSection.vue
@@ -1,28 +1,20 @@
 <template>
   <div>
     <h2 class="oc-py-s" v-text="$gettext('Info')" />
-
-    <dl class="details-list">
-      <dt v-text="$gettext('ownCloud')" />
-      <dd v-text="backendProductName" />
-      <dt v-text="$gettext('Edition')" />
-      <dd v-text="backendEdition" />
-      <dt v-text="$gettext('Version')" />
-      <dd v-text="backendVersion" />
-      <dt v-text="$gettext('Web client version')" />
-      <dd v-text="webClientVersion" />
-    </dl>
+    <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 = ''
@@ -38,11 +30,19 @@ 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
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
index 910d8e3496e..ac86bdd3e75 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
+++ b/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>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
index f2152a706b9..bc2480afc6b 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/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>