From d7fa0a16bebbb58e842f28396a0973f16a060996 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 2 Jun 2022 18:57:56 +0200
Subject: fix: improve help button accessibility with aria-pressed

---
 src/components/atoms/buttons/button.tsx          | 12 ++++++++----
 src/components/molecules/buttons/help-button.tsx |  5 ++++-
 src/components/molecules/forms/fieldset.tsx      |  1 +
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 9776687..fecbcfd 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -7,6 +7,14 @@ import {
 import styles from './buttons.module.scss';
 
 export type ButtonProps = {
+  /**
+   * Button accessible label.
+   */
+  'aria-label'?: string;
+  /**
+   * Indicates the current "pressed" state of a toggle button.
+   */
+  'aria-pressed'?: boolean | 'mixed';
   /**
    * The button body.
    */
@@ -15,10 +23,6 @@ export type ButtonProps = {
    * Set additional classnames to the button wrapper.
    */
   className?: string;
-  /**
-   * Button accessible label.
-   */
-  'aria-label'?: string;
   /**
    * Button state. Default: false.
    */
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index ccf1ebd..ec89f4e 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -3,7 +3,10 @@ import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
-export type HelpButtonProps = Pick<ButtonProps, 'className' | 'onClick'>;
+export type HelpButtonProps = Pick<
+  ButtonProps,
+  'aria-pressed' | 'className' | 'onClick'
+>;
 
 /**
  * HelpButton component
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index 9f46247..670cfa1 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -100,6 +100,7 @@ const Fieldset: FC<FieldsetProps> = ({
       {TooltipComponent && (
         <>
           <HelpButton
+            aria-pressed={isTooltipOpened}
             className={`${styles.btn} ${buttonModifier}`}
             onClick={() => setIsTooltipOpened(!isTooltipOpened)}
             ref={buttonRef}
-- 
cgit v1.2.3