Pull Request for Issue #48404 (part 2 of 3: category remove icon). Split from #48795 , one PR per icon.

• I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

The small "×" that removes the selected category in the article edit form was faint in its default state (below the WCAG 2.2 SC 1.4.11 minimum of 3:1 in dark mode, and barely above it in light mode). SCSS only (vendor/choicesjs/choices.scss), no PHP/JS changes.

• Light mode: the default opacity goes from .5 to .75.
• Dark mode: a new dark-mode rule sets the default opacity to .9. At .75 the dark item background only reaches 2.78:1.
• Hover and keyboard focus stay at opacity 1, so the control still changes on hover and focus in both modes. The light-mode focus ring is unchanged.
• This applies to every Choices.js remove button in Atum, so the Tags field chips get the same improvement.

Measured contrast (after opacity compositing, against the item background):

Notes:

• The audit's 1.66:1 figure for the category × did not reproduce numerically here (3.05:1 before in light mode), but the icon was clearly faint, and in dark mode it was 2.00:1.
• In dark mode Atum already sets --choices__button_joomla-focus-box-shadow: none (_variables-dark.scss), so keyboard focus is shown by the opacity change only. That was .5 → 1 before and is .9 → 1 now. The focus ring itself is not changed here.
• The Tags chip × has no focus ring in either mode. That is existing behaviour and out of scope here.
• Cassiopeia (frontend) has its own choices.scss and is not changed here.
• The Guided Tours cancel icon and the MFA default star from the same issue are fixed in separate PRs.

Testing Instructions

Apply the PR and run npm ci && npm run build so the Atum CSS is rebuilt. Use Atum in light mode, then repeat in dark mode.

1. Open Content → Articles and edit any article that has a category (or create a new one, which defaults to "Uncategorised").
2. Inspect the small × in the Category field: default (pointer away, no focus), hover, and keyboard focus (Tab to it). Do not click it.
3. Add a tag in the Tags field and inspect the × on the tag chip in the same way.
4. Measure the icon against the item background with any contrast checker. Account for the opacity.
5. Also try a narrow viewport (about 640px wide, equivalent to 200% zoom).

Actual result BEFORE applying this Pull Request

The × is rendered at 50% opacity in both modes, so it looks faint or disabled until hovered or focused: 3.05:1 in light mode, 2.00:1 in dark mode.

Category, light, default:

Category, light, keyboard focus:

Category, dark, default:

Category, light, 640px (200% zoom equivalent):

Tags chip, light, default:

Tags chip, dark, default:

Expected result AFTER applying this Pull Request

The × is at least 3:1 in its default state in both modes: 6.42:1 in light mode, 3.34:1 in dark mode. Hover and keyboard focus still raise it to full opacity, and the light-mode focus ring is kept. Checked in Firefox (computed and rendered values).

Category, light, default:

Category, light, keyboard focus:

Category, dark, default:

Category, light, 640px (200% zoom equivalent):

Tags chip, light, default:

Tags chip, dark, default:

Link to documentations

Please select:

• Documentation link for guide.joomla.org:

• No documentation changes for guide.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed