SONAR-23299 A11y improvements in QG

1 files changed, 31 insertions, 19 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
index c13f91b0cd8..c78f88b41c6 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ListHeader.tsx
@@ -18,10 +18,16 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Button, ButtonVariety } from '@sonarsource/echoes-react';
+import {
+  Button,
+  ButtonVariety,
+  Heading,
+  IconQuestionMark,
+  Popover,
+} from '@sonarsource/echoes-react';
 import * as React from 'react';
-import { HelperHintIcon, Title } from '~design-system';
-import DocHelpTooltip from '~sonar-aligned/components/controls/DocHelpTooltip';
+import { useIntl } from 'react-intl';
+import DocumentationLink from '../../../components/common/DocumentationLink';
 import ModalButton, { ModalProps } from '../../../components/controls/ModalButton';
 import { DocLink } from '../../../helpers/doc-links';
 import { translate } from '../../../helpers/l10n';
@@ -41,7 +47,7 @@ function CreateQualityGateModal() {
     <div>
       <ModalButton modal={renderModal}>
         {({ onClick }) => (
-          <Button data-test="quality-gates__add" onClick={onClick} variety={ButtonVariety.Primary}>
+          <Button data-test="quality-gates__add" onClick={onClick} variety={ButtonVariety.Default}>
             {translate('create')}
           </Button>
         )}
@@ -51,24 +57,30 @@ function CreateQualityGateModal() {
 }
 
 export default function ListHeader({ canCreate }: Readonly<Props>) {
+  const intl = useIntl();
   return (
     <div className="sw-flex sw-justify-between sw-pb-4">
-      <div className="sw-flex sw-justify-between">
-        <Title className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0">
-          {translate('quality_gates.page')}
-        </Title>
-        <DocHelpTooltip
-          className="sw-ml-2"
-          content={translate('quality_gates.help')}
-          links={[
-            {
-              href: DocLink.QualityGates,
-              label: translate('learn_more'),
-            },
-          ]}
+      <div className="sw-flex sw-items-center sw-gap-1 sw-justify-between">
+        <Heading as="h1" className="sw-flex sw-items-center sw-typo-lg-semibold sw-mb-0">
+          {intl.formatMessage({ id: 'quality_gates.page' })}
+        </Heading>
+        <Popover
+          title={intl.formatMessage({ id: 'quality_gates.help.title' })}
+          description={intl.formatMessage({ id: 'quality_gates.help.desc' })}
+          footer={
+            <DocumentationLink standalone to={DocLink.QualityGates}>
+              {intl.formatMessage({ id: 'learn_more' })}
+            </DocumentationLink>
+          }
         >
-          <HelperHintIcon />
-        </DocHelpTooltip>
+          <Button
+            className="sw-p-0 sw-h-fit sw-min-h-fit"
+            aria-label={intl.formatMessage({ id: 'help' })}
+            variety={ButtonVariety.DefaultGhost}
+          >
+            <IconQuestionMark />
+          </Button>
+        </Popover>
       </div>
       {canCreate && <CreateQualityGateModal />}
     </div>