fix(ga): a11y issues (#580)

* fix(ga): a11y issues * fix(ga): a11y issues --------- Co-authored-by: Christos Koutsiaris <christos.koutsiaris@sap.com>
SAP · Nov 29, 2023 · 2b054b8 · 2b054b8
1 parent 37bd35b
commit 2b054b8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/.changeset/lemon-buckets-deny.md b/.changeset/lemon-buckets-deny.md
@@ -0,0 +1,6 @@
+---
+'@sap/guided-answers-extension-webapp': patch
+'sap-guided-answers-extension': patch
+---
+
+Fix a11y minor issues
diff --git a/packages/webapp/src/webview/ui/components/GuidedAnswerNode/Right/Right.tsx b/packages/webapp/src/webview/ui/components/GuidedAnswerNode/Right/Right.tsx
@@ -23,6 +23,11 @@ export function Right(props: { activeNode: GuidedAnswerNodeType }): ReactElement
                               title={command.label}
                               onClick={() => {
                                   actions.executeCommand(command);
+                              }}
+                              onKeyDown={(event) => {
+                                  if (event.key === 'Enter') {
+                                      actions.executeCommand(command);
+                                  }
                               }}>
                               <div className="guided-answer__node__command__header">
                                   <UIIcon

diff --git a/packages/webapp/src/webview/ui/components/HomeGrid/Bookmarks/Bookmarks.tsx b/packages/webapp/src/webview/ui/components/HomeGrid/Bookmarks/Bookmarks.tsx
@@ -59,7 +59,14 @@ export function Bookmarks(): ReactElement {
                         return (
                             <li key={`tree-item-${bookmarkTitle}`} className="guided-answer__bookmark">
                                 <div className="guided-answer__bookmark__title">
-                                    <a id="goto-bookmark-button" onClick={(): void => goToBookmark(bookmark)}>
+                                    <a
+                                        id="goto-bookmark-button"
+                                        onClick={(): void => goToBookmark(bookmark)}
+                                        onKeyDown={(event) => {
+                                            if (event.key === 'Enter') {
+                                                goToBookmark(bookmark);
+                                            }
+                                        }}>
                                         {bookmarkTitle}
                                     </a>
                                     <UIIconButton

diff --git a/packages/webapp/src/webview/ui/components/HomeGrid/LastVisited/LastVisited.tsx b/packages/webapp/src/webview/ui/components/HomeGrid/LastVisited/LastVisited.tsx
@@ -6,7 +6,7 @@ import { actions } from '../../../../state';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { UIIcon, UiIcons } from '@sap-ux/ui-components';
 import { TreeItemBottomSection } from '../../TreeItemBottomSection';
-import type { LastVisitedGuide } from '@sap/guided-answers-extension-types';
+import type { GuidedAnswerNode, LastVisitedGuide } from '@sap/guided-answers-extension-types';
 import './LastVisited.scss';
 
 /**
@@ -16,6 +16,19 @@ import './LastVisited.scss';
  */
 export function LastVisited(): ReactElement {
     const lastVisitedGuides = useSelector<AppState, LastVisitedGuide[]>((state) => state.lastVisitedGuides);
+
+    /**
+     * Handles the event for the last visited link in a guided answer interface.
+     *
+     * @param {LastVisitedGuide} guide - An object representing the last visited guide,
+     * which includes the guided answer tree, the path of nodes visited, and the creation timestamp.
+     */
+    function lastVisitedLinkHandler(guide: LastVisitedGuide) {
+        actions.setActiveTree(guide.tree);
+        guide.nodePath.forEach((node: GuidedAnswerNode) => actions.updateActiveNode(node));
+        document.body.focus();
+    }
+
     return (
         <div>
             <h3 className="guided-answer__home-grid__section__title">
@@ -34,9 +47,12 @@ export function LastVisited(): ReactElement {
                                 <a
                                     id="last-visited-link"
                                     onClick={(): void => {
-                                        actions.setActiveTree(guide.tree);
-                                        guide.nodePath.forEach((node: any) => actions.updateActiveNode(node));
-                                        document.body.focus();
+                                        lastVisitedLinkHandler(guide);
+                                    }}
+                                    onKeyDown={(event) => {
+                                        if (event.key === 'Enter') {
+                                            lastVisitedLinkHandler(guide);
+                                        }
                                     }}>
                                     {guideTitle}
                                 </a>