Skip to content

Commit 9c4f09b

Browse files
paluhpaluh
committed
Add basic aria attributes
1 parent 39c055d commit 9c4f09b

File tree

1 file changed

+266
-4
lines changed

1 file changed

+266
-4
lines changed

‎src/React/HTMLAttributes.purs

Lines changed: 266 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,269 @@ import React.Basic.Events (EventHandler)
66
import Type.Row (type (+))
77
import Unsafe.Coerce (unsafeCoerce)
88

9+
type AriaAttributes' otherProps =
10+
(
11+
-- /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
12+
-- 'aria-activedescendant'?: string | undefined;
13+
-- /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
14+
-- 'aria-atomic'?: Booleanish | undefined;
15+
-- /**
16+
-- * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
17+
-- * presented if they are made.
18+
-- */
19+
-- 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;
20+
-- /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
21+
-- 'aria-busy'?: Booleanish | undefined;
22+
-- /**
23+
-- * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
24+
-- * @see aria-pressed @see aria-selected.
25+
-- */
26+
-- 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;
27+
-- /**
28+
-- * Defines the total number of columns in a table, grid, or treegrid.
29+
-- * @see aria-colindex.
30+
-- */
31+
-- 'aria-colcount'?: number | undefined;
32+
-- /**
33+
-- * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
34+
-- * @see aria-colcount @see aria-colspan.
35+
-- */
36+
-- 'aria-colindex'?: number | undefined;
37+
-- /**
38+
-- * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
39+
-- * @see aria-colindex @see aria-rowspan.
40+
-- */
41+
-- 'aria-colspan'?: number | undefined;
42+
-- /**
43+
-- * Identifies the element (or elements) whose contents or presence are controlled by the current element.
44+
-- * @see aria-owns.
45+
-- */
46+
-- 'aria-controls'?: string | undefined;
47+
-- /** Indicates the element that represents the current item within a container or set of related elements. */
48+
-- 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;
49+
-- /**
50+
-- * Identifies the element (or elements) that describes the object.
51+
-- * @see aria-labelledby
52+
-- */
53+
-- 'aria-describedby'?: string | undefined;
54+
-- /**
55+
-- * Identifies the element that provides a detailed, extended description for the object.
56+
-- * @see aria-describedby.
57+
-- */
58+
-- 'aria-details'?: string | undefined;
59+
-- /**
60+
-- * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
61+
-- * @see aria-hidden @see aria-readonly.
62+
-- */
63+
-- 'aria-disabled'?: Booleanish | undefined;
64+
-- /**
65+
-- * Indicates what functions can be performed when a dragged object is released on the drop target.
66+
-- * @deprecated in ARIA 1.1
67+
-- */
68+
-- 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined;
69+
-- /**
70+
-- * Identifies the element that provides an error message for the object.
71+
-- * @see aria-invalid @see aria-describedby.
72+
-- */
73+
-- 'aria-errormessage'?: string | undefined;
74+
-- /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
75+
-- 'aria-expanded'?: Booleanish | undefined;
76+
-- /**
77+
-- * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
78+
-- * allows assistive technology to override the general default of reading in document source order.
79+
-- */
80+
-- 'aria-flowto'?: string | undefined;
81+
-- /**
82+
-- * Indicates an element's "grabbed" state in a drag-and-drop operation.
83+
-- * @deprecated in ARIA 1.1
84+
-- */
85+
-- 'aria-grabbed'?: Booleanish | undefined;
86+
-- /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
87+
-- 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
88+
-- /**
89+
-- * Indicates whether the element is exposed to an accessibility API.
90+
-- * @see aria-disabled.
91+
-- */
92+
-- 'aria-hidden'?: Booleanish | undefined;
93+
-- /**
94+
-- * Indicates the entered value does not conform to the format expected by the application.
95+
-- * @see aria-errormessage.
96+
-- */
97+
-- 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined;
98+
-- /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
99+
-- 'aria-keyshortcuts'?: string | undefined;
100+
-- /**
101+
-- * Defines a string value that labels the current element.
102+
-- * @see aria-labelledby.
103+
-- */
104+
"aria-label" :: Opt String -- 'aria-label'?: string | undefined;
105+
-- /**
106+
-- * Identifies the element (or elements) that labels the current element.
107+
-- * @see aria-describedby.
108+
-- */
109+
, "aria-labeledby" :: Opt String -- 'aria-labelledby'?: string | undefined;
110+
-- /** Defines the hierarchical level of an element within a structure. */
111+
-- 'aria-level'?: number | undefined;
112+
-- /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
113+
-- 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
114+
-- /** Indicates whether an element is modal when displayed. */
115+
-- 'aria-modal'?: Booleanish | undefined;
116+
-- /** Indicates whether a text box accepts multiple lines of input or only a single line. */
117+
-- 'aria-multiline'?: Booleanish | undefined;
118+
-- /** Indicates that the user may select more than one item from the current selectable descendants. */
119+
-- 'aria-multiselectable'?: Booleanish | undefined;
120+
-- /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
121+
-- 'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
122+
-- /**
123+
-- * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
124+
-- * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
125+
-- * @see aria-controls.
126+
-- */
127+
-- 'aria-owns'?: string | undefined;
128+
-- /**
129+
-- * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
130+
-- * A hint could be a sample value or a brief description of the expected format.
131+
-- */
132+
-- 'aria-placeholder'?: string | undefined;
133+
-- /**
134+
-- * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
135+
-- * @see aria-setsize.
136+
-- */
137+
-- 'aria-posinset'?: number | undefined;
138+
-- /**
139+
-- * Indicates the current "pressed" state of toggle buttons.
140+
-- * @see aria-checked @see aria-selected.
141+
-- */
142+
-- 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
143+
-- /**
144+
-- * Indicates that the element is not editable, but is otherwise operable.
145+
-- * @see aria-disabled.
146+
-- */
147+
-- 'aria-readonly'?: Booleanish | undefined;
148+
-- /**
149+
-- * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
150+
-- * @see aria-atomic.
151+
-- */
152+
-- 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined;
153+
-- /** Indicates that user input is required on the element before a form may be submitted. */
154+
-- 'aria-required'?: Booleanish | undefined;
155+
-- /** Defines a human-readable, author-localized description for the role of an element. */
156+
-- 'aria-roledescription'?: string | undefined;
157+
-- /**
158+
-- * Defines the total number of rows in a table, grid, or treegrid.
159+
-- * @see aria-rowindex.
160+
-- */
161+
-- 'aria-rowcount'?: number | undefined;
162+
-- /**
163+
-- * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
164+
-- * @see aria-rowcount @see aria-rowspan.
165+
-- */
166+
-- 'aria-rowindex'?: number | undefined;
167+
-- /**
168+
-- * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
169+
-- * @see aria-rowindex @see aria-colspan.
170+
-- */
171+
-- 'aria-rowspan'?: number | undefined;
172+
-- /**
173+
-- * Indicates the current "selected" state of various widgets.
174+
-- * @see aria-checked @see aria-pressed.
175+
-- */
176+
-- 'aria-selected'?: Booleanish | undefined;
177+
-- /**
178+
-- * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
179+
-- * @see aria-posinset.
180+
-- */
181+
-- 'aria-setsize'?: number | undefined;
182+
-- /** Indicates if items in a table or grid are sorted in ascending or descending order. */
183+
-- 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
184+
-- /** Defines the maximum allowed value for a range widget. */
185+
-- 'aria-valuemax'?: number | undefined;
186+
-- /** Defines the minimum allowed value for a range widget. */
187+
-- 'aria-valuemin'?: number | undefined;
188+
-- /**
189+
-- * Defines the current value for a range widget.
190+
-- * @see aria-valuetext.
191+
-- */
192+
-- 'aria-valuenow'?: number | undefined;
193+
-- /** Defines the human readable text alternative of aria-valuenow for a range widget. */
194+
-- 'aria-valuetext'?: string | undefined;
195+
-- }
196+
)
197+
-- // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
198+
-- type AriaRole =
199+
-- | 'alert'
200+
-- | 'alertdialog'
201+
-- | 'application'
202+
-- | 'article'
203+
-- | 'banner'
204+
-- | 'button'
205+
-- | 'cell'
206+
-- | 'checkbox'
207+
-- | 'columnheader'
208+
-- | 'combobox'
209+
-- | 'complementary'
210+
-- | 'contentinfo'
211+
-- | 'definition'
212+
-- | 'dialog'
213+
-- | 'directory'
214+
-- | 'document'
215+
-- | 'feed'
216+
-- | 'figure'
217+
-- | 'form'
218+
-- | 'grid'
219+
-- | 'gridcell'
220+
-- | 'group'
221+
-- | 'heading'
222+
-- | 'img'
223+
-- | 'link'
224+
-- | 'list'
225+
-- | 'listbox'
226+
-- | 'listitem'
227+
-- | 'log'
228+
-- | 'main'
229+
-- | 'marquee'
230+
-- | 'math'
231+
-- | 'menu'
232+
-- | 'menubar'
233+
-- | 'menuitem'
234+
-- | 'menuitemcheckbox'
235+
-- | 'menuitemradio'
236+
-- | 'navigation'
237+
-- | 'none'
238+
-- | 'note'
239+
-- | 'option'
240+
-- | 'presentation'
241+
-- | 'progressbar'
242+
-- | 'radio'
243+
-- | 'radiogroup'
244+
-- | 'region'
245+
-- | 'row'
246+
-- | 'rowgroup'
247+
-- | 'rowheader'
248+
-- | 'scrollbar'
249+
-- | 'search'
250+
-- | 'searchbox'
251+
-- | 'separator'
252+
-- | 'slider'
253+
-- | 'spinbutton'
254+
-- | 'status'
255+
-- | 'switch'
256+
-- | 'tab'
257+
-- | 'table'
258+
-- | 'tablist'
259+
-- | 'tabpanel'
260+
-- | 'term'
261+
-- | 'textbox'
262+
-- | 'timer'
263+
-- | 'toolbar'
264+
-- | 'tooltip'
265+
-- | 'tree'
266+
-- | 'treegrid'
267+
-- | 'treeitem'
268+
-- | (string & {});
269+
270+
271+
9272

