Accessibility attributes are missing

[mattesmohr]

The attributes for accessibility (https://www.w3.org/TR/wai-aria-1.1/) aren't implemented yet.

[mattesmohr]

For documentation reasons:

Variant 1	Variant 2	Variant 3	Variant 4	Variant 5
.ariaActiveDescendant(String)		.aria(activedescendat: String)	.activeDescendant(String)
.ariaAtomic(Bool)		.aria(atomic: Bool)	.atomic(Bool)	.isAtomic(Bool)
.ariaAutoComplete(Token)		.aria(autocomplete: Token)	.autocomplete(Token)
.ariaBusy(Bool)		.aria(busy: Bool)	.busy(Bool)	.isBusy(Bool)
.ariaChecked(Token)		.aria(checked: Token)	.checked(Token)
.ariaColumnCount(Int)	.ariaColumn(count: Int)	.aria(columncount: Int)	.columnCount(Int)
.ariaColumnIndex(Int)	.ariaColumn(index: Int)	.aria(columnindex: Int)	.columnIndex(Int)
.ariaColumnSpan(Int)	.ariaColumn(span: Int)	.aria(columnspan: Int)	.columnSpan(Int)
.ariaControls(String)		.aria(controls: String)	.controls(String)
.ariaCurrent(Token)		.aria(current: Token)	.current(Token)
.ariaDetails(String)		.aria(details: String)	.details(String)
.ariaDescribedBy(String)	.ariaDescribed(by: String)	.aria(described: String)	.describedBy(String)
.ariaDisabled(Bool)		.aria(disabled: Bool)	.disabled(Bool)	.isDisabled(Bool)
.ariaErrorMessage(String)		.aria(error: String)	.errorMessage(String)
.ariaExpanded(Bool)		.aria(expanded: Bool)	.expanded(Bool)	.isExpanded(Bool)
.ariaFlowTo(String)		.aria(flowto: String)	.flowTo(String)
.ariaHasPopup(Bool)		.aria(popup: Bool)	.hasPopup(Bool)
.ariaHidden(Bool)		.aria(hidden: Bool)	.hidden(Bool)	.isHidden(Bool)
.ariaInvalid(Bool)		.aria(invalid: Bool)	.invalid(Bool)	.isInvalid(Bool)
.ariaKeyShortCuts(String)		.aria(keyshortcuts: String)	.keyShortcuts(String)
.ariaLabel(String)		.aria(label: String)	.label(String)
.ariaLabeledBy(String)	.ariaLabeled(by: String)	.aria(labeled: String)	.labeledBy(String)	.labeled(by: String)
.ariaLevel(Int)		.aria(level: Int)	.level(Int)
.ariaModal(Bool)		.aria(modal: Bool)	.modal(Bool)	.isModal(Bool)
.ariaMultiline(Bool)		.aria(multiline: Bool)	.multiline(Bool)	.isMultiline(Bool)
.ariaMultiSelectable(Bool)		.aria(multiselect: Bool)	.multiselectable(Bool)	.isMultiSelectable(Bool)
.ariaOrientation(Token)		.aria(orientation: Token)	.orientation(Token)
.ariaOwns(String)		.aria(owns: String)	.owns(String)
.ariaPlaceholder(String)		.aria(placeholder: String)	.placeholder(String)
.ariaPositionInset(Int)		.aria(positioninset: Int)	.positionInset(Int)
.ariaPressed(Token)		.aria(pressed: Token)	.pressed(Token)
.ariaReadyOnly(Bool)		.aria(readonly: Bool)	.readonly(Bool)	.isReadyonly(Bool)
.ariaRelevant(Token)		.aria(relevant: Token)	.relevant(Token)
.ariaRequired(Bool)		.aria(required: Bool)	.required(Bool)	.isRequired(Bool)
.ariaRoleDescription(String)		.aria(roledescription: String)	.roleDescription(String)
.ariaRowCount(Int)	.ariaRow(count: Int)	.aria(rowcount: Int)	.rowCount(Int)
.ariaRowIndex(Int)	.ariaRow(index: Int)	.aria(rowindex: Int)	.rowIndex(Int)
.ariaRowSpan(Int)	.ariaRow(span: Int)	.aria(rowspan: Int)	.rowSpan(Int)
.ariaSelected(Token)		.aria(selected: Token)	.rowSelected(Token)
.ariaSetSize(Int)		.aria(setsize: Int)	.setSize(Int)
.ariaSort(Token)		.aria(sort: Token)	.sort(Token)
.ariaValueMaximum(Float)	.ariaValue(maximum: Float)	.aria(valuemaximum: Float)	.maximumValue(Float)
.ariaValueMinimum(Float)	.ariaValue(minimum: Float)	.aria(valueminimum: Float)	.minimumValue(Float)
.ariaValueNow(Float)	.ariaValue(now: Float)	.aria(valuenow: Float)	.valueNow(Float)
.ariaValueText(String)	.ariaValue(text: String)	.aria(valuetext: String)	.valueText(String)

[mattesmohr]

Hey @MatsMoll, I think I need another opinion on this. I would like to add accessibility attributes to HTMLKit.

So I went through the documentation and I was hoping I could implement them the same way, as I did with the event attributes lately.

Tag {
}
.on(event: .drag, "")

But the aria attributes have not the same value type, wich on the event attributes is always String. So I have to implement them differently.

We usually do something like

Tag {
}
.camelCase()

right? So I listed all the variants, I could think of, in the previous post. I would like to hear you opinion, wich of the variant you like the most.

Variant 1 and Variant 2 is like we would normally do. Variant 3 is more like the implementation of the event attributes. Seeing .on and .aria as one single attribute. Variant 4 and 5 is like the first and the second but without the hint about the aria-attribute.

I know its more like a question about "style", so don't rip my head off. :-D

Tag {
}
.id("tag)
.class("test test-style")
.ariaLabeled("Test")
.ariaModal(true)

Tag {
}
.id("tag)
.class("test test-style")
.aria(labeled: "Test")
.aria(modal: true)

[MatsMoll]

Hmm.. 🤔

Personally do I like the .aria(model: true) syntax, as I find it clearer to separate the "generic" aria from the more "important" model or what ever it is.

So I would maybe like the variant 3 with camel case in the attribute name ass well. E.g: .aria(columnCount: Int). Or would that be a bit odd?

[mattesmohr]

Hmm.. 🤔

Personally do I like the .aria(model: true) syntax, as I find it clearer to separate the "generic" aria from the more "important" model or what ever it is.

So I would maybe like the variant 3 with camel case in the attribute name ass well. E.g: .aria(columnCount: Int). Or would that be a bit odd?

I will try it out and let you know. Thank you 👍

[mattesmohr]

For documentation reasons:

Element	Implicit Role	Additional Roles	Attributes
Abbreviation (abbr)	-	any	global, aria-*
Address	-	any	global, aria-*
Anchor (a)	link	button, checkbox, menuitem*	global, aria-*
Area	link	-	global, aria-*
Article	article	application, document, feed, main, none, presentation, region	global, aria-*
Aside	complementary	feed, none, note, presentation, region, search	global, aria-*
Audio	-	application	global, aria-* (application)
Base	-	-	-
Bdi	-	any	global, aria-*
Bdo	-	any	global, aria-*
Blockquote	-	any	global, aria-*
Body	-	-	global, aria-* (document)
Bold (b)	-	any	global, aria-*
Button	button	checkbox, link, menuitem*, option, radio, switch, tab	global, aria-*
Canvas	-	any	global, aria-*
Caption	-	-	global
Cite	-	any	global, aria-*
Code	-	any	global, aria-*
Column (col)	-	-	-
ColumnGroup (colgroup)	-	-	-
Data	-	any	global, aria-*
DataCell (td)	cell, gridcell	any	global, aria-*
DataList	listbox	-	global, aria-* (listbox)
Definition (dfn)	term	any	global, aria-*
DeletedText (del)	-	any	global, aria-*
DescriptionList (dl)	-	group, list, presentation, none	global, aria-*
Details	group	-	global, aria-* (group)
Dialog	dialog	alertdialog	global, aria-* (dialog)
Division (div)	-	any	global, aria-*
Embed	-	application, document, img, presentation, none	global, aria-*
Emphasize (em)	-	any	global, aria-*
Fieldset	group	none, presentation, radiogroup	global, aria-*
Figure	figure	any	global, aria-*
FigureCaption	-	group, presentation, none	global, aria-*
Footer	contentinfo	group, none, presentation	global, aria-*
Form	form	search, none, presentation	global, aria-*
Head	-	-	-
Header	banner	group, none, presentation	global, aria-*
HeaderCell (th)	columnheader, rowheader, cell, gridcell	any	global, aria-*
Heading1 (h1)	heading	none, presentation, tab	global, aria-*
Heading2 (h2)	heading	none, presentation, tab	global, aria-*
Heading3 (h3)	heading	none, presentation, tab	global, aria-*
Heading4 (h4)	heading	none, presentation, tab	global, aria-*
Heading5 (h5)	heading	none, presentation, tab	global, aria-*
Heading6 (h6)	heading	none, presentation, tab	global, aria-*
HeadingGroup (hgroup)	-	any	global, aria-*
HorizontalRule (hr)	separator	none, presentation	global, aria-* (separator)
Html	document	-	-
Image (img)	img, presentation	button, checkbox, link, menuitem*, option, progressbar	global, aria-*
InlineFrame (iframe)	-	application, document, img, none, presentation	global, aria-*
Input
InsertedText (ins)	-	any	global, aria-*
Italic (i)	-	any	global, aria-*
KeyboardInput (kbd)	-	any	global, aria-*
Label	-	-	global
Legend	-	-	global
LineBreak (br)	-	presentation, none	global, aria-*
Link	-	-	-
ListItem (li)	listitem	menuitem*, option, none, presentation, radio, separato, tab, treeitem	global, aria-*
Main	main	-	global, aria-* (main)
Map	-	-	-
Mark	-	any	global, aria-*
Meta	-	-	-
Meter	-	-	global
Navigation (nav)	navigation	menu, menubar, tablist	global, aria-*
NoScript	-	-	-
Object	-	application, document, img	global, aria-*
OrderedList (ol)	list	directory, group, listbox, menu, menubar, none, presentation	global, aria-*
Option	option	-	global, aria-* (option)
OptionGroup (optgroup)	group	-	global, aria-* (group)
Output	status	any	global, aria-*
Paragraph (p)	-	any	global, aria-*
Parameter (param)	-	-	-
Picture	-	-	-
PreformattedText (pre)	-	any	global, aria-*
Progress	progressbar	-	global, aria-* (progressbar)
Ruby	-	any	global, aria-*
RubyText (rt)	-	any	global, aria-*
RubyPronunciation (rp)	-	any	global, aria-*
SampleOutput	-	any	global, aria-*
Script	-	-	-
Section	region	alert*, application, banner, complementary, contentinfo, dialog	global, aria-* (combobox, listbox)
Select	combobox, listbox	menu
ShortQuote (q)	-	any	global, aria-*
Small	-	any	global, aria-*
Strong (s)	-	any	global, aria-*
Span	-	any	global, aria-*
Subscript	-	any	global, aria-*
Summary	button	-	global, aria-* (button)
Superscript	-	any	global, aria-*
Style	-	-	-
Source	-	-	-
Table	table	any	global, aria-*
TableBody (tbody)	rowgroup	any	global, aria-*
TableHead (thead)	rowgroup	any	global, aria-*
TableFoot (tfoot)	rowgroup	any	global, aria-*
TableRow (tr)	row	any	global, aria-*
Template	-	-	-
TermName (dt)	term	listitem	global, aria-*
TermDefinition (dd)	definition	-	global, aria-* (definition)
TextArea	textbox	-	global, aria-* (textbox)
Time	-	any	global, aria-*
Title	-	-	-
Track	-	-	-
Underline (u)	-	any	global, aria-*
UnorderedList (ul)	list	directory, group, listbox, menu, menubar, none, presentation	global, aria-*
Variable (var)	-	any	global, aria-*
Video	-	application	global, aria-* (application)
WordBreak (wbr)	-	any	global, aria-*