(PC-31589)[PRO] feat: ButtonLink should not be disabled (a11y)

pass-culture · Sep 2, 2024 · f825aa6 · f825aa6
1 parent 303b0f6
commit f825aa6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 63 deletions.
diff --git a/pro/src/pages/Home/Offerers/OffererDetails.tsx b/pro/src/pages/Home/Offerers/OffererDetails.tsx
@@ -72,19 +72,20 @@ export const OffererDetails = ({
         <div className={styles['venue-buttons']}>
           <div className={cn(styles['separator'])} />
 
-          <ButtonLink
-            variant={ButtonVariant.TERNARY}
-            to="/collaborateurs"
-            icon={fullAddUserIcon}
-            isDisabled={!isUserOffererValidated}
-            onClick={() => {
-              logEvent(OffererLinkEvents.CLICKED_INVITE_COLLABORATOR, {
-                offererId: selectedOffererId ?? undefined,
-              })
-            }}
-          >
-            Inviter
-          </ButtonLink>
+          {isUserOffererValidated && (
+            <ButtonLink
+              variant={ButtonVariant.TERNARY}
+              to="/collaborateurs"
+              icon={fullAddUserIcon}
+              onClick={() => {
+                logEvent(OffererLinkEvents.CLICKED_INVITE_COLLABORATOR, {
+                  offererId: selectedOffererId ?? undefined,
+                })
+              }}
+            >
+              Inviter
+            </ButtonLink>
+          )}
         </div>
       </div>
     </Card>

diff --git a/pro/src/pages/Home/VenueOfferSteps/VenueOfferSteps.tsx b/pro/src/pages/Home/VenueOfferSteps/VenueOfferSteps.tsx
@@ -131,7 +131,6 @@ export const VenueOfferSteps = ({
             {venue && !venue.hasCreatedOffer && (
               <ButtonLink
                 className={styles['step-button-width']}
-                isDisabled={!hasVenue}
                 variant={ButtonVariant.BOX}
                 icon={fullNextIcon}
                 to={`/offre/creation?lieu=${venue.id}&structure=${offerer.id}`}
@@ -143,7 +142,6 @@ export const VenueOfferSteps = ({
             {!offererHasBankAccount && displayButtonDependingVenue && (
               <ButtonLink
                 className={styles['step-button-width']}
-                isDisabled={!hasVenue}
                 variant={ButtonVariant.BOX}
                 icon={fullNextIcon}
                 to={`remboursements/informations-bancaires?structure=${offerer.id}`}
@@ -160,7 +158,6 @@ export const VenueOfferSteps = ({
             {venue && shouldDisplayEACInformationSection && (
               <ButtonLink
                 className={styles['step-button-width']}
-                isDisabled={!venue.hasAdageId}
                 variant={ButtonVariant.BOX}
                 icon={fullNextIcon}
                 to={`/structures/${offerer.id}/lieux/${venue.id}/collectif`}

diff --git a/pro/src/pages/Home/VenueOfferSteps/__specs__/VenueOfferSteps.spec.tsx b/pro/src/pages/Home/VenueOfferSteps/__specs__/VenueOfferSteps.spec.tsx
@@ -171,25 +171,6 @@ describe('VenueOfferSteps', () => {
     ).toBeInTheDocument()
   })
 
-  it('should display disabled link to eac informations if venue doesnt have adage id', () => {
-    vi.spyOn(
-      venueUtils,
-      'shouldDisplayEACInformationSectionForVenue'
-    ).mockReturnValue(true)
-    props.venue = { ...defaultGetOffererVenueResponseModel }
-    props.venue = {
-      ...defaultGetOffererVenueResponseModel,
-      hasAdageId: false,
-    }
-
-    renderVenueOfferSteps(props)
-    expect(
-      screen.getByRole('link', {
-        name: 'Renseigner mes informations à destination des enseignants Action non disponible',
-      })
-    ).toBeInTheDocument()
-  })
-
   it('should not display dms link if condition to display it is false', () => {
     props.hasVenue = false
 

diff --git a/pro/src/ui-kit/Button/ButtonLink.tsx b/pro/src/ui-kit/Button/ButtonLink.tsx
@@ -9,7 +9,6 @@ import styles from './Button.module.scss'
 import { ButtonVariant, IconPositionEnum, SharedButtonProps } from './types'
 
 export type LinkProps = {
-  isDisabled?: boolean
   svgAlt?: string
   isExternal?: boolean
   to: string
@@ -29,7 +28,6 @@ export const ButtonLink = forwardRef(
       className,
       children,
       icon,
-      isDisabled = false,
       onClick,
       variant = ButtonVariant.TERNARY,
       iconPosition = IconPositionEnum.LEFT,
@@ -46,7 +44,6 @@ export const ButtonLink = forwardRef(
       styles['button'],
       styles[`button-${variant}`],
       styles[`button-${iconPosition}`],
-      { [styles[`button-disabled`]]: isDisabled },
       styles['button-link'],
       className
     )
@@ -85,14 +82,7 @@ export const ButtonLink = forwardRef(
     // for internal links so that developers can't make mistakes/forget to add the slash
     const absoluteUrl = isExternal || to.startsWith('/') ? to : `/${to}`
 
-    const callback: MouseEventHandler<HTMLAnchorElement> = (e) =>
-      isDisabled ? e.preventDefault() : onClick?.(e)
-
-    const disabled = isDisabled ? (
-      <span className="visually-hidden">Action non disponible</span>
-    ) : (
-      <></>
-    )
+    const callback: MouseEventHandler<HTMLAnchorElement> = (e) => onClick?.(e)
 
     body = isExternal ? (
       <a
@@ -106,7 +96,6 @@ export const ButtonLink = forwardRef(
         ref={forwadedRef}
       >
         {body}
-        {disabled}
       </a>
     ) : (
       <Link
@@ -120,7 +109,6 @@ export const ButtonLink = forwardRef(
         ref={forwadedRef}
       >
         {body}
-        {disabled}
       </Link>
     )
 

diff --git a/pro/src/ui-kit/Button/__specs__/ButtonLink.spec.tsx b/pro/src/ui-kit/Button/__specs__/ButtonLink.spec.tsx
@@ -72,21 +72,6 @@ describe('ButtonLink', () => {
     expect(button).toHaveAttribute('href', '/offers')
   })
 
-  it('should not call callback action when button disabled', async () => {
-    const onClick = vi.fn()
-    render(
-      <ButtonLink {...props} onClick={onClick} isDisabled>
-        test
-      </ButtonLink>
-    )
-
-    const button = screen.getByRole('link', { name: /test/ })
-    await userEvent.click(button)
-
-    expect(onClick).not.toHaveBeenCalled()
-    expect(screen.getByText('Action non disponible')).toBeInTheDocument()
-  })
-
   it('should have right attributes for open in new tab', () => {
     render(
       <ButtonLink {...props} opensInNewTab>