diff --git a/web/app/components/base/form/components/field/__tests__/number-input.spec.tsx b/web/app/components/base/form/components/field/__tests__/number-input.spec.tsx
index eb5b419d78..714c280008 100644
--- a/web/app/components/base/form/components/field/__tests__/number-input.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/number-input.spec.tsx
@@ -27,7 +27,7 @@ describe('NumberInputField', () => {
it('should update value when users click increment', () => {
render()
- fireEvent.click(screen.getByRole('button', { name: 'common.operation.increment' }))
+ fireEvent.click(screen.getByRole('button', { name: 'Increment value' }))
expect(mockField.handleChange).toHaveBeenCalledWith(3)
})
diff --git a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
index 4cc07bc8eb..f988e2b312 100644
--- a/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/number-field/__tests__/index.spec.tsx
@@ -172,13 +172,13 @@ describe('NumberField wrapper', () => {
// Increment and decrement buttons should preserve accessible naming, icon fallbacks, and spacing variants.
describe('Control buttons', () => {
- it('should provide localized aria labels and default icons when labels are not provided', () => {
+ it('should provide english fallback aria labels and default icons when labels are not provided', () => {
renderNumberField({
controlsProps: {},
})
- const increment = screen.getByRole('button', { name: 'common.operation.increment' })
- const decrement = screen.getByRole('button', { name: 'common.operation.decrement' })
+ const increment = screen.getByRole('button', { name: 'Increment value' })
+ const decrement = screen.getByRole('button', { name: 'Decrement value' })
expect(increment.querySelector('.i-ri-arrow-up-s-line')).toBeInTheDocument()
expect(decrement.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
@@ -217,11 +217,11 @@ describe('NumberField wrapper', () => {
},
})
- expect(screen.getByRole('button', { name: 'common.operation.increment' })).toBeInTheDocument()
- expect(screen.getByRole('button', { name: 'common.operation.decrement' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Increment value' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'Decrement value' })).toBeInTheDocument()
})
- it('should rely on aria-labelledby when provided instead of injecting a translated aria-label', () => {
+ it('should rely on aria-labelledby when provided instead of injecting a fallback aria-label', () => {
render(
<>
Increment from label
diff --git a/web/app/components/base/ui/number-field/index.tsx b/web/app/components/base/ui/number-field/index.tsx
index 97f1cc7d31..7d4c43b815 100644
--- a/web/app/components/base/ui/number-field/index.tsx
+++ b/web/app/components/base/ui/number-field/index.tsx
@@ -4,7 +4,6 @@ import type { VariantProps } from 'class-variance-authority'
import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
import { cva } from 'class-variance-authority'
import * as React from 'react'
-import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
export const NumberField = BaseNumberField.Root
@@ -188,18 +187,19 @@ type NumberFieldButtonVariantProps = Omit<
export type NumberFieldButtonProps = React.ComponentPropsWithoutRef & NumberFieldButtonVariantProps
+const incrementAriaLabel = 'Increment value'
+const decrementAriaLabel = 'Decrement value'
+
export function NumberFieldIncrement({
className,
children,
size = 'regular',
...props
}: NumberFieldButtonProps) {
- const { t } = useTranslation()
-
return (
{children ?? }
@@ -213,12 +213,10 @@ export function NumberFieldDecrement({
size = 'regular',
...props
}: NumberFieldButtonProps) {
- const { t } = useTranslation()
-
return (
{children ?? }
diff --git a/web/app/components/base/ui/toast/__tests__/index.spec.tsx b/web/app/components/base/ui/toast/__tests__/index.spec.tsx
index e9659fe704..1c0eb84f9e 100644
--- a/web/app/components/base/ui/toast/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/toast/__tests__/index.spec.tsx
@@ -31,13 +31,13 @@ describe('base/ui/toast', () => {
expect(await screen.findByText('Saved')).toBeInTheDocument()
expect(screen.getByText('Your changes are available now.')).toBeInTheDocument()
- const viewport = screen.getByRole('region', { name: 'common.toast.notifications' })
+ const viewport = screen.getByRole('region', { name: 'Notifications' })
expect(viewport).toHaveAttribute('aria-live', 'polite')
expect(viewport).toHaveClass('z-1101')
expect(viewport.firstElementChild).toHaveClass('top-4')
expect(screen.getByRole('dialog')).not.toHaveClass('outline-hidden')
expect(document.body.querySelector('[aria-hidden="true"].i-ri-checkbox-circle-fill')).toBeInTheDocument()
- expect(document.body.querySelector('button[aria-label="common.toast.close"][aria-hidden="true"]')).toBeInTheDocument()
+ expect(document.body.querySelector('button[aria-label="Close notification"][aria-hidden="true"]')).toBeInTheDocument()
})
// Collapsed stacks should keep multiple toast roots mounted for smooth stack animation.
@@ -57,12 +57,12 @@ describe('base/ui/toast', () => {
expect(await screen.findByText('Third toast')).toBeInTheDocument()
expect(screen.getAllByRole('dialog')).toHaveLength(3)
- expect(document.body.querySelectorAll('button[aria-label="common.toast.close"][aria-hidden="true"]')).toHaveLength(3)
+ expect(document.body.querySelectorAll('button[aria-label="Close notification"][aria-hidden="true"]')).toHaveLength(3)
- fireEvent.mouseEnter(screen.getByRole('region', { name: 'common.toast.notifications' }))
+ fireEvent.mouseEnter(screen.getByRole('region', { name: 'Notifications' }))
await waitFor(() => {
- expect(document.body.querySelector('button[aria-label="common.toast.close"][aria-hidden="true"]')).not.toBeInTheDocument()
+ expect(document.body.querySelector('button[aria-label="Close notification"][aria-hidden="true"]')).not.toBeInTheDocument()
})
})
@@ -126,9 +126,9 @@ describe('base/ui/toast', () => {
})
})
- fireEvent.mouseEnter(screen.getByRole('region', { name: 'common.toast.notifications' }))
+ fireEvent.mouseEnter(screen.getByRole('region', { name: 'Notifications' }))
- const dismissButton = await screen.findByRole('button', { name: 'common.toast.close' })
+ const dismissButton = await screen.findByRole('button', { name: 'Close notification' })
act(() => {
dismissButton.click()
diff --git a/web/app/components/base/ui/toast/index.tsx b/web/app/components/base/ui/toast/index.tsx
index abb71d371e..4b589836e3 100644
--- a/web/app/components/base/ui/toast/index.tsx
+++ b/web/app/components/base/ui/toast/index.tsx
@@ -7,7 +7,6 @@ import type {
} from '@base-ui/react/toast'
import type { ReactNode } from 'react'
import { Toast as BaseToast } from '@base-ui/react/toast'
-import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
type ToastData = Record
@@ -35,6 +34,9 @@ const TOAST_TONE_STYLES = {
},
} satisfies Record
+const toastCloseLabel = 'Close notification'
+const toastViewportLabel = 'Notifications'
+
type ToastType = keyof typeof TOAST_TONE_STYLES
type ToastAddOptions = Omit, 'data' | 'positionerProps' | 'type'> & {
@@ -145,7 +147,6 @@ function ToastCard({
}: {
toast: ToastObject
}) {
- const { t } = useTranslation('common')
const toastType = getToastType(toastItem.type)
return (
@@ -200,7 +201,7 @@ function ToastCard({
()
return (