Merge pull request ramp4-pcar4#2488 from IshavSohal/issue-2375

Add tooltip to grid for keyboard users (ramp4-pcar4#2488)
milespetrov · Dec 9, 2024 · 89389c8 · 89389c8
2 parents 30b758f + 9ac2481
commit 89389c8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git 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
@@ -330,25 +330,36 @@
             </div>
         </div>
 
-        <!-- main grid component -->
-        <ag-grid-vue
+        <div
+            :content="t('grid.cells.controls')"
+            v-tippy="{
+                placement: 'top',
+                trigger: 'manual'
+            }"
+            class="w-full h-full flex flex-col"
             v-if="showGrid"
             v-show="!isLoadingGrid && !isErrorGrid"
-            class="ag-theme-material flex-grow"
-            enableCellTextSelection="true"
-            accentedSort="true"
-            :localeText="locale === 'en' ? AG_GRID_LOCALE_EN : AG_GRID_LOCALE_FR"
-            :gridOptions="agGridOptions"
-            :columnDefs="columnDefs"
-            :rowData="rowData"
-            :components="frameworkComponents"
-            @grid-ready="onGridReady"
-            @keydown="stopArrowKeyProp"
-            @firstDataRendered="gridRendered"
-            @cell-key-press="onCellKeyPress"
-            :doesExternalFilterPass="doesExternalFilterPass"
-            :isExternalFilterPresent="isExternalFilterPresent"
-        />
+            ref="gridContainer"
+            tabIndex="-1"
+        >
+            <!-- main grid component -->
+            <ag-grid-vue
+                class="ag-theme-material flex-grow"
+                enableCellTextSelection="true"
+                accentedSort="true"
+                :localeText="locale === 'en' ? AG_GRID_LOCALE_EN : AG_GRID_LOCALE_FR"
+                :gridOptions="agGridOptions"
+                :columnDefs="columnDefs"
+                :rowData="rowData"
+                :components="frameworkComponents"
+                @grid-ready="onGridReady"
+                @keydown="stopArrowKeyProp"
+                @firstDataRendered="gridRendered"
+                @cell-key-press="onCellKeyPress"
+                :doesExternalFilterPass="doesExternalFilterPass"
+                :isExternalFilterPresent="isExternalFilterPresent"
+            />
+        </div>
     </div>
 </template>
 
@@ -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<Boolean>(!mobileView.value);
 const el = ref<HTMLElement>();
+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();
+    });
 });
 </script>