pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: add missing ARIA attributes to command palette

Browse Source 
Since searches in the home screen are now handled by the command palette,
some ARIA attributes are required for assistive technologies to know
what is the currently-selected result. That because the actual focus is
always on the search box, while the actually-selected result is
highlighted by toggling classes, which makes not possible anymore to
know what is the selected result for e.g. screen reader users.

For more info, see original implementation on enterprise's home menu on
[1]. This commit is just re-applying such changes here.

[1] odoo/enterprise#14511

closes odoo/odoo#152147

X-original-commit: 9764e6f7fe39a10f3b04e1764110d8c274d0431a
Related: odoo/enterprise#55562
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Luis González
2024-02-01 08:24:13 +00:00
parent 1cc0a9faf2
commit c183585c80
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/commands/command_palette.xml
+11 -3
View File
@@ -6,20 +6,28 @@
<div t-ref="root">
<div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
<span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center me-1" t-out="state.namespace"/>
<input class="form-control border-0 p-0" type="text" data-allow-hotkeys="true" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
<input class="form-control border-0 p-0" type="text" data-allow-hotkeys="true" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"
role="combobox"
t-attf-aria-activedescendant="o_command_{{state.commands.length ? state.commands.indexOf(state.selectedCommand) : 'empty'}}"
aria-expanded="true"
aria-autocomplete="list"
aria-haspopup="listbox"
/>
<div class="input-group-text border-0 bg-transparent">
<i t-att-title="state.placeholder" role="img" t-att-aria-label="state.placeholder" class="oi oi-search"/>
</div>
</div>
<div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
<div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 fst-italic" t-out="state.emptyMessage"/>
<div t-ref="listbox" role="listbox" class="o_command_palette_listbox position-relative overflow-auto">
<div t-if="!state.commands.length" id="o_command_empty" role="option" aria-selected="true" class="o_command_palette_listbox_empty px-4 py-3 fst-italic" t-out="state.emptyMessage"/>
<t t-if="!isFuzzySearch" t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
<div class="o_command_category px-0">
<span t-if="category.name" class="text-truncate text-uppercase fw-bold fs-6 px-3" t-out="category.name"/>
<t t-foreach="category.commands" t-as="command" t-key="command.keyId">
<t t-set="commandIndex" t-value="state.commands.indexOf(command)"/>
<div t-attf-id="o_command_{{commandIndex}}" class="o_command"
role="option"
t-att-aria-selected="state.selectedCommand === command ? 'true' : 'false'"
t-att-class="{ focused: state.selectedCommand === command }"
t-on-click="(event) => this.onCommandClicked(event, commandIndex)"
t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)"