diff --git a/core/modules/editor/engines/simple.js b/core/modules/editor/engines/simple.js index 626002127..eca68360c 100644 --- a/core/modules/editor/engines/simple.js +++ b/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"}, diff --git a/core/modules/editor/factory.js b/core/modules/editor/factory.js index 2fd323c0b..8db2f714b 100644 --- a/core/modules/editor/factory.js +++ b/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 diff --git a/core/ui/EditTemplate/type.tid b/core/ui/EditTemplate/type.tid index eae2ebfee..3946d23f5 100644 --- a/core/ui/EditTemplate/type.tid +++ b/core/ui/EditTemplate/type.tid @@ -10,22 +10,24 @@ first-search-filter: [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]sort[d <>
<$fieldmangler> -<$transclude $variable="keyboard-driven-input" tiddler=<> storeTitle=<> refreshTitle=<> selectionStateTitle=<> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<> 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=<>/><$button popup=<> 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 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="[] [] [] []"/> +<$transclude $variable="keyboard-driven-input-aria" tiddler=<> storeTitle=<> refreshTitle=<> selectionStateTitle=<> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<> 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=<> ariaAutocomplete="list" ariaControls=<>/><$button popup=<> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-controls=<> aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}<$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="[] [] [] []"/>
<$set name="tv-show-missing-links" value="yes"> <$reveal state=<> type="nomatch" text="" default=""> -
+
>> <$linkcatcher to="!!type"> <$list filter='[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]each[group]sort[group-sort]]'> -
+ +
<$set name="userInput" value={{{ [get[text]] }}}> -<$list filter="[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] :and[sort[description]] :and[removeprefix[$:/language/Docs/Types/]] :and[search]">addsuffix[-primaryList]] :except[get[text]] :and[then[]else[tc-list-item-selected]] }}}><$link to={{{ [addprefix[$:/language/Docs/Types/]get[name]] }}}><$view tiddler={{{ [addprefix[$:/language/Docs/Types/]] }}} field="description"/><$text text=" "/>(<$view tiddler={{{ [addprefix[$:/language/Docs/Types/]] }}} field="name"/>) +<$list filter="[all[shadows+tiddlers]prefix[$:/language/Docs/Types/]group{!!group}] :and[sort[description]] :and[removeprefix[$:/language/Docs/Types/]] :and[search]">addsuffix[-primaryList]] :except[get[text]] :and[then[]else[tc-list-item-selected]] }}}><$link role="option" to={{{ [addprefix[$:/language/Docs/Types/]get[name]] }}}><$view tiddler={{{ [addprefix[$:/language/Docs/Types/]] }}} field="description"/><$text text=" "/>(<$view tiddler={{{ [addprefix[$:/language/Docs/Types/]] }}} field="name"/>) +
diff --git a/core/wiki/macros/keyboard-driven-input.tid b/core/wiki/macros/keyboard-driven-input.tid index a514f4c13..9893a60c3 100644 --- a/core/wiki/macros/keyboard-driven-input.tid +++ b/core/wiki/macros/keyboard-driven-input.tid @@ -145,3 +145,32 @@ tags: $:/tags/Macro /> \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 [match[((input-accept))]] %> +<> +<%elseif [match[((input-accept-variant))]] %> +<> +<%elseif [match[((input-up))]] %> +<> +<%elseif [match[((input-down))]] %> +<> +<%elseif [match[((input-cancel))]] %> +<> +<%endif%> +\end keyboard-driven-input-actions + +<$keyboard key="((input-accept)) ((input-accept-variant)) ((input-up)) ((input-down)) ((input-cancel))" actions=<>> + <$edit-text + tiddler=<> field=<> index=<> + inputActions=<> tag=<> class=<> + placeholder=<> default=<> focusPopup=<> + focus=<> type=<> rows=<> minHeight=<> + tabindex=<> size=<> autoHeight=<> + refreshTitle=<> cancelPopups=<> + role=<> aria-autocomplete=<> aria-controls=<> + /> + +\end keyboard-driven-input-aria \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/leilei332-combobox-a11y.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/leilei332-combobox-a11y.tid new file mode 100644 index 000000000..5be44b44e --- /dev/null +++ b/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 +