[FIX] web: Get correctly focusable elements on selection widgets

When navigating fields using the keyboard, it's not possible to reach
most of widgets for selection fields. That is because most of them
consist of one main element containing several other ones, one per
possible selectable value (e.g. buttons). When their focusable element
is computed, the main element is taken, instead of its sub-elements,
which causes the field to be skipped when navigating.

This commit fixes the above, as well as some missing aria attributes and
keyboard events, for the following widgets:
- `priority`
- `state_selection`
- `statusbar`
- `radio`

opw-231112
closes #58302

closes odoo/odoo#58418

X-original-commit: 2471e7c176c5df0f310f2939f8a6cf6948c0ac0c
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>

1 files changed, 7 insertions, 4 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index ada9472d7ed..6ca423f4552 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1257,7 +1257,7 @@
 <t t-name="FieldRadio.button">
     <div class="custom-control custom-radio o_radio_item" aria-atomic="true">
         <input type="radio" class="custom-control-input o_radio_input" t-att-checked="checked ? true : undefined"
-            t-att-data-value="value[0]" t-att-data-index="index" t-att-id="id"/>
+            t-att-name="name" t-att-data-value="value[0]" t-att-data-index="index" t-att-id="id"/>
         <label class="custom-control-label o_form_label" t-att-for="id"><t t-esc="value[1]"/></label>
     </div>
 </t>
@@ -1386,15 +1386,18 @@
 </t>
 <t t-name="FieldStatus.content.button">
     <t t-set="disabled" t-value="!clickable"/>
-    <button type="button" t-att-data-value="i.id" disabled="disabled" title="Current state" aria-pressed="true"
+    <button type="button" t-att-data-value="i.id" disabled="disabled" title="Current state" aria-checked="true"
+        t-att-role="is_dropdown ? 'menuitemradio': 'radio'"
         t-attf-class="btn o_arrow_button btn-primary disabled #{is_dropdown ? 'dropdown-item bg-primary text-white': ''}" t-if="i.selected" aria-current="step">
         <t t-esc="i.display_name" role="img" t-attf-aria-label="#{i.display_name} is current state"/>
     </button>
-    <button type="button" t-att-data-value="i.id" disabled="disabled" title="Not active state" aria-pressed="false"
+    <button type="button" t-att-data-value="i.id" disabled="disabled" title="Not active state" aria-checked="false"
+        t-att-role="is_dropdown ? 'menuitemradio': 'radio'"
         t-attf-class="btn o_arrow_button btn-secondary disabled #{is_dropdown ? 'dropdown-item': ''}" t-if="!i.selected and disabled">
         <t t-esc="i.display_name" role="img" t-attf-aria-label="#{i.display_name} is not current state"/>
     </button>
-    <button type="button" t-att-data-value="i.id" title="Not active state, click to change it" aria-pressed="false"
+    <button type="button" t-att-data-value="i.id" title="Not active state, click to change it" aria-checked="false"
+        t-att-role="is_dropdown ? 'menuitemradio': 'radio'"
         t-attf-class="btn o_arrow_button btn-secondary #{is_dropdown ? 'dropdown-item': ''}" t-if="!i.selected and !disabled">
         <t t-esc="i.display_name" role="img" t-attf-aria-label="Click to change current state to #{i.display_name}"/>
     </button>