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