From c183585c80a506208eef4dfe09fbd780d2f0d4b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20Gonz=C3=A1lez?= <lgonzalez@vauxoo.com>
Date: Tue, 12 Dec 2023 00:54:27 +0000
Subject: [PATCH] [FIX] web: add missing ARIA attributes to command palette

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>
---
 .../static/src/core/commands/command_palette.xml   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 24c7510cd29..54b45964a95 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -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)"