Media grid: focus style and first added item dotted border are partially obscured

[afercia]

In the Media grid, the focus style of the focused media items is partially obscured by the items that follow it.

This occurs only when Infinite scrolling is disabled and only for the items added after clicking the 'Load more' button. It does not occur when Infinite scrolling is enabled.

This appears to be a regression in WordPress 7.0 and it is worth fixing for 7.1.

Similarly, the dotted border of the first added item is partially obscured. This can be reproduced also in WordPress 7.0 thus it appears to be a pre-existing issue.

Additionally:

• The dotted border doesn't meet the minimum contrast ratio of 3:1 against the light gray background used for the added items.
• The focus style in the Media grid is inconsistent with the one of the Media dialog (which is ticker). There is no reason for such a difference. I'd like to propose to make them consisten first. We can later discuss whether they need to be improved.

To reproduce:

• Go to WP Admin > Users > Profile.
• Check 'Disable infinite scrolling...' and save.
• Go to the Media library,
• Make sure to have more than 40 attachments.
• Click 'Load more'.
• Observe all the added items have a light gray background. That's expected and unrelated with this issue.
• Observe the first added item has a dotted border.
• Observe the border is cut-off on the right and bottom sides.
• Test the focus style on all the items.
• Observe all the added items focus style is cut-off on the right and bottom sides.
• Edit a post and add an Image block to open the Media dialog.
• Repeat the steps above.
• Observe the dotted border is cut-off.
• Observe the focus style, while fully visible, is inconsistent with the one of the Media grid.

[afercia]

Comparison of trunk, WP 7.0 and WP 6.9

Trac ticket: https://core.trac.wordpress.org/ticket/65755

## Use of AI Tools

None

[afercia]

In ​https://github.com/WordPress/wordpress-develop/pull/12756:

• Focus style box-shadow changed to inset so it is fully visible.
• Focus style in the Media dialog is now consistent with the one in the Media grid.
• Dotted border is an outline and now uses a -2px offset so it's fully visible.
• Dotted border color is now #757575 with to have a contrast ratio higher than 3:1 against the light gray background.

See attached screenshot.

Please test both the Media grid and the Media dialog in all states: selection, bult selection, focus, added items, etc.

[afercia]

In 62940:

Media: Fix focus style and first added item dotted outline in the Media grid.

With Infinite scrolling disabled, after clicking 'Load more', new added items in the Media grid had the focus style and the dotted outline for the first added item partially cut-off. The root cause is that all the added items use a background color and each item sits 'on top' of the previous one thus overlying the previous item box-shadow and outline on the right and bottom edges.

Fixes the focus style by making the box-shadow inset. Also makes the focus style consistent between the Media grid in the Media Library and the one in the Media dialog.
Fixes the dotted outline for the first added item by using a negative outline-offset.
Improves color contrast ratio of the dotted outline.

Props afercia.
Fixes #65755.