Fix(NavBar, AvatarGroup): Improve keyboard accessibility for interactive controls

Author: Shubham-1068

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

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],

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']}