Increase the target sizes to meet the minimum requirement

Created on 13 February 2025, about 2 months ago

Problem/Motivation

Several interface components don't meet the minimum target size of 24 by 24 pixels (SC2.5.8 - purple dots label focusable elements not meeting the success criterion while green dots label the compliance). The components affected are:

Links (all links not constrained by line-height of non-target text)
Radio buttons
Form element labels

Grid/table (in add or select media dialog modal)

Cog button (for example on the manage form display page)

Drop buttons (in the CKEditor toolbar)

…and there might be more.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

Go to admin/config/people/accounts, the page is a good example containing the three most usual cases. The target sizes can easily checked and visualized with the following bookmarklet: https://html5accessibility.com/stuff/2023/08/28/quick-and-very-dirty-tar...

Proposed resolution

There is already an issue for dealing with target sizes in Claro ( 🐛 [meta] Some interface components don’t meet the minimum target size Active ) but due to the fact that the issues listed on the aforementioned list apply only to a subset of components in Gin, because the styling differs between the two themes, it makes probably sense to solve those target size issues within Gin separately to Claro. (*the changes not necessarily entail layout changes, often adding some more padding is enough)