From 5fc255badc6bce977f6573dbc330961bb79d7b3a Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Wed, 27 Mar 2024 11:53:54 +0100
Subject: [PATCH] Merge pull request #17568 from overleaf/rd-b5-button-fix

[web] Fix the Button component accessibility label

GitOrigin-RevId: 1d157fca370c5e0425890468d7cad169d0261c23
---
 .../ui/components/bootstrap-5/icon-button.tsx         | 11 +++--------
 .../ui/components/bootstrap-5/icon-text-button.tsx    |  5 +----
 .../ui/components/bootstrap-5/split-button.tsx        |  7 ++++++-
 .../features/ui/components/types/icon-button-props.ts |  1 +
 .../ui/components/types/split-button-props.ts         |  1 +
 .../web/frontend/stories/ui/icon-button.stories.tsx   |  5 ++++-
 .../web/frontend/stories/ui/split-button.stories.tsx  |  5 ++++-
 .../bootstrap-5/scss/components/button.scss           |  4 ++--
 8 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/icon-button.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/icon-button.tsx
index e78194374e..7923dcdb31 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/icon-button.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/icon-button.tsx
@@ -1,22 +1,17 @@
-import { useTranslation } from 'react-i18next'
 import MaterialIcon from '@/shared/components/material-icon'
 import Button from './button'
 import type { IconButtonProps } from '@/features/ui/components/types/icon-button-props'
 import classNames from 'classnames'
 
 export default function IconButton({
+  accessibilityLabel,
   icon,
   isLoading = false,
   size = 'default',
   ...props
 }: IconButtonProps) {
-  const { t } = useTranslation()
-
   const iconButtonClassName = `icon-button-${size}`
-  const iconSizeClassName =
-    size === 'large'
-      ? 'leading-trailing-icon-large'
-      : 'leading-trailing-icon-small'
+  const iconSizeClassName = size === 'large' ? 'icon-large' : 'icon-small'
   const materialIconClassName = classNames(iconSizeClassName, {
     'button-content-hidden': isLoading,
   })
@@ -24,7 +19,7 @@ export default function IconButton({
   return (
     <Button className={iconButtonClassName} isLoading={isLoading} {...props}>
       <MaterialIcon
-        accessibilityLabel={t('add')}
+        accessibilityLabel={accessibilityLabel}
         className={materialIconClassName}
         type={icon}
       />
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/icon-text-button.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/icon-text-button.tsx
index 973b6c52d2..6901ce01b9 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/icon-text-button.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/icon-text-button.tsx
@@ -10,10 +10,7 @@ export default function IconTextButton({
   trailingIcon,
   ...props
 }: IconTextButtonProps) {
-  const materialIconClassName =
-    size === 'large'
-      ? 'leading-trailing-icon-large'
-      : 'leading-trailing-icon-small'
+  const materialIconClassName = size === 'large' ? 'icon-large' : 'icon-small'
 
   return (
     <Button size={size} {...props}>
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/split-button.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/split-button.tsx
index 0e49c476ac..48e191b75f 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/split-button.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/split-button.tsx
@@ -10,6 +10,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 import type { SplitButtonProps } from '@/features/ui/components/types/split-button-props'
 
 export function SplitButton({
+  accessibilityLabel,
   align,
   id,
   items,
@@ -31,7 +32,11 @@ export function SplitButton({
           variant={variant}
           {...props}
         >
-          <MaterialIcon className="split-button-caret" type="expand_more" />
+          <MaterialIcon
+            className="split-button-caret"
+            type="expand_more"
+            accessibilityLabel={accessibilityLabel}
+          />
         </DropdownToggle>
         <DropdownMenu>
           {items.map((item, index) => (
diff --git a/services/web/frontend/js/features/ui/components/types/icon-button-props.ts b/services/web/frontend/js/features/ui/components/types/icon-button-props.ts
index 7a29f052bf..ec39180c7c 100644
--- a/services/web/frontend/js/features/ui/components/types/icon-button-props.ts
+++ b/services/web/frontend/js/features/ui/components/types/icon-button-props.ts
@@ -1,6 +1,7 @@
 import { ButtonProps } from './button-props'
 
 export type IconButtonProps = ButtonProps & {
+  accessibilityLabel?: string
   icon: string
   type?: 'button'
 }
diff --git a/services/web/frontend/js/features/ui/components/types/split-button-props.ts b/services/web/frontend/js/features/ui/components/types/split-button-props.ts
index 637bc35273..28c10c75ec 100644
--- a/services/web/frontend/js/features/ui/components/types/split-button-props.ts
+++ b/services/web/frontend/js/features/ui/components/types/split-button-props.ts
@@ -19,6 +19,7 @@ export type SplitButtonVariants = Extract<
 >
 
 export type SplitButtonProps = PropsWithChildren<{
+  accessibilityLabel?: string
   align?: DropdownProps['align']
   disabled?: boolean
   id: DropdownToggleProps['id']
diff --git a/services/web/frontend/stories/ui/icon-button.stories.tsx b/services/web/frontend/stories/ui/icon-button.stories.tsx
index 3b6ee70c58..4f99324d9d 100644
--- a/services/web/frontend/stories/ui/icon-button.stories.tsx
+++ b/services/web/frontend/stories/ui/icon-button.stories.tsx
@@ -1,10 +1,13 @@
 import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
 import type { Meta } from '@storybook/react'
+import { useTranslation } from 'react-i18next'
 
 type Args = React.ComponentProps<typeof IconButton>
 
 export const Icon = (args: Args) => {
-  return <IconButton disabled {...args} />
+  const { t } = useTranslation()
+
+  return <IconButton accessibilityLabel={t('add')} disabled {...args} />
 }
 
 const meta: Meta<typeof IconButton> = {
diff --git a/services/web/frontend/stories/ui/split-button.stories.tsx b/services/web/frontend/stories/ui/split-button.stories.tsx
index 14db3e0cb5..883ec80a94 100644
--- a/services/web/frontend/stories/ui/split-button.stories.tsx
+++ b/services/web/frontend/stories/ui/split-button.stories.tsx
@@ -1,10 +1,13 @@
 import { SplitButton } from '@/features/ui/components/bootstrap-5/split-button'
 import type { Meta } from '@storybook/react'
+import { useTranslation } from 'react-i18next'
 
 type Args = React.ComponentProps<typeof SplitButton>
 
 export const Dropdown = (args: Args) => {
-  return <SplitButton {...args} />
+  const { t } = useTranslation()
+
+  return <SplitButton accessibilityLabel={t('expand')} {...args} />
 }
 const meta: Meta<typeof SplitButton> = {
   title: 'Shared/Components/Bootstrap 5/SplitButton',
diff --git a/services/web/frontend/stylesheets/bootstrap-5/scss/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/scss/components/button.scss
index 4635fc6fda..2cd78f2fcb 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/scss/components/button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/scss/components/button.scss
@@ -35,11 +35,11 @@
   align-items: center;
   gap: var(--spacing-04); // Add gap between text and icons
 
-  .leading-trailing-icon-small {
+  .icon-small {
     font-size: 20px;
   }
 
-  .leading-trailing-icon-large {
+  .icon-large {
     font-size: 24px;
   }
 }