/* PD-9944 (S-1): the focus ring on the Settings screen. This block must stay at the top of the file: every rule below it is dropped by the browser, because its comments are `//` lines, which CSS does not have, and one of them swallows the rest of the file (measured: zero rules parsed, even from a block appended at the end). FooSales sets outline:none on its dropdowns and text boxes, and focuses each toggle and the slider through an input clipped to nothing, so those rings go on the switch track and the slider thumb you can see. Drawn inside rectangular controls (the till's ring, c2dd04ec), outside round ones. */ #root [class*="Settings_SettingsOuterContainer__"] a[href]:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; } #root [class*="Settings_SettingsOuterContainer__"] [role="button"]:focus-visible, #root [class*="Settings_SettingsOuterContainer__"] [role="combobox"]:focus-visible, #root [class*="Settings_SettingsOuterContainer__"] input[type="text"]:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.95); } /* FooSales animates its buttons with `transition: all`, which fades the ring in; the till-wide rule that stops that is one of the dropped ones. */ #root [class*="Settings_SettingsOuterContainer__"] [class*="Button_Button__"] { transition-property: background-color, color, opacity, transform; } /* The panel scrolls, and Tab scrolls a control only just into view, cutting off the part of a ring drawn outside it (measured at 150% and 200%). For a toggle, what is scrolled into view is its 1px input, halfway down the switch: 15px of switch and 5px of ring lie below it. */ #root [class*="Settings_SettingsOuterContainer__"] { scroll-padding: 24px; } /* PD-10148 (LF-1): the order buttons on the Orders screen (Cancel, Refund, Receipt, and the refund steps' Back, Next, Submit). Only the browser's own 1px ring showed, blue on Receipt's blue (measured on staging, 2026-10-14), because the till-wide ring further down is one of the dropped rules. Same ring as Settings. */ #root [class*="Orders_Orders__"] [class*="Button_Button__"]:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.95); } #root [class*="Orders_Orders__"] [class*="Button_Button__"] { transition-property: background-color, color, opacity, transform; } #root [class*="Settings_SettingToggle__"]:has(input:focus-visible) > div > div:first-child, #root [class*="Settings_SettingsOuterContainer__"] .MuiSlider-thumb:has(input:focus-visible) { outline: 3px solid #1d4ed8; outline-offset: 2px; } // The Dot Experience — FooSales Accessibility v2.0.0 Two surfaces handled in one file: - POS (#root scope): FooSales... // ═══════════════════════════════════════════════════════════════════════════ POS SURFACE — anchored to #root, which... // Touch targets (Notion #5) — FooSales renders all "buttons" as styled
s with class="Button... #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 — WCAG 2.4.7 Focus Visible (AA). #root a[href]:focus, #root a[href]:focus-visible, #root button:focus, #root button:focus-visible, #root input:focus, #root input:focus-visible, #root select:focus, #root select:focus-visible, #root textarea:focus, #root textarea:focus-visible, #root [role="button"]:focus, #root [role="button"]:focus-visible, #root [role="checkbox"]:focus, #root [role="checkbox"]:focus-visible, #root [role="combobox"]:focus, #root [role="combobox"]:focus-visible, #root [role="option"]:focus, #root [role="option"]:focus-visible, #root [role="listitem"] [tabindex="0"]:focus, // Scroll containers. #root [class*="Checkout_CheckoutOptionsOuterContainer__"]:focus, #root [class*="CustomerForm_CustomerForm__"]:focus, #root [tabindex="0"]:focus, #root [tabindex="0"]:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.95); } // WHY THE RING IS DRAWN INSIDE THE ELEMENT (outline-offset is NEGATIVE). // Keep the focus ring OUT of FooSales' transitions. #root [class*="MenuItem_MenuItem__"], #root [class*="Menu_CollapseButton__"], #root [class*="Button_Button__"] { transition-property: background-color, color, opacity, transform; } // The sr-only nodes we create are clipped to 1px, and several of them are legitimate programmatic focus destinations... #root .tde-a11y-sr-only:focus, #root .tde-a11y-sr-only:focus-visible { outline: none; box-shadow: none; } // All-caps on POS (Notion #8) — DISABLED pending review-author confirmation. // Color contrast on POS (Notion #7) — v2.0.7. // Token 1 — muted gray on light surfaces (was #8a8a8a, → #6a6a6a, lifts 3.09 → 4.84 on #f2f2f7 and 3.45 → 5.41 on... #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__"], // Added 2026-07-14 after a fresh axe-core sweep via tests/foosales/foosales-pos-accessibility.spec.js surfaced these... #root [class*="ProductListItem_EventDate__"], #root [class*="Checkout_AttendeeCount__"], #root [class*="Checkout_AttendeeCount__"] span, // Active (non-disabled) Button_lightestGrey__ text, e.g. #root [class*="Button_lightestGrey__"]:not([class*="Button_disabled__"]) { color: #6a6a6a !important; } // Cart-list price text (was #0090da, → #0072b0, same Token 2 color/ratio — see below). #root [class*="CartProductListItem_ProductPrice__"] { color: #0072b0 !important; } // Token 2 — brand blue (was #0090da, → #0072b0, 5.20:1 in 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). #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). #root [class*="Button_cancelOrder__"] { color: #b8333a !important; } // Token 5 — Save cart-action button text (was #79797c, → #6c6c6f, lifts 3.88 → 4.69 on #f2f2f7). #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). #root [class*="Button_disabled__"][class*="Button_lightestGrey__"] { color: #6c6c6f !important; } // Disabled-button opacity override — REMOVED 2026-08-24 (audit finding K-2). // Token 8 — Disabled primary / rounded-input buttons (Checkout, Export). #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... // 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. .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). @media (max-width: 599.98px) { footer .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open { display: none; } footer .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container { position: static; visibility: visible; opacity: 1; background: transparent; color: inherit; padding: 0; overflow: visible; display: block; } footer .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container .wp-block-navigation__container { flex-direction: column; gap: 0.5em; align-items: flex-start; } footer .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-close, footer .wp-block-navigation.is-responsive .wp-block-navigation__responsive-dialog[aria-modal] { display: none; } } // All-caps on storefront (Notion #8) — narrowed per client screenshot 2026-05-14. // Header + footer site title ("The Dot Experience Shop"). .wp-block-site-title, .wp-block-site-title a { text-transform: none !important; } // Front-page hero H1 ("Bring The Experience Home."). .wp-block-heading.alignwide[style*="uppercase"] { text-transform: none !important; } // Footer black-bar section headings ("Location", "Shop", "Info" plus the footer site title that lives inside... footer .wp-block-heading[style*="uppercase"], footer .wp-block-site-title[style*="uppercase"], footer .wp-block-site-title[style*="uppercase"] a { text-transform: none !important; } // Visible focus indicator across storefront interactive elements. .wp-block-button__link:focus, .wp-block-button__link:focus-visible, .wp-block-navigation a:focus, .wp-block-navigation a:focus-visible, .wp-block-search__button:focus, .wp-block-search__button:focus-visible, .wc-block-components-button:focus, .wc-block-components-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } // Visually hide an element while keeping it in the a11y tree (screen-reader-only). .tde-a11y-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }