From b0ac9ea156d4b8b52b976f9dbdb56a3d71801126 Mon Sep 17 00:00:00 2001
From: SHUBHAM <shubhamraj1068@gmail.com>
Date: Sun, 14 Dec 2025 00:07:17 +0530
Subject: [PATCH] Fix(NavBar, AvatarGroup): Improve keyboard accessibility for
 interactive controls

---
 docs/creating-components.md                     | 17 +++++++++++++++++
 .../src/Common/AvatarGroup/index.tsx            |  7 +++++++
 .../src/Containers/NavBar/index.tsx             |  9 +++++++++
 3 files changed, 33 insertions(+)

diff --git a/docs/creating-components.md b/docs/creating-components.md
index 9a0f1f49044a0..f17a2f86d042e 100644
--- a/docs/creating-components.md
+++ b/docs/creating-components.md
@@ -214,6 +214,23 @@ Use CSS Modules for component styling:
 }
 ```
 
+### Accessibility
+
+- Use semantic elements for interactive controls (`button`, `a`, `input`).
+- Avoid non-semantic elements like `div` or `span` for interactivity.
+- If unavoidable, add `role="button"`, `tabIndex={0}`, and keyboard handlers for Enter/Space.
+
+```tsx
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={e => {
+    if (e.key === 'Enter' || e.key === ' ') handleClick();
+  }}
+/>
+```
+
 ## TypeScript Best Practices
 
 ### Prop Types
diff --git a/packages/ui-components/src/Common/AvatarGroup/index.tsx b/packages/ui-components/src/Common/AvatarGroup/index.tsx
index 42168b20ad59b..6f0dc54bcf407 100644
--- a/packages/ui-components/src/Common/AvatarGroup/index.tsx
+++ b/packages/ui-components/src/Common/AvatarGroup/index.tsx
@@ -65,7 +65,14 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
 
       {avatars.length > limit && (
         <span
+          role="button"
+          tabIndex={0}
           onClick={handleShowMoreClick}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              handleShowMoreClick?.();
+            }
+          }}
           className={classNames(
             avatarstyles.avatar,
             avatarstyles[size],
diff --git a/packages/ui-components/src/Containers/NavBar/index.tsx b/packages/ui-components/src/Containers/NavBar/index.tsx
index 5b5a6521fe3ba..c4b17b2e8d641 100644
--- a/packages/ui-components/src/Containers/NavBar/index.tsx
+++ b/packages/ui-components/src/Containers/NavBar/index.tsx
@@ -54,6 +54,15 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
           className={style.sidebarItemTogglerLabel}
           htmlFor="sidebarItemToggler"
           role="button"
+          tabIndex={0}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              const toggler = document.getElementById(
+                'sidebarItemToggler'
+              ) as HTMLInputElement | null;
+              toggler?.click();
+            }
+          }}
           aria-label={sidebarItemTogglerAriaLabel}
         >
           {navInteractionIcons[isMenuOpen ? 'close' : 'show']}