@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} RENAMED
@@ -3,7 +3,7 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/index.md
6
+ All demo code should be added/edited in ./demo/voiceover.md
7
7
 
8
8
  With the exception of adding custom elements if needed for the demo.
9
9
 
@@ -16,23 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-dropdown</title>
19
+ <title>Auro Web Component Demo | auro-datepicker | VoiceOver</title>
20
20
 
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
23
 
24
- <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
25
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
26
 
27
27
  <!-- Design Token Alaska Theme -->
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
29
+
30
30
  <!-- Webcore Stylesheet Alaska Theme -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
32
+
33
33
  <!-- Demo Specific Styles -->
34
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
37
  <style>
37
38
  table {
38
39
  --ds-color-container-secondary-default: transparent;
@@ -41,41 +42,18 @@
41
42
  tr:not(:last-of-type) {
42
43
  border-bottom: 1px solid var(--ds-color-border-tertiary-default);
43
44
  }
44
-
45
- sup {
46
- font-size: 60%;
47
- font-style: italic;
48
- opacity: 0.6;
49
- top: -.5rem;
50
- }
51
-
52
- .note {
53
- margin: 10px 0;
54
- padding: 10px;
55
- border-radius: 6px;
56
- font-style: italic;
57
- color: var(--ds-basic-color-texticon-muted);
58
- background-color: var(--ds-basic-color-surface-neutral-subtle);
59
- }
60
45
  </style>
61
- </head>
46
+ </head>
62
47
  <body class="auro-markdown">
63
48
  <main></main>
64
49
 
65
50
  <script type="module">
66
- import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
67
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
68
- fetch('./keyboardBehavior.md')
69
- .then((response) => response.text())
70
- .then((text) => {
71
- const rawHtml = marked.parse(text);
72
- document.querySelector('main').innerHTML = rawHtml;
73
- Prism.highlightAll();
74
- })
51
+ import { renderPage } from './demo-support.js';
52
+ await renderPage('./voiceover.md');
75
53
  </script>
76
54
 
77
55
  <!-- If additional elements are needed for the demo, add them here. -->
78
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
80
58
  </body>
81
- </html>
59
+ </html>
package/components/datepicker/demo/voiceover.md ADDED
@@ -0,0 +1,98 @@
1
+ <auro-header level="1" id="overview">Datepicker - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-datepicker&gt;</code> component. It covers announcements, gestures, and workflows for both large and small viewports.</p>
3
+ <auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
4
+ <auro-header level="3" id="voiceOverFocusAnnouncement">Focus</auro-header>
5
+ <p>When focus is given to the datepicker trigger input the following is announced:</p>
6
+ <ol>
7
+ <li><strong>Label:</strong> <code>fromLabel</code> slot content (e.g. <em>"Choose a date"</em>)</li>
8
+ <li><strong>Current value:</strong> [current date value or empty]</li>
9
+ <li><strong>Role:</strong> <em>"text field"</em></li>
10
+ <li>
11
+ <strong>State hints:</strong>
12
+ <table class="compressed body-xs">
13
+ <thead>
14
+ <tr>
15
+ <th>State</th>
16
+ <th>What gets announced</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>Required</td>
22
+ <td><em>"required"</em></td>
23
+ </tr>
24
+ <tr>
25
+ <td>Invalid</td>
26
+ <td><em>"invalid data"</em></td>
27
+ </tr>
28
+ <tr>
29
+ <td>Disabled</td>
30
+ <td><em>"dimmed"</em></td>
31
+ </tr>
32
+ </tbody>
33
+ </table>
34
+ </li>
35
+ <li><strong>Additional description:</strong> <code>helptext</code> slot content if present (after a brief pause)</li>
36
+ </ol>
37
+ <auro-header level="3" id="voiceOverClearButton">Clear Button</auro-header>
38
+ <p>When the clear button is focused, VoiceOver announces the <code>aria-label</code> from the <code>ariaLabel.input.clear</code> slot (or the default i18n text), followed by <em>"button"</em>.</p>
39
+ <auro-header level="3" id="voiceOverCalendarNavigation">Calendar Navigation</auro-header>
40
+ <p>When the calendar bib is open, users can navigate calendar cells using VoiceOver gestures (swipe left/right). Each cell announces:</p>
41
+ <ul>
42
+ <li>The date (e.g. <em>"January 15, 2026"</em>)</li>
43
+ <li>Whether the date is selected or within the selected range</li>
44
+ <li>Whether the date is disabled (outside min/max bounds)</li>
45
+ </ul>
46
+ <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
47
+ <p>The calendar bib may be <strong>closed</strong> using a gesture.</p>
48
+ <ul>
49
+ <li><strong>iOS VoiceOver:</strong> The two-finger <em>"scrub"</em> (zigzag / a <em>"Z"</em> shape) gesture acts as the <em>'Escape'</em> key, commonly used to dismiss modal views.</li>
50
+ <li>
51
+ <strong>Android TalkBack:</strong> users typically swipe down then left (an <em>"L"</em> gesture) or use the back gesture to go back/close.<br />
52
+ <div class="note">
53
+ <strong>How to Perform Android back/close gesture:</strong> Swipe inwards from either the left or right edge of the screen, typically from the middle-edge, to go to the previous screen.
54
+ </div>
55
+ </li>
56
+ </ul>
57
+ <auro-header level="3" id="voiceOverValidationAnnouncement">Validation Error</auro-header>
58
+ <p>When the component is invalid, the error message is rendered with <code>role="alert"</code> and <code>aria-live="assertive"</code>. VoiceOver will immediately announce the error message when it appears.</p>
59
+ <auro-header level="2" id="voiceOverLargeVPAnnouncements">Large Viewport Workflow</auro-header>
60
+ <p>Examples: large tablet, typical size or larger desktop browser window</p>
61
+ <ol>
62
+ <li><strong>Focus</strong> — Tab to the datepicker input.</li>
63
+ <li><strong>Type a date</strong> — Enter a date value directly or click/tap to open the calendar.</li>
64
+ <li><strong>Calendar opens</strong> — The dropdown bib opens with the calendar. Navigate dates with VoiceOver gestures.</li>
65
+ <li><strong>Select a date</strong> — Activate a calendar cell to select the date. The calendar closes and the selected date populates the input.</li>
66
+ </ol>
67
+ <auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
68
+ <p>Examples: mobile phone, very small desktop browser window</p>
69
+ <ol>
70
+ <li><strong>Focus</strong> — Tab or swipe to the datepicker input.</li>
71
+ <li>
72
+ <strong>Open:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button.
73
+ </li>
74
+ <li><strong>Navigate dates</strong> — Swipe through calendar cells.</li>
75
+ <li>
76
+ <strong>Select a date:</strong> Closes the fullscreen modal dialog, the selected date populates the input.
77
+ <p>~OR~</p>
78
+ <strong>Close without selecting:</strong> Closes the fullscreen modal dialog.
79
+ </li>
80
+ </ol>
81
+ <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
82
+ <auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
83
+ <p>What VoiceOver does:</p>
84
+ <ul>
85
+ <li>Focuses the element and announces it (e.g., <em>"[label], dimmed, text field"</em> on macOS / <em>"[label], dimmed"</em> on iOS).</li>
86
+ <li>The word <strong>"dimmed"</strong> is VoiceOver's way of indicating disabled.</li>
87
+ <li>The element remains in the focus order (Tab still reaches it).</li>
88
+ <li>The user cannot interact with it — the calendar can not be opened, and no date can be entered.</li>
89
+ </ul>
90
+ <p>Key distinction from <code>aria-hidden</code>: A disabled element is <em>reachable but not operable</em>. If you want VoiceOver to skip it entirely, you would need <code>aria-hidden="true"</code> or <code>tabindex="-1"</code>, but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.</p>
91
+ <p>This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says <em>"unavailable"</em>).</p>
92
+ <auro-header level="3" id="voiceOverStateInvalid">Invalid</auro-header>
93
+ <p>When an <code>&lt;auro-datepicker&gt;</code> is invalid the following occurs:</p>
94
+ <ul>
95
+ <li><code>Focus</code> — VoiceOver announces <em>"invalid data"</em> (macOS) or <em>"invalid entry"</em> (iOS) after the element's label.</li>
96
+ <li>The Help Text will render the error message and it will be included in the VoiceOver focus announcement.</li>
97
+ </ul>
98
+ <p>Example: when focusing on an invalid <code>&lt;auro-datepicker&gt;</code> the VoiceOver announces something like <em>"Choose a date, invalid data, text field, Please select a valid date"</em>.</p>