Match searchbox.html from upstream

[stsewd]

• Aria label support (this includes the extra "Quick search" title)
• No js detection

https://github.com/sphinx-doc/sphinx/blob/3.x/sphinx/themes/basic/searchbox.html

Questions

"Quick search" or "Search docs"? We used to have the latter, but the former matches upstream

[ericholscher]

Hrm, I don't see the search copy here: https://sphinx-rtd-theme.readthedocs.io/en/stable/

If this is the same as upstream, can we just delete it?

[stsewd]

Hrm, I don't see the search copy here:

You mean the "Quick search" title? That is needed for the aria label. We were using "Search docs" as placeholder instead

[ericholscher]

I'm definitely -1 on using vertical space in the sidebar for a search header. There must be a way to properly specify the search box without using a text header, no?

[stsewd]

@ericholscher the label must be visible https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names#Form_elements_should_have_a_visible_text_label

[stsewd]

But looks like even mdn hides that label with css

[stsewd]

Hmm, but looks like having display: none is the same as not having label. MDN uses another trick to make it hidden

Should we do the same? Or just show the label?

[agjohnson]

+1 on adding the a11y updates, but I'm also -1 on showing the label/header, it's too much vertical space for a single field form.

Another option would be to use the aria-label attribute, which has fairly good adoption at this point. This is less hacky than hiding the label element and using aria-labeledby, though aria-labeledby has more universal support. I'm +1 on that as a compromise between a11y and the design

[stsewd]

From MDN

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

I have used the aria-label attribute, the accessibility inspector from firefox still gives a warning to use a label for the form, but looks like it's just being picky? Not sure

[agjohnson]

It might be, yeah. It's a compromise solution and the inspector is likely treating the input as a full form input, not a single field form input.

[jonels-msft]

What's the verdict on this PR? Hope we can move forward with it, it's important for resolving #970

[ericholscher]

@agjohnson is probably the person to review this and 👍 it.