Merge pull request #17568 from overleaf/rd-b5-button-fix

[web] Fix the Button component accessibility label

GitOrigin-RevId: 1d157fca370c5e0425890468d7cad169d0261c23

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}
       />

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}>

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) => (

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'
 }

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']

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> = {

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',

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;
   }
 }