From: 7PH <benjamin.raymond@sonarsource.com>
Date: Thu, 15 Aug 2024 08:43:56 +0000 (+0200)
Subject: SONAR-22287 Fix a11y issues on Background Tasks page
X-Git-Tag: 10.7.0.96327~226
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=563a8712bf5ca5a67cf00f730944b2715454be65;p=sonarqube.git

SONAR-22287 Fix a11y issues on Background Tasks page
---

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/__tests__/BackgroundTasks-it.tsx b/server/sonar-web/src/main/js/apps/background-tasks/__tests__/BackgroundTasks-it.tsx
index c984c2a9b74..338205bfae1 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/__tests__/BackgroundTasks-it.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/__tests__/BackgroundTasks-it.tsx
@@ -410,7 +410,11 @@ function getPageObject() {
     async clickOnTaskAction(rowIndex: number, label: string) {
       const row = ui.getAllRows()[rowIndex];
       expect(row).toBeVisible();
-      await user.click(within(row).getByRole('button', { name: 'background_tasks.show_actions' }));
+      await user.click(
+        within(row).getByRole('button', {
+          name: `background_tasks.show_actions_for_task_x_in_list.${rowIndex}`,
+        }),
+      );
       await user.click(within(row).getByRole('menuitem', { name: label }));
     },
   };
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx
index 31295c6c1ad..3671ee2f0f8 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/AnalysisWarningsModal.tsx
@@ -112,39 +112,41 @@ export class AnalysisWarningsModal extends React.PureComponent<Props, State> {
 
     const body = (
       <Spinner loading={loading}>
-        {warnings.map(({ dismissable, key, message }) => (
-          <React.Fragment key={key}>
-            <div className="sw-flex sw-items-center sw-mt-2">
-              <FlagMessage variant="warning">
-                <HtmlFormatter>
-                  <span
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{
-                      __html: sanitizeStringRestricted(message.trim().replace(/\n/g, '<br />')),
-                    }}
-                  />
-                </HtmlFormatter>
-              </FlagMessage>
-            </div>
-            <div>
-              {dismissable && currentUser.isLoggedIn && (
-                <div className="sw-mt-4">
-                  <Button
-                    isDisabled={Boolean(dismissedWarning)}
-                    onClick={() => {
-                      this.handleDismissMessage(key);
-                    }}
-                    variety={ButtonVariety.DangerOutline}
-                  >
-                    {translate('dismiss_permanently')}
-                  </Button>
-
-                  <Spinner className="sw-ml-2" loading={dismissedWarning === key} />
-                </div>
-              )}
-            </div>
-          </React.Fragment>
-        ))}
+        <ul>
+          {warnings.map(({ dismissable, key, message }) => (
+            <li key={key}>
+              <div className="sw-flex sw-items-center sw-mt-2">
+                <FlagMessage variant="warning">
+                  <HtmlFormatter>
+                    <span
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={{
+                        __html: sanitizeStringRestricted(message.trim().replace(/\n/g, '<br />')),
+                      }}
+                    />
+                  </HtmlFormatter>
+                </FlagMessage>
+              </div>
+              <div>
+                {dismissable && currentUser.isLoggedIn && (
+                  <div className="sw-mt-4">
+                    <Button
+                      isDisabled={Boolean(dismissedWarning)}
+                      onClick={() => {
+                        this.handleDismissMessage(key);
+                      }}
+                      variety={ButtonVariety.DangerOutline}
+                    >
+                      {translate('dismiss_permanently')}
+                    </Button>
+
+                    <Spinner className="sw-ml-2" loading={dismissedWarning === key} />
+                  </div>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
       </Spinner>
     );
 
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Task.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Task.tsx
index ab722b4f0f6..dbb564cb9c5 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Task.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Task.tsx
@@ -35,10 +35,11 @@ interface Props {
   onCancelTask: (task: ITask) => Promise<void>;
   onFilterTask: (task: ITask) => void;
   task: ITask;
+  taskIndex: number;
 }
 
 export default function Task(props: Readonly<Props>) {
-  const { task, component, onCancelTask, onFilterTask } = props;
+  const { task, component, taskIndex, onCancelTask, onFilterTask } = props;
 
   const appState = React.useContext(AppStateContext);
   const isDataCenter = appState.edition === EditionKey.datacenter;
@@ -54,6 +55,7 @@ export default function Task(props: Readonly<Props>) {
       <TaskExecutionTime ms={task.executionTimeMs} />
       <TaskActions
         component={component}
+        taskIndex={taskIndex}
         onCancelTask={onCancelTask}
         onFilterTask={onFilterTask}
         task={task}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskActions.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskActions.tsx
index c42b915f98a..1a91d5e740a 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TaskActions.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TaskActions.tsx
@@ -31,6 +31,7 @@ interface Props {
   onCancelTask: (task: Task) => Promise<void>;
   onFilterTask: (task: Task) => void;
   task: Task;
+  taskIndex: number;
 }
 
 interface State {
@@ -89,7 +90,7 @@ export default class TaskActions extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { component, task } = this.props;
+    const { component, task, taskIndex } = this.props;
 
     const canFilter = component === undefined && task.componentName;
     const canCancel = task.status === TaskStatuses.Pending;
@@ -106,7 +107,10 @@ export default class TaskActions extends React.PureComponent<Props, State> {
       <ActionCell>
         <ActionsDropdown
           id={`task-${task.id}-actions`}
-          ariaLabel={translate('background_tasks.show_actions')}
+          ariaLabel={translateWithParameters(
+            'background_tasks.show_actions_for_task_x_in_list',
+            taskIndex,
+          )}
           className="js-task-action"
         >
           {canFilter && task.componentName && (
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.tsx
index 274803fa07e..2c0171ec3de 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Tasks.tsx
@@ -59,10 +59,11 @@ export function Tasks({ tasks, component, onCancelTask, onFilterTask }: Readonly
         </TableRow>
       }
     >
-      {tasks.map((task) => (
+      {tasks.map((task, index) => (
         <Task
           component={component}
           key={task.id}
+          taskIndex={index}
           onCancelTask={onCancelTask}
           onFilterTask={onFilterTask}
           task={task}
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 7a7573f8bbd..d5961c4c853 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3835,7 +3835,7 @@ background_tasks.cancel_all_tasks.text=Are you sure you want to cancel all pendi
 background_tasks.cancel_all_tasks.submit=Cancel All
 background_tasks.scanner_context=Scanner Context
 background_tasks.show_scanner_context=Show Scanner Context
-background_tasks.show_actions=Show actions
+background_tasks.show_actions_for_task_x_in_list=Show actions for task in row {0}
 background_tasks.show_stacktrace=Show Error Details
 background_tasks.show_warnings=Show Warnings
 background_tasks.error_message=Error Message