From eb317cf3bde5b4ae6498657b2cf48ba953779d92 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 6 Sep 2023 17:49:31 +0200
Subject: [PATCH 1/2] fix: tiles view tab navigation (a11y)

---
 changelog/unreleased/bugfix-tiles-view-accessibility        | 6 ++++++
 .../design-system/src/components/OcCheckbox/OcCheckbox.vue  | 5 +++++
 packages/design-system/src/components/OcTile/OcTile.vue     | 1 +
 3 files changed, 12 insertions(+)
 create mode 100644 changelog/unreleased/bugfix-tiles-view-accessibility

diff --git a/changelog/unreleased/bugfix-tiles-view-accessibility b/changelog/unreleased/bugfix-tiles-view-accessibility
new file mode 100644
index 00000000000..31a86cc0c9b
--- /dev/null
+++ b/changelog/unreleased/bugfix-tiles-view-accessibility
@@ -0,0 +1,6 @@
+Bugfix: Tiles view accessibility
+
+Navigating via tab and enter in the tiles view has been fixed.
+
+https://github.com/owncloud/web/pull/9670
+https://github.com/owncloud/web/issues/9633
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 4affe6029e3..1f76488b8d4 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -8,6 +8,7 @@
       :class="classes"
       :value="option"
       :disabled="disabled"
+      @keydown.enter="$emit('click', $event)"
     />
     <label :for="id" :class="labelClasses" v-text="label" />
   </span>
@@ -176,6 +177,10 @@ export default defineComponent({
     cursor: pointer;
   }
 
+  &:focus-visible {
+    outline: var(--oc-color-swatch-primary-default) auto 1px;
+  }
+
   &-checked,
   :checked,
   &:indeterminate {
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index 32064329db7..35aa4bfd33b 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/packages/design-system/src/components/OcTile/OcTile.vue
@@ -12,6 +12,7 @@
       class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm"
       :resource="resource"
       :folder-link="resourceRoute"
+      tabindex="-1"
       @click="$emit('click')"
     >
       <div class="oc-tile-card-selection">

From c7206318f1bb8ac62c0de231bcbde5c34eb3b131 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 6 Sep 2023 17:58:19 +0200
Subject: [PATCH 2/2] test: update snapshots

---
 .../src/components/OcTile/__snapshots__/OcTile.spec.ts.snap   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
index 2796fbf3f81..5b2941dc2da 100644
--- a/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
+++ b/packages/design-system/src/components/OcTile/__snapshots__/OcTile.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`OcTile component renders default space correctly 1`] = `
 <div class="oc-tile-card oc-card oc-card-default oc-rounded">
-  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]">
+  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]" tabindex="-1">
     <div class="oc-tile-card-selection"></div>
     <!--v-if-->
     <div class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center">
@@ -27,7 +27,7 @@ exports[`OcTile component renders default space correctly 1`] = `
 
 exports[`OcTile component renders disabled space correctly 1`] = `
 <div class="oc-tile-card oc-card oc-card-default oc-rounded state-trashed">
-  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]">
+  <oc-resource-link-stub class="oc-card-media-top oc-flex oc-flex-center oc-flex-middle oc-m-rm" isresourceclickable="true" resource="[object Object]" tabindex="-1">
     <div class="oc-tile-card-selection"></div>
     <oc-tag-stub class="resource-disabled-indicator oc-position-absolute" rounded="false" size="medium" type="span">
       <span>Disabled</span>