10273
-- Based on types definitions:
11274
-- node_modules/@types/react/index.d.ts
@@ -14,7 +277,6 @@ import Unsafe.Coerce (unsafeCoerce)
14277
-- and they are not used by the react-basic.
15278
-- FIXME: actually port or codegen all of them.
16279

17-
-- interface DOMAttributes<T> {
18280
type DOMAttributes otherProps =
19281
( children :: Array JSX
20282
-- , dangerouslySetInnerHTML?: {
@@ -482,7 +744,7 @@ type HTMLAttributes otherProps =
482744
-- radioGroup?: string | undefined; // <command>, <menuitem>
483745
-- resource?: string | undefined;
484746
-- results?: number | undefined;
485-
-- role?: AriaRole | undefined;
747+
-- , role :: Opt String -- AriaRole | undefined;
486748
-- security?: string | undefined;
487749
-- slot?: string | undefined;
488750
-- spellCheck?: Booleanish | undefined;
@@ -533,7 +795,7 @@ type HTMLAttributes' otherProps =
533795
-- radioGroup?: string | undefined; // <command>, <menuitem>
534796
-- resource?: string | undefined;
535797
-- results?: number | undefined;
536-
-- role?: AriaRole | undefined;
798+
, role :: Opt String
537799
-- security?: string | undefined;
538800
-- slot?: string | undefined;
539801
-- spellCheck?: Booleanish | undefined;
@@ -547,7 +809,7 @@ type HTMLAttributes' otherProps =
547809
-- unselectable?: 'on' | 'off' | undefined;
548810
-- vocab?: string | undefined;
549811
--
550-
| DOMAttributes' + otherProps
812+
| AriaAttributes' + DOMAttributes' + otherProps
551813
)
552814

553815
-- interface InputHTMLAttributes<T> extends HTMLAttributes<T> {

0 commit comments

Comments
 (0)