/** * The Dot Experience — FooSales Accessibility v2.0.0 * * Two surfaces handled in one file: * - POS (#root scope): FooSales React SPA at /foosales-pos/ * - Storefront (.wp-block-* scope): kiosko block theme + WC + WC Blocks * * No :where() — selectors use real specificity to beat third-party CSS-module rules. * Surface isolation: POS selectors anchor on #root which only exists in the SPA; * storefront selectors use .wp-block-* / footer / nav patterns that don't exist * in the POS DOM. The two sets cannot cross-pollute. */ /* ═══════════════════════════════════════════════════════════════════════════ POS SURFACE — anchored to #root, which only mounts on /foosales-pos/ ═══════════════════════════════════════════════════════════════════════════ */ /* Touch targets (Notion #5) — FooSales renders all "buttons" as styled
s with class="Button Button_Button__...". Native button selectors miss them. */ #root [class*="Button_Button__"]:not([class*="hidden"]), #root input[type="checkbox"], #root input[type="radio"], #root [role="button"], #root [role="checkbox"] { min-width: 44px; min-height: 44px; box-sizing: border-box; } /* Spacing between adjacent menu items to prevent accidental activation. */ #root [class*="Menu_"] [class*="Button_Button__"] + [class*="Button_Button__"], #root [class*="Menu_"] a + a { margin-inline-start: 8px; } /* Visible focus indicator for div-buttons/checkboxes given semantics by our JS. FooSales did not provide focus styling for its semantic divs. */ #root [role="button"]:focus, #root [role="button"]:focus-visible, #root [role="checkbox"]:focus, #root [role="checkbox"]:focus-visible, #root [tabindex="0"]:focus, #root [tabindex="0"]:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* All-caps on POS (Notion #8) — DISABLED pending review-author confirmation. See CLAUDE.md "Disabled fixes" section. To re-enable: uncomment the block below. The selectors target the five FooSales CSS-module rules carrying text-transform:uppercase. #root [class*="Cart_CartEmptyTitle__"], #root [class*="ProductView_OnSale__"], #root [class*="SquareCardForm_SquareSandbox__"], #root [class*="StripeCardFormElements_StripeTestMode__"], #root [class*="Alert_Title__"] { text-transform: none; } */ /* Color contrast on POS (Notion #7) — v2.0.7. FooSales' default palette fails WCAG AA on most text + UI surfaces. axe-core surfaced ~236 node violations across the five POS views (Sale, Orders, Customers, Products, Settings) that dedupe to 8 distinct color pairs. The eight rule blocks below replace each pair with the closest darker / shifted variant that clears 4.5:1 for normal text (or 6:1+ for the disabled-button overrides where keeping the muted background was preferable to making it look active). See CLAUDE.md "Notion #7 — Color contrast" for the full palette table with computed ratios and rationale for each token. All rules use #root + !important because FooSales' own CSS-module rules (specificity 0,1,0) would otherwise win and we cannot edit FooSales itself. */ /* Token 1 — muted gray on light surfaces (was #8a8a8a, → #6a6a6a, lifts 3.09 → 4.84 on #f2f2f7 and 3.45 → 5.41 on white). Used in sidebar nav, list metadata, settings descriptions, strikethrough totals. */ #root a > [class*="MenuItem_MenuItemText__"], #root [class*="Menu_CollapseButton__"], #root [class*="Cart_CartEmptyText__"], #root [class*="CustomerList_CreateCustomerButton__"] > div, #root [class*="OrderListItem_OrderDate__"], #root [class*="OrderListItem_StrikeThrough__"], #root [class*="OrderListItem_StrikeThrough__"] span, #root [class*="CustomerListItem_CustomerIDContainer__"], #root [class*="CustomerListItem_CustomerUsername__"], #root [class*="ProductListItem_ProductStock__"], #root [class*="ProductListItem_ProductIDSKU__"], #root [class*="ProductListItem_ProductPrice__"] del, #root [class*="ProductListItem_ProductPrice__"] del .woocommerce-Price-amount, #root [class*="ProductListItem_ProductPrice__"] del .woocommerce-Price-amount bdi, #root [class*="Settings_SettingValue__"]:not([class*="SettingValuePrimary"]), #root [class*="Settings_SignedInAsValue__"] > div, #root [class*="Settings_SettingTitle__"], #root [class*="DataSync_SliderValue__"], #root [class*="AlertSettings_StatusShippingMethodContainer__"] > div, #root [class*="OfflineMode_OfflineModeButtonDescription__"], #root [class*="EventSettings_SettingTitle__"] { color: #6a6a6a !important; } /* Token 2 — brand blue (was #0090da, → #0072b0, 5.20:1 in both directions). Used as foreground on white AND as background under white text. One change fixes both directions. */ /* Foreground use (price text, status, links, license value): */ #root [class*="ProductListItem_ProductPrice__"] > .woocommerce-Price-amount, #root [class*="ProductListItem_ProductPrice__"] > .woocommerce-Price-amount bdi, #root [class*="ProductListItem_ProductPrice__"] ins, #root [class*="ProductListItem_ProductPrice__"] ins .woocommerce-Price-amount, #root [class*="ProductListItem_ProductPrice__"] ins .woocommerce-Price-amount bdi, #root [class*="OrderListItem_completed__"], #root [class*="OrderListItem_completed__"] span, #root [class*="CustomerListItem_CustomerEmail__"], #root [class*="Settings_SettingValuePrimary__"] { color: #0072b0 !important; } /* Background use (active primary buttons, day-header bars in Orders): */ #root [class*="Button_primary__"]:not([class*="Button_disabled__"]), #root [class*="DayHeader_DayHeader__"] { background-color: #0072b0 !important; } /* Token 3 — Refunded order-status badge (was #ef9016, → #a85f00, lifts 2.42 → 4.88 on white). Reads as burnt orange rather than bright orange. */ #root [class*="OrderListItem_refunded__"], #root [class*="OrderListItem_refunded__"] span { color: #a85f00 !important; } /* Token 4 — Cancel cart-action button text (was #dd878a, → #b8333a, lifts 2.38 → 5.26 on #f2f2f7). Reads as a deliberate danger red. */ #root [class*="Button_cancelOrder__"] { color: #b8333a !important; } /* Token 5 — Save cart-action button text (was #79797c, → #6c6c6f, lifts 3.88 → 4.69 on #f2f2f7). Barely perceptibly darker. */ #root [class*="Button_saveRevertOrder__"] { color: #6c6c6f !important; } /* Token 6 — Settings "App version" line (was #c4c4c4, → #767676, lifts 1.74 → 4.54 on white). */ #root [class*="Settings_AppVersion__"], #root [class*="Settings_AppVersion__"] > div { color: #767676 !important; } /* Token 7 — Disabled "Clear" button text in Offline Mode (was #c5c5c5, → #6c6c6f). Note: in browser the effective background turned out to be the settings panel's #f2f2f7 (not the button's own #f9f9fb) once we restore opacity:1 — axe samples the rendered cascade. #6c6c6f clears 4.5:1 on either surface (6.16 on #f2f2f7, 6.55 on #f9f9fb) so the token is robust to whichever surface FooSales uses next. */ #root [class*="Button_disabled__"][class*="Button_lightestGrey__"] { color: #6c6c6f !important; } /* Disabled-button opacity override. FooSales' .Button_disabled__ rule applies `opacity: 0.5`, which visually halves the contrast of any foreground color we set on top. axe / Lighthouse compute contrast on the rendered (post-opacity) color, so Tokens 4, 5, 7, and 8 fail unless we restore full opacity. The "disabled" visual cue is instead carried by the explicit color choices in Tokens 4 / 5 / 7 / 8 below (which intentionally pick muted hues), plus FooSales' own pointer- events / aria-disabled handling on these elements. */ #root [class*="Button_disabled__"] { opacity: 1 !important; } /* Token 8 — Disabled primary / rounded-input buttons (Checkout, Export). Replace the brand-blue surface (which becomes invisible at opacity 1 under white text — 3.40 / 3.66 ratios) with an explicit muted slate blue #4275a0 under white text → 4.91:1. The slate stays clearly distinct from the active primary surface #0072b0 from Token 2, so the disabled state remains visually obvious without relying on opacity. Excludes Button_lightestGrey__ which has its own Token 7 rule. */ #root [class*="Button_disabled__"][class*="Button_primary__"], #root [class*="Button_disabled__"][class*="Button_rounded__"][class*="Button_input__"]:not([class*="Button_lightestGrey__"]) { background-color: #4275a0 !important; color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════════ STOREFRONT SURFACE — kiosko block theme + WooCommerce + WC Blocks Selectors use .wp-block-*, footer, nav, wc-block-* which do not exist in POS. ═══════════════════════════════════════════════════════════════════════════ */ /* Touch targets (Notion #5) for storefront block-theme buttons + WC Blocks. */ .wp-block-button__link, .wp-block-search__button, .wp-block-woocommerce-checkout button, .wp-block-woocommerce-cart button, .wc-block-components-button, .wc-block-components-checkout-place-order-button, .wc-block-mini-cart__button, .wc-block-mini-cart-block button, .woocommerce-button, .woocommerce-form-login button, .woocommerce-form-register button, .woocommerce-EditAccountForm button, .woocommerce-address-fields button { min-width: 44px; min-height: 44px; box-sizing: border-box; } /* Spacing on horizontal navs to prevent accidental tap. */ .wp-block-navigation.is-layout-flex.is-horizontal .wp-block-navigation-item + .wp-block-navigation-item { margin-inline-start: 8px; } /* Current-page indicator (Notion #10) — our JS adds aria-current="page" to matching nav links. CSS supplies the visual treatment. */ .wp-block-navigation [aria-current="page"], .wp-block-pages-list__item__link[aria-current="page"], nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* Mobile bottom-menu "Shop and Info" accordion (Notion #9). WordPress core's