Add button of repeatable components is missing a focus outline and focus handling

[gu-stav]

Bug report

Required System information

• Node.js version: not applicable
• NPM version: not applicable
• Strapi version: 4.5.3
• Database: not applicable
• Operating system: MacOS

Describe the bug

The "Add item" button of repeatable components has two a11y issues:

• focus outline is missing
• after item creation, the focus is not set on the item being created

Kapture.2022-12-07.at.12.15.08.mp4

Steps to reproduce the behavior

1. Create a content-type with a repeatable component
2. Tab to "Create item"
3. Hit enter

Expected behavior

I expect a focus indicator to be visible. I expect the focus to be handled properly (on the created item?).

[BhuvaneshPatil]

Hello @gu-stav ,
I have investigated this issue. The problems I have found are the following and how they can be tackled.

• The Add an Entry buttons is being focussed, but the styling ( outlines/borders ) is not visible. The reason behind this behavior is, the child is completely fitting the parent ( which is flex ).

Here is the screenshot of the code -

The good fix for this is to apply some padding to the parent.

For focussing on the input when we add input is I am exploring right now.

[gu-stav]

Fixed by the attached PR.