SONAR-22322 Fix a11y issues on Webhooks page

diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/PageHeader.tsx
index d06273188d92ba36c0205d7e4c48d97e031b03c6..a4586a3fff93f38e381ab9037c76bfb1388887eb 100644 (file)
--- a/server/sonar-web/src/main/js/apps/webhooks/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/PageHeader.tsx
@@ -18,9 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { Heading, Link } from '@sonarsource/echoes-react';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Link, Title } from '~design-system';
 import { DocLink } from '../../../helpers/doc-links';
 import { useDocUrl } from '../../../helpers/docs';
 import { translate } from '../../../helpers/l10n';
@@ -35,7 +35,9 @@ export default function PageHeader({ children }: Readonly<Props>) {
   return (
     <header className="sw-mb-2 sw-flex sw-items-center sw-justify-between">
       <div>
-        <Title>{translate('webhooks.page')}</Title>
+        <Heading as="h1" className="sw-mb-4">
+          {translate('webhooks.page')}
+        </Heading>
         <p>{translate('webhooks.description0')}</p>
         <p>
           <FormattedMessage

diff --git a/server/sonar-web/src/main/js/components/controls/ModalValidationField.tsx b/server/sonar-web/src/main/js/components/controls/ModalValidationField.tsx
index 753dc4263bbf881ed62b6b258c45f594c38cae0a..a9c2bdf8861156e17e639e55efe756e35531357a 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/ModalValidationField.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ModalValidationField.tsx
@@ -19,8 +19,10 @@
  */
 
 import styled from '@emotion/styled';
+import { IconCheckCircle, IconError } from '@sonarsource/echoes-react';
 import * as React from 'react';
-import { FlagErrorIcon, FlagSuccessIcon, FormField, Note, themeColor } from '~design-system';
+import { FormattedMessage } from 'react-intl';
+import { FormField, Note, themeColor } from '~design-system';
 import { translate } from '../../helpers/l10n';
 
 interface Props {
@@ -34,7 +36,7 @@ interface Props {
   touched: boolean | undefined;
 }
 
-export default function ModalValidationField(props: Props) {
+export default function ModalValidationField(props: Readonly<Props>) {
   const { description, dirty, error, label, id, required } = props;
 
   const isValid = dirty && props.touched && error === undefined;
@@ -48,12 +50,20 @@ export default function ModalValidationField(props: Props) {
     >
       <div className="sw-flex sw-items-center sw-justify-between">
         {props.children({ isInvalid: showError, isValid })}
-        {showError && <FlagErrorIcon className="sw-ml-2" />}
-        {isValid && <FlagSuccessIcon className="sw-ml-2" />}
+        {showError && <IconError color="echoes-color-icon-danger" className="sw-ml-2" />}
+        {isValid && <IconCheckCircle color="echoes-color-icon-success" className="sw-ml-2" />}
       </div>
 
-      {showError && <StyledNote className="sw-mt-2">{error}</StyledNote>}
-      {description && <Note className="sw-mt-2">{description}</Note>}
+      <div aria-live="assertive">
+        {isValid && (
+          <span className="sw-mt-2 sw-sr-only">
+            <FormattedMessage id="valid_input" />
+          </span>
+        )}
+        {showError && <StyledNote className="sw-mt-2">{error}</StyledNote>}
+      </div>
+
+      {description !== undefined && <Note className="sw-mt-2">{description}</Note>}
     </FormField>
   );
 }