diff --git a/workflowui/src/components/Layout/MainLayout.tsx b/workflowui/src/components/Layout/MainLayout.tsx index 34d2e4f5c..7ec3a5a4e 100644 --- a/workflowui/src/components/Layout/MainLayout.tsx +++ b/workflowui/src/components/Layout/MainLayout.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { useUI, useHeaderLogic, useResponsiveSidebar } from '../../hooks'; import styles from './MainLayout.module.scss'; +import { testId } from '../../utils/accessibility'; interface MainLayoutProps { children: React.ReactNode; @@ -22,6 +23,7 @@ export const MainLayout: React.FC = ({ children, showSidebar =
setSidebar(!sidebarOpen)} /> @@ -49,7 +51,7 @@ const Header: React.FC = ({ onMenuClick }) => { const { user, isAuthenticated, showUserMenu, handleLogout, toggleUserMenu } = useHeaderLogic(); return ( -
+
-

WorkflowUI

+

WorkflowUI

@@ -74,6 +77,7 @@ const Header: React.FC = ({ onMenuClick }) => { onClick={toggleTheme} title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`} aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`} + data-testid={testId.button('toggle-theme')} > {theme === 'light' ? ( @@ -101,6 +105,9 @@ const Header: React.FC = ({ onMenuClick }) => { onClick={toggleUserMenu} title={user.name} aria-label={`User menu for ${user.name}`} + aria-expanded={showUserMenu} + aria-haspopup="menu" + data-testid={testId.navMenuButton('user-menu')} >
{user.name.charAt(0).toUpperCase()} @@ -108,7 +115,7 @@ const Header: React.FC = ({ onMenuClick }) => { {showUserMenu && ( -
+
{user.name}
{user.email}
@@ -116,6 +123,8 @@ const Header: React.FC = ({ onMenuClick }) => { @@ -148,26 +157,28 @@ const Sidebar: React.FC = ({ isOpen, isMobile, onClose }) => { diff --git a/workflowui/src/components/Navigation/Breadcrumbs.tsx b/workflowui/src/components/Navigation/Breadcrumbs.tsx index 393f55f6e..53e95a5ac 100644 --- a/workflowui/src/components/Navigation/Breadcrumbs.tsx +++ b/workflowui/src/components/Navigation/Breadcrumbs.tsx @@ -6,6 +6,7 @@ import React from 'react'; import Link from 'next/link'; import styles from './Breadcrumbs.module.scss'; +import { testId } from '../../utils/accessibility'; export interface BreadcrumbItem { label: string; @@ -18,24 +19,49 @@ interface BreadcrumbsProps { export function Breadcrumbs({ items }: BreadcrumbsProps) { return ( -