FlexItem should not allow onClick prop when it renders a non-interactive element

[afercia]

Description

The FlexItem component renders a <div> element by default. It can render other elements via the as prop.

When it renders an element that is not operable with a keyboard, it should not allow an onClick prop. Maybe, it should never allow an onClick prop.

An example of incorrect implementation is in AddCustomTemplateModal:

The two choices at the bottom of the modal are just clickable <div> elements.

The can't be operated with a keyboard.

We should never, ever, use clickable divs or other non-interactive clickable elements.

This specific implementation in AddCustomTemplateModal can be probably fixed by using the as prop to render the flex item as a Button component and then adjust the style. Also, the buttons don't need to contain a heading (the H5 is a wrong heading level anyways).

However, a more future-proof measure would be to not allow an onClick prop.

Step-by-step reproduction instructions

• go to the site editor and open the Templates browser
• click Add New at the top right
• select 'Category' or 'Tag' to open the modal
• inspect the source and observe the two choices at the bottom of the modal are clickable divs
• observe you can't move focus to them by using the keyboard

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I looked into FlexItem and could not find any other component that has the onClick property and renders as a div element.
Therefore, the accessibility issues occurring in FlexItem should only need to be corrected in the AddCustomTemplateModal component.
(However, this is not a future measure, but a fix only for problems that are currently occurring...)

And one suggestion, how about applying the UI of "Create template part" to AddCustomTemplateModal as well?
The UI for template parts has clickable elements.

"Create a template part" UI

"Add template" UI (proposal)

[talldan]

It might also be an option to add a linting rule for as="div" onClick={ ... }, similar to the one that's shown for <div onClick={ ... }, although they can be quite complicated to write:

[afercia]

That would be a good start, as a div element is probably the most common case 🙂 However, not sure how to cover all the other cases.

[mirka]

Thanks for raising this issue, it's not good that we basically have zero accessibility linting coverage on these types of components. I do generally think this type of problem should be addressed with linters, rather than blocking event handlers at the code level (mostly for scalability reasons, since there are a lot of as prop components and many conditions for things to cause accessibility issues). I split out the linting part of the problem to #42540.