Issue Summary

The target size of the button is less than the minimum requirement i.e. 24*24 CSS pixels.

Steps to Reproduce

1. Open the Confluence project page.
2. From the side navigation, select "Pages."
3. Navigate to the "Sample Page" in the list of pages.
4. Open the page and scroll down to the section where the target size is mentioned.
5. Inspect the page's code or elements related to the target size.
6. Observe that the target size is less than the minimum requirement.

Screenshot

Actual Results

The "Copy link to heading" button is smaller than the required 24x24px on some headings. Some users may have difficulty selecting this button.
While it technically passes as no other interactive content is close by, increasing the size of this component will help ensure users can select it.

As a result, mobility-impaired users find it difficult to accurately click on controls with smaller target sizes with the mouse pointer.

Expected Results

Interactive elements should have a minimum pointer-target size of 24*24 CSS pixels.

Providing enough target size for the user controls so that the users can click on small controls easily who have Hand tremors(shaking hands) without having much more effort.

Use CSS min-height and min-width properties to sufficient target size.

For more information, refer to the following link: C42: Using min-height and min-width to ensure sufficient target spacing | WAI | W3C

Code Example:

button{
  display: inline-block;
  min-height: 24px;
  min-width: 24px
}

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOS Sonoma 14.7
Operations - Windows11
Chrome - Version 134.0.6998.89 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest