diff --git a/.changeset/a11y-timePicker-shortcut.md b/.changeset/a11y-timePicker-shortcut.md new file mode 100644 index 000000000..bc4e3552a --- /dev/null +++ b/.changeset/a11y-timePicker-shortcut.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +fix(TimePicker): improve TimePicker internationalization example. \ No newline at end of file diff --git a/website/react-magma-docs/src/pages/api/time-picker.mdx b/website/react-magma-docs/src/pages/api/time-picker.mdx index a1fec11a3..5062fd01b 100644 --- a/website/react-magma-docs/src/pages/api/time-picker.mdx +++ b/website/react-magma-docs/src/pages/api/time-picker.mdx @@ -142,7 +142,11 @@ export function Example() { return ( <> - +
@@ -174,6 +178,8 @@ export function Example() { ## Internationalization +The `TimePicker` component supports internationalization through the `I18nContext`. You can provide translations for the following properties `hoursAriaLabel`, `minutesAriaLabel` ,`amButtonAriaLabel`, `pmButtonAriaLabel`, `amSelectedAnnounce` and `pmSelectedAnnounce` Additionally, the `labelText` prop affects the aria-label of the input, ensuring that screen readers announce the correct label, making the component accessible for users in different languages. + ```tsx import React from 'react'; import { I18nContext, defaultI18n, TimePicker } from 'react-magma-dom'; @@ -185,9 +191,17 @@ export function Example() { value={{ ...defaultI18n, locale: zhCN, + timePicker: { + hoursAriaLabel: '小时', + minutesAriaLabel: '分钟', + amButtonAriaLabel: '上午已选中。要切换到下午,请按 p 或回车键。', + pmButtonAriaLabel: '下午已选中。要切换到上午,请按 a 或回车键。', + amSelectedAnnounce: '现在选择上午', + pmSelectedAnnounce: '现在选择下午', + }, }} > - +