Increase the target sizes to meet the minimum requirement

Here is some more info on testing for target size

• https://adrianroselli.com/2019/06/target-size-and-2-5-5.html
• https://www.tpgi.com/how-to-test-2-5-8-target-size-minimum/
• https://www.digitala11y.com/understanding-sc-2-5-8-target-size-minimum/
• https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rag...

Also, for folks who prefer extensions to bookmarlets:
https://chromewebstore.google.com/detail/target-size-minimum/akkbdipgjjn...

Moving this to Drupal Core as this affects most of Drupal. Gin's moving into Core, but the base problem isn't Gin.

Just wanted to say that the images at the top came from the Basic Target Size Highlighter from:
https://accessibility-tools.github.io/target-size-highlighter/

There are reasons to use either the basic or Advanced Bookmarklet for this.

To see the outline more clearly in a Chrome Inspector, we can add:

a,
button,
input,
[role="button"],
[role="link"] {
  outline: 2px dashed red !important;
}

To ensure all buttons/links/icons have a minimum clickable size, can't we do something like:

a, button, input, .icon-button, .dropbutton__toggle {
  position: relative;
  min-width: 24px;
  min-height: 24px;
}

a {
  padding: 10px 15px;
  display: inline-block;
}

I like this idea for mobile devices (but that is a AAA SC at this point):

@media (hover: none) and (pointer: coarse) {
  button {
    min-width: 48px;
    min-height: 48px;
    margin: 10px;
  }
}

More on some of these from:
https://allyship.dev/blog/click-target-size

Nice to see Craft CMS aiming for AAA and 44px:

Just looking at more info around strategies for this.

In terms of how we are addressing this:

https://tetralogical.com/blog/2022/12/20/foundations-target-size/

the Target Size (Minimum) criterion is perhaps misleading. It won't guarantee that there are no small targets. It defines an ideal minimum size, but also allows an exception for smaller targets with sufficient spacing. The intent of the criterion is not to make sure targets are large enough to be comfortably activated, but to avoid having targets that are too small clustered closely together, which would otherwise increase the likelihood of a person accidentally activating an adjacent target.

Some exceptions to the rule:

https://dubbot.com/dubblog/2024/staying-on-target.html

It is also important to take into consideration the exceptions to WCAG 2.5.8, which are:

• If smaller targets (less than 24 x 24 CSS pixels) are arranged so that, when a 24 CSS pixel diameter circle is centered on each target's bounding box, the circles don't overlap with other targets or their circles.
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion. For instance, in the following screenshot, the targets in the upper right corner are 15px with no minimum spacing, while the ones further down the page are 24px with no minimum spacing. Therefore, the criterion has been met.
• Inline: The target is in a sentence, or its size is otherwise constrained by the line height. For example, contextual links may be constrained by the vertical spacing between lines of text or the leading.
• User-agent control: The size of the target is determined by the user agent and is not modified by the author. For example:
• the options list of
  dropdowns
• date picker for the HTML date input
• color picker for the HTML color input
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed. For example, the target must be a certain size or shape.

Some other good guidance from Eric Bailey https://www.smashingmagazine.com/2024/07/getting-bottom-minimum-wcag-con... and Adrian Roselli

In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies. Thanks