Accessibility improvements: Other amount input, and general opt-in labels.

[StoneMoney]

Do not merge until 4site-interactive-studios/engrid#407 and engrid is updated, rebuild this

Donation page frequency and amounts:

https://cln.sh/pLHTZJLz

• Annual shows up when focused.
• Tabbing out of amounts presents a hidden "Other Amounts" button that you can press spacebar/enter to focus the Other field.
• If you already have an input in the other field, you can tab to it normally without the button
• Allows for navigation with the tab button without requiring an input/selection of the other amount field

Colors and Contrast

• Quiz correct and incorrect colors updated to be compliant
• new error, placeholder, and radio-bullet-hover colors updated to be compliant
• thermometer widget font size and weight increased for compliant contrast

https://cln.sh/GYgdlhL5 — Screen reader fix in action (at 15s is the current page behavior)

Opt-in Label Coupling

WWF has a pair of text and form blocks: General - Conservation Updates - Opt-in Text (Be a part of our community) and General - Conservation Updates Email Opt-in (Examples, but there are several pairs), which hides the first label of the form block and puts a label in the bottom of the text block. The thing about those blocks is that they’re so ubiquitous on WWF’s pages, and yet these blocks were not created with screen readers in mind. A screen reader will still see the original hidden label for the opt in (by design) in addition to the new one made in the text block. What I’ve done is added 2 additions to the client theme that specifically handle when these two blocks are on a page.

1. Finds be-a-part-of-our-community universal-opt-in-copy or general-opt-in-copy Assigns an ID to the .label in the text block
2. Added i#-force-hide-label which sets display: none; to the input’s label.
   a. In normal situations we use i#-hide-label to visually hide the label but still allow screen readers to read the label. Since we’re using a different piece of text to describe the input, we need to hide this label to screen readers completely.
3. Set described-by on the input block to the ID we assigned in step 1.

This accomplishes the job of accurately labeling the first radio group in the block pairing. Both blocks are edit-lock blocks, meaning we shouldn’t have any substantial manual changes required across WWF’s pages. I’ve made quiet updates to both blocks to add in labeling classes for each, that do not change anything about the content or functionality pre-deployment.

Multistep Stepper

• Tab select groups now properly tagged for screen readers
• Demo: https://cln.sh/ymHdpm1Z

Supporter Hub Semantics

• Reposition the error and success messages to be below the email input box, logically where these dialogs should go

Thank You Title

• Set the title of the page to Thank You | <original title> when loading on to a Thank You page

Cookie Settings Modal

• Tag the cookie settings button to inform AT that it opens a dialog

Premium Gifts non-US alert

• Notice that appears when selecting a different country is now alerted by screen reader

[fernanDOTdo]

This PR is on the July-2026 branch, with the latest ENgrid version.
Closing it out!