Merge pull request #9670 from owncloud/fix-tiles-a11y

fix: tiles view tab navigation (a11y)
owncloud · Sep 13, 2023 · bd4651b · bd4651b
2 parents 1988ba6 + c720631
commit bd4651b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/changelog/unreleased/bugfix-tiles-view-accessibility 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
@@ -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
@@ -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">

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
@@ -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>