Role and semantics
Section titled “Role and semantics”Provider has no role. The wrapper <div> reports the content’s language with lang and its direction with dir; screen readers use these values to pick the right pronunciation and reading direction.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Provider takes no focus. Keys of the components inside are on their own pages. |
| Arrow keys | With direction="rtl", the left and right arrows of Base UI parts follow the text direction. |
None. Provider is not in the focus order and shows no focus ring.
Screen reader output
Section titled “Screen reader output”| Setting | Announced |
|---|---|
locale="en-GB" |
Library strings in English: “Loading”. The content is marked lang="en-GB". |
locale="tr-TR" |
Library strings in Turkish: “Yükleniyor”. The content is marked lang="tr-TR". |
direction="rtl" |
The content reads right to left. |
lang marks only the Provider’s content. The app root must declare the main language of the page with <html lang>.
Contrast
Section titled “Contrast”Provider draws no colour; contrast depends on the tokens of the components inside. reducedMotion does not change colours.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Provider meets it | What the product team does |
|---|---|---|
| 3.1.1 Language of page | Provider marks its own area with lang; it does not set the page language. |
Set <html lang> at the app root. |
| 3.1.2 Language of parts | A nested Provider changes the lang of its own area. |
Wrap a section in another language in its own Provider. |
| 1.3.2 Meaningful sequence | dir sets the reading order; components mirror with logical properties. |
Check right-to-left screens with real text. |
| 2.3.3 Animation from interactions | reduce and the operating system setting reduce motion; neither turns it back on. |
If you offer a motion setting in the app, connect it to reducedMotion. |