From b8457e3bf9afe6f3a3078be22b7609c043b5cea3 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:43:44 +0530
Subject: [PATCH] defect2278780 (#1472)

* arialabel has been added to close button of invitational youtube video

* heading role has been addedd and tag has been changed to h1

* outline has been restored to choose columns link in entities page

* Update QuickstartCarousel.tsx

* Update SplashScreen.tsx

* Update TableEntity.tsx

* outline for edit entity has been added on focus

* keyboard accessibility added to rows in table entities

* Update queryBuilder.less

* Update TableEntity.tsx

* Update PanelComponent.less

* Update DataTableBindingManager.ts

* Update DataTableBindingManager.ts

* Update DataTableBindingManager.ts

* Update DataTableBindingManager.ts

* Update DataTableBindingManager.ts
---
 .../DataTable/DataTableBindingManager.ts      | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
index 6616a3af5..3ef0037aa 100644
--- a/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
+++ b/src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -42,6 +42,11 @@ function bindDataTable(element: any, valueAccessor: any, allBindings: any, viewM
 
   createDataTable(0, tableEntityListViewModel, queryTablesTab); // Fake a DataTable to start.
   $(window).resize(updateTableScrollableRegionMetrics);
+  operationManager.focusTable(); // Also selects the first row if needed.
+  // Attach the arrow key event handler to the table element
+  $dataTable.on("keydown", (event: JQueryEventObject) => {
+    handleArrowKey(element, valueAccessor, allBindings, viewModel, bindingContext, event);
+  });
 }
 
 function onTableColumnChange(enablePrompt: boolean = true, queryTablesTab: QueryTablesTab) {
@@ -210,6 +215,39 @@ function selectionChanged(element: any, valueAccessor: any, allBindings: any, vi
     });
   //selected = bindingContext.$data.selected();
 }
+function handleArrowKey(
+  element: any,
+  valueAccessor: any,
+  allBindings: any,
+  viewModel: any,
+  bindingContext: any,
+  event: JQueryEventObject,
+) {
+  const isUpArrowKey: boolean = event.keyCode === Constants.keyCodes.UpArrow;
+  const isDownArrowKey: boolean = event.keyCode === Constants.keyCodes.DownArrow;
+
+  if (isUpArrowKey || isDownArrowKey) {
+    const $dataTable = $(element);
+    let $selectedRow = $dataTable.find("tr.selected");
+
+    if ($selectedRow.length === 0) {
+      // No row is currently selected, select the first row
+      $selectedRow = $dataTable.find("tr:first");
+      $selectedRow.addClass("selected");
+    } else {
+      const $targetRow = isUpArrowKey ? $selectedRow.prev("tr") : $selectedRow.next("tr");
+
+      if ($targetRow.length > 0) {
+        // Remove the selected class from the current row and add it to the target row
+        $selectedRow.removeClass("selected").attr("tabindex", "-1");
+        $targetRow.addClass("selected").attr("tabindex", "0");
+        $targetRow.focus();
+      }
+    }
+
+    event.preventDefault();
+  }
+}
 
 function dataChanged(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
   // do nothing for now