SONAR-23299 A11y improvements in QG

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 c13f91b0cd8f1837e46e89a3d8b260d516b44654..c78f88b41c6a563e0d18d610097a84592799f8cf 100644 (file)
--- 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>

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 6b03a41cfe137320cfbba7e1fbfd3b07f0927291..1ebd3ff29b2852ec9001f2e5784fa5fa7e409fa4 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2509,7 +2509,8 @@ quality_gates.built_in.help=Built-in, immutable Quality Gate reflecting best pra
 quality_gates.built_in.description.1=This quality gate is provided by default.
 quality_gates.built_in.description.2=It will automatically be updated with the latest recommendations.
 quality_gates.status=Quality Gate status
-quality_gates.help=A Quality Gate is a set of measure-based, Boolean conditions. It helps you know immediately whether your projects are production-ready. Ideally, all projects will use the same quality gate. Each project's Quality Gate status is displayed prominently on its homepage.
+quality_gates.help.title=What is a quality gate?
+quality_gates.help.desc=It`s a set of measure-based, Boolean conditions. It helps you know immediately whether your projects are production-ready. Ideally, all projects will use the same quality gate. Each project's Quality Gate status is displayed prominently on its homepage.
 quality_gates.permissions=Permissions
 quality_gates.permissions.help=Users with the global "Administer quality gates" permission and those listed below can manage this quality gate.
 quality_gates.permissions.grant=Grant permissions to a user or a group