Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions _shared_assets/static/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
30 changes: 30 additions & 0 deletions _shared_assets/templates/searchbox.html
Original file line number Diff line number Diff line change
@@ -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 <label> element (visually hidden via .sr-only, still
announced by screen readers as an accessible name)
- add a FontAwesome magnifying-glass icon that gives sighted users a
visual cue that this is a search field
#}
<div role="search">
<form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
<label for="rtd-search-input" class="sr-only">{{ _('Search docs') }}</label>
<div class="wy-form-search">
<span class="fa fa-search wy-form-search-icon" aria-hidden="true"></span>
<input id="rtd-search-input"
type="text"
name="q"
placeholder="{{ _('Search docs') }}"
aria-label="{{ _('Search docs') }}" />
</div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
{%- endif %}
Loading