[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, 24 insertions, 0 deletions

diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index 432961bc0bf..c6db91778ec 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -3068,6 +3068,27 @@ var FieldRadio = FieldSelection.extend({
         return true;
     },
 
+    /**
+     * Returns the currently-checked radio button, or the first one if no radio
+     * button is checked.
+     *
+     * @override
+     */
+    getFocusableElement: function () {
+        var checked = this.$("[checked='true']");
+        return checked.length ? checked : this.$("[data-index='0']");
+    },
+
+    /**
+     * Associates the 'for' attribute to the radiogroup, instead of the selected
+     * radio button.
+     *
+     * @param {string} id
+     */
+    setIDForLabel: function (id) {
+        this.$el.attr('id', id);
+    },
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -3085,11 +3106,14 @@ var FieldRadio = FieldSelection.extend({
             currentValue = this.value;
         }
         this.$el.empty();
+        this.$el.attr('role', 'radiogroup')
+            .attr('aria-label', this.string);
         _.each(this.values, function (value, index) {
             self.$el.append(qweb.render('FieldRadio.button', {
                 checked: value[0] === currentValue,
                 id: self.unique_id + '_' + value[0],
                 index: index,
+                name: self.unique_id,
                 value: value,
             }));
         });