[8.13] fix: [Rules > Detection rules][AXE-CORE]: Buttons must have…

… discernible text (elastic#177273) (elastic#177636) # Backport This will backport the following commits from `main` to `8.13`: - [fix: [Rules > Detection rules][AXE-CORE]: Buttons must have discernible text (elastic#177273)](elastic#177273)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Alexey Antonov <[email protected]>
paul-tavares · Feb 22, 2024 · 0894531 · 0894531
1 parent 621a681
commit 0894531
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 0 deletions.
diff --git a/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx b/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
@@ -613,6 +613,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
                           enabled={isExistingRule && (rule?.enabled ?? false)}
                           startMlJobsIfNeeded={startMlJobsIfNeeded}
                           onChange={handleOnChangeEnabledRule}
+                          ruleName={rule?.name}
                         />
                         <EuiFlexItem>{i18n.ENABLE_RULE}</EuiFlexItem>
                       </EuiFlexGroup>

diff --git a/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx b/...olution/public/detection_engine/rule_management_ui/components/rules_table/use_columns.tsx
@@ -96,6 +96,7 @@ const useEnabledColumn = ({ hasCRUDPermissions, startMlJobs }: ColumnsProps): Ta
               (isMlRule(rule.type) && !hasMlPermissions)
             }
             isLoading={loadingIds.includes(rule.id)}
+            ruleName={rule.name}
           />
         </EuiToolTip>
       ),

diff --git a/...k/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx b/...k/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx
@@ -74,6 +74,33 @@ describe('RuleSwitch', () => {
     expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props().checked).toBeFalsy();
   });
 
+  test('it sets the undefined aria-label for switch if ruleName not passed', () => {
+    const wrapper = mount(<RuleSwitchComponent enabled={true} id={'7'} />, {
+      wrappingComponent: TestProviders,
+    });
+    expect(
+      wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props()['aria-label']
+    ).toBeUndefined();
+  });
+
+  test('it sets the correct aria-label for switch if "enabled" is true', () => {
+    const wrapper = mount(<RuleSwitchComponent enabled={true} id={'7'} ruleName={'test'} />, {
+      wrappingComponent: TestProviders,
+    });
+    expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props()['aria-label']).toBe(
+      'Switch off "test"'
+    );
+  });
+
+  test('it sets the correct aria-label for switch if "enabled" is false', () => {
+    const wrapper = mount(<RuleSwitchComponent enabled={false} id={'7'} ruleName={'test'} />, {
+      wrappingComponent: TestProviders,
+    });
+    expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props()['aria-label']).toBe(
+      'Switch on "test"'
+    );
+  });
+
   test('it dispatches error toaster if "enableRules" call rejects', async () => {
     const mockError = new Error('uh oh');
     (performBulkAction as jest.Mock).mockRejectedValue(mockError);

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.tsx
@@ -14,6 +14,7 @@ import { SINGLE_RULE_ACTIONS } from '../../../../common/lib/apm/user_actions';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
 import { useExecuteBulkAction } from '../../../../detection_engine/rule_management/logic/bulk_actions/use_execute_bulk_action';
 import { useRulesTableContextOptional } from '../../../../detection_engine/rule_management_ui/components/rules_table/rules_table/rules_table_context';
+import { ruleSwitchAriaLabel } from './translations';
 
 const StaticSwitch = styled(EuiSwitch)`
   .euiSwitch__thumb,
@@ -31,6 +32,7 @@ export interface RuleSwitchProps {
   isLoading?: boolean;
   startMlJobsIfNeeded?: () => Promise<void>;
   onChange?: (enabled: boolean) => void;
+  ruleName?: string;
 }
 
 /**
@@ -43,8 +45,10 @@ export const RuleSwitchComponent = ({
   enabled,
   startMlJobsIfNeeded,
   onChange,
+  ruleName,
 }: RuleSwitchProps) => {
   const [myIsLoading, setMyIsLoading] = useState(false);
+  const ariaLabel = ruleName ? ruleSwitchAriaLabel(ruleName, enabled) : undefined;
   const rulesTableContext = useRulesTableContextOptional();
   const { startTransaction } = useStartTransaction();
   const { executeBulkAction } = useExecuteBulkAction({ suppressSuccessToast: !rulesTableContext });
@@ -93,6 +97,7 @@ export const RuleSwitchComponent = ({
             disabled={isDisabled}
             checked={enabled}
             onChange={onRuleStateChange}
+            aria-label={ariaLabel}
           />
         )}
       </EuiFlexItem>

diff --git a/.../plugins/security_solution/public/detections/components/rules/rule_switch/translations.ts b/.../plugins/security_solution/public/detections/components/rules/rule_switch/translations.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ruleSwitchAriaLabel = (name: string, isActive: boolean) =>
+  i18n.translate('xpack.securitySolution.ruleDetails.ruleSwitch.ariaLabel', {
+    values: {
+      name,
+      action: isActive
+        ? i18n.translate('xpack.securitySolution.ruleDetails.ruleSwitch.ariaLabel.switchOff', {
+            defaultMessage: 'Switch off',
+          })
+        : i18n.translate('xpack.securitySolution.ruleDetails.ruleSwitch.ariaLabel.switchOn', {
+            defaultMessage: 'Switch on',
+          }),
+    },
+    defaultMessage: '{action} "{name}"',
+  });