diff --git a/_shared_assets/static/custom.css b/_shared_assets/static/custom.css index 04b115a40e0..6f34ad00fef 100644 --- a/_shared_assets/static/custom.css +++ b/_shared_assets/static/custom.css @@ -12,6 +12,40 @@ h6 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } +/* Visually hidden utility — element stays in the accessibility tree + but is not visible on screen. Satisfies WCAG 3.3.2 / BITV 9.3.3.2 + for the search form label. */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Search input wrapper — positions the magnifying-glass icon inside + the input so sighted users can identify the field without a label. */ +.wy-form-search { + position: relative; +} + +.wy-form-search-icon { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + color: #555; + pointer-events: none; +} + +.wy-form-search input[type="text"] { + padding-left: 30px; +} + /* NC blue */ .wy-side-nav-search { background-color: #0082c9; diff --git a/_shared_assets/templates/searchbox.html b/_shared_assets/templates/searchbox.html new file mode 100644 index 00000000000..92b14978a3f --- /dev/null +++ b/_shared_assets/templates/searchbox.html @@ -0,0 +1,30 @@ +{%- if 'singlehtml' not in builder %} +{# + Custom searchbox override. + + RTD's default searchbox has an aria-label but no visible label and no + search symbol, which fails WCAG 3.3.2 / BITV 9.3.3.2 (inputs must + have a visible label or identifying symbol). + + Changes from the upstream template: + - add an explicit