feat(kube): add a11y props for smoke tests [EE-6747] (#11262)

app/react/sidebar/DockerSidebar.tsx

@@ -81,6 +81,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
         to="docker.templates"
         params={{ endpointId: environmentId }}
         data-cy="portainerSidebar-templates"
+        listId="dockerSidebar-templates"
       >
         <SidebarItem
           label="Application"
@@ -185,6 +186,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
         to={setupSubMenuProps.to}
         params={{ endpointId: environmentId }}
         data-cy="portainerSidebar-host-area"
+        listId="portainerSidebar-host-area"
       >
         <SidebarItem
           label="Details"

app/react/sidebar/EdgeComputeSidebar.tsx

@@ -58,6 +58,7 @@ export function EdgeComputeSidebar() {
         label="Edge Templates"
         to="edge.templates"
         data-cy="edgeSidebar-templates"
+        listId="edgeSidebar-templates"
       >
         <SidebarItem
           label="Application"

app/react/sidebar/KubernetesSidebar/KubernetesSidebar.tsx

@@ -59,6 +59,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
         params={{ endpointId: environmentId }}
         pathOptions={{ includePaths: ['kubernetes.ingresses'] }}
         data-cy="k8sSidebar-networking"
+        listId="k8sSidebar-networking"
       >
         <SidebarItem
           to="kubernetes.services"
@@ -97,7 +98,8 @@ export function KubernetesSidebar({ environmentId }: Props) {
         to="kubernetes.cluster"
         params={{ endpointId: environmentId }}
         pathOptions={{ includePaths: ['kubernetes.registries'] }}
-        data-cy="k8sSidebar-cluster"
+        data-cy="k8sSidebar-cluster-area"
+        listId="k8sSidebar-cluster-area"
       >
         <SidebarItem
           label="Details"
@@ -108,7 +110,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
           ]}
           params={{ endpointId: environmentId }}
           isSubMenu
-          data-cy="k8sSidebar-clusterDetails"
+          data-cy="k8sSidebar-cluster"
         />
         <Authorized
           authorizations="K8sClusterSetupRW"

app/react/sidebar/SettingsSidebar.tsx

@@ -39,6 +39,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
           to="portainer.users"
           pathOptions={{ includePaths: ['portainer.teams', 'portainer.roles'] }}
           data-cy="portainerSidebar-userRelated"
+          listId="portainerSidebar-userRelated"
         >
           <SidebarItem
             to="portainer.users"
@@ -77,6 +78,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
               ],
             }}
             data-cy="portainerSidebar-environments-area"
+            listId="portainer-environments"
           >
             <SidebarItem
               label="Environments"
@@ -125,6 +127,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
               includePaths: ['portainer.activityLogs'],
             }}
             data-cy="k8sSidebar-logs"
+            listId="k8sSidebar-logs"
           >
             <SidebarItem
               label="Authentication"
@@ -147,6 +150,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
           icon={HardDrive}
           to="portainer.endpoints.updateSchedules"
           data-cy="portainerSidebar-environments-area"
+          listId="portainer-environments-area"
         >
           <EdgeUpdatesSidebarItem />
         </SidebarParent>
@@ -164,6 +168,7 @@ export function SettingsSidebar({ isPureAdmin, isAdmin, isTeamLeader }: Props) {
           label="Settings"
           icon={Settings}
           data-cy="portainerSidebar-settings"
+          listId="portainer-settings"
         >
           <SidebarItem
             to="portainer.settings"

app/react/sidebar/SidebarItem/SidebarParent.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
 import { PropsWithChildren, useState } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Icon } from '@@/Icon';
 import { Link } from '@@/Link';
 
@@ -15,9 +17,9 @@ type Props = {
   label: string;
   icon: React.ReactNode;
   to: string;
-  'data-cy': string;
   pathOptions?: PathOptions;
   params?: object;
+  listId: string;
 };
 
 export function SidebarParent({
@@ -27,8 +29,9 @@ export function SidebarParent({
   to,
   params,
   pathOptions,
+  listId,
   'data-cy': dataCy,
-}: PropsWithChildren<Props>) {
+}: PropsWithChildren<Props & AutomationTestingProps>) {
   const anchorProps = useSidebarSrefActive(
     to,
     undefined,
@@ -78,7 +81,14 @@ export function SidebarParent({
           <button
             type="button"
             className="flex-none border-none bg-transparent flex items-center group p-0 px-3 h-8"
-            onClick={() => setIsExpanded(!isExpanded)}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setIsExpanded((isExpanded) => !isExpanded);
+            }}
+            title={isExpanded ? 'Collapse' : 'Expand'}
+            aria-expanded={isExpanded}
+            aria-controls={listId}
           >
             <div className="flex items-center group-hover:bg-blue-5 be:group-hover:bg-gray-5 group-hover:th-dark:bg-gray-true-7 group-hover:bg-opacity-10 be:group-hover:bg-opacity-10 rounded-full p-[3px] transition ease-in-out">
               <Icon
@@ -98,6 +108,7 @@ export function SidebarParent({
 
   const childList = (
     <ul
+      id={listId}
       // pl-11 must be important because it needs to avoid the padding from '.root ul' in sidebar.module.css
       className={clsx('text-white !pl-11', {
         hidden: !isExpanded,