Merge db666b3f11 into ae4e99951a

core/modules/editor/engines/simple.js

@@ -55,6 +55,13 @@ function SimpleEngine(options) {
 	if(this.widget.isDisabled === "yes") {
 		this.domNode.setAttribute("disabled",true);
 	}
+	if(this.widget.role) {
+		this.domNode.setAttribute("role",this.widget.role);
+	}
+	this.widget.assignAttributes(this.domNode,{
+		sourcePrefix: "aria-",
+		destPrefix: "aria-"
+	});
 	// Add an input event handler
 	$tw.utils.addEventListeners(this.domNode,[
 		{name: "focus", handlerObject: this, handlerMethod: "handleFocusEvent"},

core/modules/editor/factory.js

@@ -184,6 +184,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 		this.editInputActions = this.getAttribute("inputActions");
 		this.editRefreshTitle = this.getAttribute("refreshTitle");
 		this.editAutoComplete = this.getAttribute("autocomplete");
+		this.role = this.getAttribute("role");
 		this.isDisabled = this.getAttribute("disabled","no");
 		this.isFileDropEnabled = this.getAttribute("fileDrop","no") === "yes";
 		// Get the default editor element tag and type

core/ui/EditTemplate/type.tid

@@ -10,22 +10,24 @@ first-search-filter: [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]sort[d
 <em class="tc-edit tc-small-gap-right"><<lingo Type/Prompt>></em>
 <div class="tc-type-selector-dropdown-wrapper">
 <div class="tc-type-selector"><$fieldmangler>
-<$transclude $variable="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle tc-keep-focus" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] :else[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
+<$transclude $variable="keyboard-driven-input-aria" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle tc-keep-focus" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] :else[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>> ariaAutocomplete="list" ariaControls=<<qualify "ti_type-dropdown">>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-controls=<<qualify "ti_type-dropdown">> aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
 </$fieldmangler></div>
 
 <div class="tc-block-dropdown-wrapper">
 <$set name="tv-show-missing-links" value="yes">
 <$reveal state=<<qualify "$:/state/popup/type-dropdown">> type="nomatch" text="" default="">
-<div class="tc-block-dropdown tc-edit-type-dropdown">
+<div class="tc-block-dropdown tc-edit-type-dropdown" role="listbox" id=<<qualify "ti_type-dropdown">>>
 <$linkcatcher to="!!type">
 <$list filter='[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]each[group]sort[group-sort]]'>
-<div class="tc-dropdown-item">
+<div class="tc-dropdown-item" role="presentation">
 <$text text={{!!group}}/>
 </div>
+<div role="group" aria-label={{!!group}}>
 <$set name="userInput" value={{{ [<typeInputTiddler>get[text]] }}}>
-<$list filter="[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] :and[sort[description]] :and[removeprefix[$:/language/Docs/Types/]] :and[search<userInput>]"><span class={{{ [<currentTiddler>addsuffix[-primaryList]] :except[<typeSelectionTiddler>get[text]] :and[then[]else[tc-list-item-selected]] }}}><$link to={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]get[name]] }}}><$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="description"/><$text text=" "/>(<$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="name"/>)</$link></span>
+<$list filter="[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] :and[sort[description]] :and[removeprefix[$:/language/Docs/Types/]] :and[search<userInput>]"><span class={{{ [<currentTiddler>addsuffix[-primaryList]] :except[<typeSelectionTiddler>get[text]] :and[then[]else[tc-list-item-selected]] }}}><$link role="option" to={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]get[name]] }}}><$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="description"/><$text text=" "/>(<$view tiddler={{{ [<currentTiddler>addprefix[$:/language/Docs/Types/]] }}} field="name"/>)</$link></span>
 </$list>
 </$set>
+</div>
 </$list>
 </$linkcatcher>
 </div>

core/wiki/macros/keyboard-driven-input.tid

@@ -145,3 +145,32 @@ tags: $:/tags/Macro
 	/>
 </$keyboard>
 \end keyboard-driven-input
+
+\procedure keyboard-driven-input-aria(tiddler,storeTitle,field:"text",index:"",tag:"input",type,focus:"",inputAcceptActions,inputAcceptVariantActions,inputCancelActions,placeholder:"",default:"",class,focusPopup,rows,minHeight,tabindex,size,autoHeight,filterMinLength:"0",refreshTitle,selectionStateTitle,cancelPopups:"",configTiddlerFilter,firstSearchFilterField:"first-search-filter",secondSearchFilterField:"second-search-filter",role:"combobox",ariaAutocomplete,ariaControls)
+\whitespace trim
+\procedure keyboard-driven-input-actions()
+<%if [<event-key-descriptor>match[((input-accept))]] %>
+<<inputAcceptActions>>
+<%elseif [<event-key-descriptor>match[((input-accept-variant))]] %>
+<<inputAcceptVariantActions>>
+<%elseif [<event-key-descriptor>match[((input-up))]] %>
+<<input-next-actions-before>>
+<%elseif [<event-key-descriptor>match[((input-down))]] %>
+<<input-next-actions-after>>
+<%elseif [<event-key-descriptor>match[((input-cancel))]] %>
+<<inputCancelActions>>
+<%endif%>
+\end keyboard-driven-input-actions
+
+<$keyboard key="((input-accept)) ((input-accept-variant)) ((input-up)) ((input-down)) ((input-cancel))" actions=<<keyboard-driven-input-actions>>>
+	<$edit-text
+		tiddler=<<tiddler>> field=<<field>> index=<<index>>
+		inputActions=<<keyboard-input-actions>> tag=<<tag>> class=<<class>>
+		placeholder=<<placeholder>> default=<<default>> focusPopup=<<focusPopup>>
+		focus=<<focus>> type=<<type>> rows=<<rows>> minHeight=<<minHeight>>
+		tabindex=<<tabindex>> size=<<size>> autoHeight=<<autoHeight>>
+		refreshTitle=<<refreshTitle>> cancelPopups=<<cancelPopups>>
+		role=<<role>> aria-autocomplete=<<ariaAutocomplete>> aria-controls=<<ariaControls>>
+	/>
+</$keyboard>
+\end keyboard-driven-input-aria

editions/tw5.com/tiddlers/releasenotes/5.4.0/leilei332-combobox-a11y.tid

@@ -0,0 +1,9 @@
+title: $:/changenotes/5.4.0/#9468
+description: Improve combobox accessibility
+release: 5.4.0
+tags: $:/tags/ChangeNote
+change-type: enhancement
+change-category: usability
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9468
+github-contributors: Leilei332
+