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: '现在选择下午',
+ },
}}
>
-
+