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

app/react/components/form-components/Slider/Slider.tsx

@@ -17,6 +17,7 @@ export interface Props {
   dataCy?: string;
   // true if you want to always show the tooltip
   visibleTooltip?: boolean;
+  disabled?: boolean;
 }
 
 export function Slider({
@@ -27,6 +28,7 @@ export function Slider({
   onChange,
   dataCy,
   visibleTooltip: visible,
+  disabled,
 }: Props) {
   const marks = {
     [min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
@@ -34,14 +36,14 @@ export function Slider({
   };
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-cy={dataCy}>
       <RcSlider
         handleRender={visible ? sliderTooltip : undefined}
         min={min}
         max={max}
         marks={marks}
         step={step}
-        data-cy={dataCy}
+        disabled={disabled}
         value={value}
         onChange={onChange}
       />

app/react/components/form-components/Slider/SliderWithInput.tsx

@@ -10,6 +10,7 @@ export function SliderWithInput({
   step = 1,
   dataCy,
   visibleTooltip = false,
+  inputId,
 }: {
   value: number;
   onChange: (value: number) => void;
@@ -18,6 +19,7 @@ export function SliderWithInput({
   dataCy: string;
   step?: number;
   visibleTooltip?: boolean;
+  inputId?: string;
 }) {
   return (
     <div className="flex items-center gap-6">
@@ -44,6 +46,7 @@ export function SliderWithInput({
         onChange={(e) => onChange(e.target.valueAsNumber)}
         className="w-32"
         data-cy={`${dataCy}Input`}
+        id={inputId}
       />
     </div>
   );

app/react/components/form-components/SwitchField/Switch.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 
 import { isLimitedToBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
+import { AutomationTestingProps } from '@/types';
 
 import { BEFeatureIndicator } from '@@/BEFeatureIndicator';
 
@@ -9,7 +10,7 @@ import './Switch.css';
 
 import styles from './Switch.module.css';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   checked: boolean;
   id: string;
   name: string;
@@ -17,7 +18,6 @@ export interface Props {
 
   index?: number;
   className?: string;
-  dataCy?: string;
   disabled?: boolean;
   featureId?: FeatureId;
 }
@@ -27,7 +27,7 @@ export function Switch({
   checked,
   id,
   disabled,
-  dataCy,
+  'data-cy': dataCy,
   onChange,
   index,
   featureId,
@@ -42,6 +42,8 @@ export function Switch({
           business: limitedToBE,
           limited: limitedToBE,
         })}
+        data-cy={dataCy}
+        aria-checked={checked}
       >
         <input
           type="checkbox"
@@ -51,7 +53,7 @@ export function Switch({
           disabled={disabled || limitedToBE}
           onChange={({ target: { checked } }) => onChange(checked, index)}
         />
-        <span className="slider round before:content-['']" data-cy={dataCy} />
+        <span className="slider round before:content-['']" />
       </label>
       {limitedToBE && <BEFeatureIndicator featureId={featureId} />}
     </>

app/react/components/form-components/SwitchField/SwitchField.tsx

@@ -3,13 +3,14 @@ import uuid from 'uuid';
 import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
 
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
+import { AutomationTestingProps } from '@/types';
 
 import { Tooltip } from '@@/Tip/Tooltip';
 
 import styles from './SwitchField.module.css';
 import { Switch } from './Switch';
 
-export interface Props {
+export interface Props extends AutomationTestingProps {
   label: string;
   checked: boolean;
   onChange(value: boolean, index?: number): void;
@@ -21,7 +22,7 @@ export interface Props {
   labelClass?: string;
   switchClass?: string;
   fieldClass?: string;
-  dataCy?: string;
+
   disabled?: boolean;
   featureId?: FeatureId;
   valueExplanation?: ReactNode;
@@ -35,7 +36,7 @@ export function SwitchField({
   name = uuid(),
   labelClass,
   fieldClass,
-  dataCy,
+  'data-cy': dataCy,
   disabled,
   onChange,
   featureId,
@@ -65,7 +66,7 @@ export function SwitchField({
         onChange={onChange}
         index={index}
         featureId={featureId}
-        dataCy={dataCy}
+        data-cy={dataCy}
       />
       {valueExplanation && <span>{valueExplanation}</span>}
     </div>