← All changes | assets/css/charitable.css +81 -0 1.8.11.1 → 1.8.13.1 View file →

		@@ -1525,4 +1525,85 @@
1525	1525	#charitable-square-card-payment-fields.no-wallets {
1526	1526	padding: 0;
1527	1527	border: none;
1528	1528	}
	1529	+
	1530	+/*
	1531	+ * WCAG 2.4.7 Focus Visible -- one keyboard focus ring for every control Charitable renders
	1532	+ * (1.8.13.1). Ported from Charitable Pro 1.8.19.2 / 1.8.20.
	1533	+ *
	1534	+ * Lite shipped NO :focus rules in this stylesheet at all, so the donation form had whatever
	1535	+ * indicator the theme happened to give it -- and the common themes actively remove it. Astra
	1536	+ * ships
	1537	+ * .button:focus, button:focus, input[type="submit"]:focus { outline: 0 }
	1538	+ * and our donate controls match it (`a.donate-button` carries the `button` class), which also
	1539	+ * beats Astra's own `a:focus { outline: thin dotted }`. Measured on Pro with real Tab keypresses,
	1540	+ * 6 of the 9 tab stops in the modal donation form had no visible indicator at all, and the submit
	1541	+ * was actively regressive: focusing it REMOVED its drop shadow. Lite renders the same controls
	1542	+ * through the same templates, so it has the same gap.
	1543	+ *
	1544	+ * Declared once for the whole surface rather than chased per control, so a control added later
	1545	+ * inherits it instead of starting out unfixed.
	1546	+ *
	1547	+ * SPECIFICITY. This is (0,4,0), not the (0,3,1) the Pro comment claims: `:is()` takes the
	1548	+ * specificity of its MOST SPECIFIC argument, which here is `[tabindex]:not([tabindex="-1"])` at
	1549	+ * two attribute selectors, not one class. Either way it clears Astra's (0,2,0) on specificity
	1550	+ * rather than relying on stylesheet order, which a stylesheet enqueued in wp_head cannot count on
	1551	+ * winning. No `!important`, so a theme can still have the last word, and the colour is exposed as
	1552	+ * a custom property, which is the cheap override for a dark form background.
	1553	+ *
	1554	+ * `outline` and deliberately NOT `box-shadow`: forced-colors mode (Windows High Contrast) strips
	1555	+ * box-shadow entirely, so a shadow-only ring is invisible to exactly the users most likely to be
	1556	+ * relying on it.
	1557	+ *
	1558	+ * :focus-visible, so a mouse click does not draw the ring -- only keyboard focus does.
	1559	+ *
	1560	+ * KNOWN GAP, deliberately not closed here, and MEASURED rather than reasoned about. The
	1561	+ * `charitable-template-minimal` rules earlier in this file set `outline: none` at (0,5,2) on BOTH
	1562	+ * of their text inputs -- the one inside `.donation-amounts.donation-suggested-amount` and the one
	1563	+ * inside `.charitable-custom-donation-field-alone` -- which out-specifies this rule, so those two
	1564	+ * controls stay unringed on that one template. Confirmed in a headless Chromium probe loading this
	1565	+ * compiled stylesheet, driven with a real Tab keypress, against a plain `<input>` in the same form
	1566	+ * as the positive control: the control ringed `solid 2px`, both minimal inputs reported
	1567	+ * `outline-style: none` at `0px`. Closing it means overriding a suppression the template's designer
	1568	+ * put there on purpose, which is a design decision rather than a port, and Pro carries the same gap.
	1569	+ *
	1570	+ * SELECTOR DIFFERENCES FROM PRO, both verified against this tree:
	1571	+ * - Pro's `#charitable-universal-modal` is omitted: the universal modal is Pro-only and the id
	1572	+ * appears nowhere in Lite.
	1573	+ * - `input.charitable-button` is ADDED: Lite's donate-button shortcode renders
	1574	+ * `<input type="button" class="charitable-button">` (its 'css' arg defaults to
	1575	+ * `charitable-button`), so that is Lite's equivalent of the control Pro covers via
	1576	+ * `.charitable-donate-button`. The Pro class is kept as well, since the shortcode's 'css'
	1577	+ * argument is caller-overridable.
	1578	+ */
	1579	+.charitable-donation-form :is(a[href], button, input:not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
	1580	+.charitable-donation-amount-form :is(a[href], button, input:not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
	1581	+.charitable-modal :is(a[href], button, input:not([type=hidden]), select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
	1582	+a.donate-button:focus-visible,
	1583	+input.charitable-button:focus-visible,
	1584	+.charitable-donate-button:focus-visible {
	1585	+ /*
	1586	+ * Longhands, not the `outline` shorthand. A shorthand containing var() becomes a
	1587	+ * pending-substitution value: it is resolved at computed-value time, it is invisible to
	1588	+ * getPropertyValue("outline") (which returns an empty string, making the rule look absent
	1589	+ * when inspecting the cascade), and in Pro's testing it applied on the checkboxes, radio and
	1590	+ * submit but silently failed on the custom-amount input, leaving outline-style at its initial
	1591	+ * `none` while the sibling outline-offset still took. Declaring the four longhands removes
	1592	+ * that whole class of problem and keeps the custom-property override.
	1593	+ */
	1594	+ outline-width: 2px;
	1595	+ outline-style: solid;
	1596	+ outline-color: var(--charitable-focus-ring, #1e1515);
	1597	+ outline-offset: 2px;
	1598	+}
	1599	+
	1600	+/*
	1601	+ * In forced-colors mode the UA forces its own palette, so the ring is redefined to the system
	1602	+ * Highlight colour rather than our ink. Done by reassigning the custom property, so the selector
	1603	+ * list above is not duplicated.
	1604	+ */
	1605	+@media (forced-colors: active) {
	1606	+ :root {
	1607	+ --charitable-focus-ring: Highlight;
	1608	+ }
	1609	+}