[FIX] web: Make accessible with keyboard the delete button on o2m fields (#23719)

* [FIX] web: Make accessible with keyboard the delete button on o2m fields

Currently, the delete button in one2many fields (trash icon) is not
reachable when using the keyboard, because it's neither a link, nor a
button or any other interactable HTML element, but a `<span>`.

This change causes that button to be an actual HTML button keeping the
same appearance, so it may be reached when using the keyboard.

* [FIX] web: Modify test to expect button instead of span as o2m trash icon

Since buttons to delete records in o2m fields (the trash icon) were
changed from `<span>` to `<button>` to be able to access them with the
keyboard, the test need to be modified so it expect the new element
type and doesn't break.

addons/web/static/src/js/views/list/list_editable_renderer.js

@@ -498,7 +498,8 @@ ListRenderer.include({
     _renderRow: function (record, index) {
         var $row = this._super.apply(this, arguments);
         if (this.addTrashIcon) {
-            var $icon = $('<span>', {class: 'fa fa-trash-o', name: 'delete'});
+            var $icon = $('<button>', {class: 'fa fa-trash-o o_list_record_delete_btn', name: 'delete',
+                'aria-label': _t('Delete row ') + (index+1)});
             var $td = $('<td>', {class: 'o_list_record_delete'}).append($icon);
             $row.append($td);
         }

addons/web/static/src/less/list_view.less

@@ -70,6 +70,14 @@
         width: 1px;  // to prevent the column to expand
     }
 
+    .o_list_record_delete_btn {
+        padding: 0px;
+        background-style: none;
+        border-style: none;
+        height: 0px;
+        display: table-cell;
+    }
+
     // Decoration of the row
     .text-bf {
         font-weight: bold;

addons/web/static/tests/fields/relational_fields_tests.js

@@ -3890,12 +3890,12 @@ QUnit.module('relational_fields', {
         });
         form.$buttons.find('.o_form_button_edit').click();
 
-        assert.strictEqual(form.$('td.o_list_record_delete span').length, 2,
+        assert.strictEqual(form.$('td.o_list_record_delete button').length, 2,
             "should have 2 delete buttons");
 
-        form.$('td.o_list_record_delete span').first().click();
+        form.$('td.o_list_record_delete button').first().click();
 
-        assert.strictEqual(form.$('td.o_list_record_delete span').length, 1,
+        assert.strictEqual(form.$('td.o_list_record_delete button').length, 1,
             "should have 1 delete button (a record is supposed to have been unlinked)");
 
         // save and check that the correct command has been generated
@@ -3933,12 +3933,12 @@ QUnit.module('relational_fields', {
         });
         form.$buttons.find('.o_form_button_edit').click();
 
-        assert.strictEqual(form.$('td.o_list_record_delete span').length, 2,
+        assert.strictEqual(form.$('td.o_list_record_delete button').length, 2,
             "should have 2 delete buttons");
 
-        form.$('td.o_list_record_delete span').first().click();
+        form.$('td.o_list_record_delete button').first().click();
 
-        assert.strictEqual(form.$('td.o_list_record_delete span').length, 1,
+        assert.strictEqual(form.$('td.o_list_record_delete button').length, 1,
             "should have 1 delete button (a record is supposed to have been deleted)");
 
         // save and check that the correct command has been generated
@@ -6682,8 +6682,8 @@ QUnit.module('relational_fields', {
         form.$('input.o_field_integer[name="int_field"]').val('0').trigger('input');
 
         // delete and start over
-        form.$('.o_list_record_delete:first span').click();
-        form.$('.o_list_record_delete:first span').click();
+        form.$('.o_list_record_delete:first button').click();
+        form.$('.o_list_record_delete:first button').click();
 
         // enable the many2many onchange
         form.$('input.o_field_integer[name="int_field"]').val('10').trigger('input');
@@ -8416,7 +8416,7 @@ QUnit.module('relational_fields', {
                 mode: 'edit',
             },
         });
-        form.$('span[name="delete"]').first().click();
+        form.$('button[name="delete"]').first().click();
         assert.strictEqual(form.$('.o_data_row').text(), 'from onchange',
             'onchange has been properly applied');
         form.destroy();
@@ -8456,7 +8456,7 @@ QUnit.module('relational_fields', {
                 mode: 'edit',
             },
         });
-        form.$('span[name="delete"]').first().click();
+        form.$('button[name="delete"]').first().click();
         assert.strictEqual(form.$('.o_data_row').text(), 'from onchange id2from onchange id3',
             'onchange has been properly applied');
         form.destroy();

odoo/addons/test_new_api/static/tests/x2many.js

@@ -408,7 +408,7 @@ odoo.define('web.test.x2many', function (require) {
         trigger: '.ui-autocomplete a:first',
     }, { // remove record
         content: "delete the last item in the editable list",
-        trigger: '.o_list_view .o_data_row td.o_list_record_delete span:visible:last',
+        trigger: '.o_list_view .o_data_row td.o_list_record_delete button:visible:last',
     }, {
         content: "test one2many onchange after delete",
         trigger: '.o_content:not(:has(textarea[name="message_concat"]:propValueContains(Administrator:d)))',