diff --git a/src/fixtures/grid/lang/lang.csv b/src/fixtures/grid/lang/lang.csv
index 55644e41816..d3d15402772 100644
--- a/src/fixtures/grid/lang/lang.csv
+++ b/src/fixtures/grid/lang/lang.csv
@@ -31,6 +31,7 @@ grid.filters.date.min,Min Date,1,Date min,1
grid.filters.label.info,{range} of {total} entries shown,1,{range} de {total} saisies affichées,1
grid.filters.label.filtered,(filtered from {max} total entries),1,(filtré à partir d'un total de {max} saisies),1
grid.filters.label.extent,Filter by extent,1,Filtrer par étendue,1
+grid.cells.controls,Use arrow keys to navigate grid cells. Press Tab to proceed,1,Utilisez les flèches pour parcourir les cellules de la grille. Appuyez sur Tab pour continuer,0
grid.cells.zoom,Zoom to feature,1,Zoom à l'élément,1
grid.cells.zoom.zooming,Zooming...,1,Zoom en cours...,1
grid.cells.zoom.error,Zoom failed,1,Échec du zoom,1
diff --git a/src/fixtures/grid/table-component.vue b/src/fixtures/grid/table-component.vue
index 3193005358a..882ff62c591 100644
--- a/src/fixtures/grid/table-component.vue
+++ b/src/fixtures/grid/table-component.vue
@@ -330,25 +330,36 @@
-
-
+ ref="gridContainer"
+ tabIndex="-1"
+ >
+
+
+
@@ -361,7 +372,9 @@ import {
nextTick,
onBeforeMount,
onBeforeUnmount,
+ onMounted,
ref,
+ useTemplateRef,
watch
} from 'vue';
@@ -493,6 +506,7 @@ const panelStore = usePanelStore();
const mobileView = computed(() => panelStore.mobileView);
const pinned = ref(!mobileView.value);
const el = ref();
+const gridContainer = useTemplateRef('gridContainer');
const { t, locale } = useI18n();
const forceUpdate = () => getCurrentInstance()?.proxy?.$forceUpdate();
@@ -1582,6 +1596,15 @@ const setUpColumns = () => {
});
};
+onMounted(() => {
+ gridContainer.value?.addEventListener('focus', () => {
+ (gridContainer.value as any)._tippy.show();
+ });
+ gridContainer.value?.addEventListener('blur', () => {
+ (gridContainer.value as any)._tippy.hide();
+ });
+});
+
onBeforeMount(() => {
config.value = gridStore.grids[props.gridId];
@@ -1672,6 +1695,12 @@ onBeforeUnmount(() => {
watchers.value.forEach(unwatch => unwatch());
gridAccessibilityManager.value?.removeAccessibilityListeners();
gridAccessibilityManager.value?.removeScrollListeners();
+ gridContainer.value?.removeEventListener('focus', () => {
+ (gridContainer.value as any)._tippy.show();
+ });
+ gridContainer.value?.removeEventListener('blur', () => {
+ (gridContainer.value as any)._tippy.hide();
+ });
});