To make fields like "Add a product", "Add a section", and "Add a note" more visible when navigating with the Tab key in Odoo, you can add a box or border around these fields using SCSS.

Add this code to your list_renderer.scss file:

That will make the stand out clearly when selected via keyboard navigation.

Hi,

Please use the Following approach.

/* Make Add buttons visible during keyboard navigation */

/* For "Add a product", "Add a section", "Add a note" buttons in order lines */

.o_field_x2many_list_row_add a:focus,

.o_field_x2many_list_row_add a:focus-visible {

    outline: 2px solid #007bff !important;

    outline-offset: 2px;

    background-color: rgba(0, 123, 255, 0.1) !important;

    border-radius: 4px;

    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);

}

/* Alternative: Box style similar to input fields */

.o_field_x2many_list_row_add a:focus,

.o_field_x2many_list_row_add a:focus-visible {

    border: 2px solid #007bff !important;

    padding: 4px 8px;

    background-color: #f0f8ff !important;

    border-radius: 4px;

}

/* Ensure the focus state is visible for all clickable elements in the row */

.o_group_field_row_add a:focus,

.o_group_field_row_add a:focus-visible {

    border: 2px solid #007bff !important;

    padding: 4px 8px;

    background-color: #f0f8ff !important;

    border-radius: 4px;

    outline: none;

}

/* Additional: Make bold text more visible when focused */

.o_field_x2many_list_row_add a:focus strong,

.o_group_field_row_add a:focus strong {

    color: #0056b3;

}

Put the above css in your custom moule in in the mentioned path

'assets': {

        'web.assets_backend': [

            'your_custom_module/static/src/scss/keyboard_navigation.scss',

        ],

  }

Hope it helps.