auge8472
commented
2 years ago I changed/replaced the files in a test environment. It works.
O.k.
However, I don't like the label "Search:" but this is more or less a personal mental state.
The label was always there in the code but was hidden with display: none;. So it wasn't invisible but was removed from the DOM. So the input field was never ever accessible for users who need the labelling for accessing the form because it simply didn't exist. Same for the hidden (commented) code for the submit button. Default action for [Enter] is to send the form but IMHO there should also be a visible (in this case existing) submit button.
IMHO the forum UI should be accessible as possible and I know, that this is a long way and far from done with this single and simple change.
You also removed the default value.
The default value was mainly there because of the former hidden label. So there's no need for it anymore because the label now exists. Beside of that, there is the general issue, that it should be realised as attibute placeholder nowadays but the placeholder in itself is disputable. It is generally possible to position the label inside the input field and to remove it, when the field gets the focus (:focus exists not only for a but also for focussable form elements like input). But this is IMHO nothing that hurts.
I'm not an expert in CSS but the result looks fine.
There is a optical "problem" (with air quotes), that occurs with a long text in h1 and a long menu (i.e. because of additional menu entries because of pages). In such cases the text in one of the (or all) elements will wrap. But that's only a aesthetical issue. The advantage of a not inaccessible user menu clocks out the "not so nice looking" header.
Because of the recent changes (doctype from XHTML 1.0 to HTML (5)) a bug appeared. It caused the user menu to disappear in some cases because of the fixed height of the header. The menu slips out of the visible area and is unreachable on narrow viewports.
I reworked the header with using a media query that makes it possible to put the elements one below the other on narrow viewports and to put it side by side on wider viewports. So there is no big difference on great screens with a large browser viewport. On narrow viewports, where the bug appears, the elements are stapled vertically with no limit of the headers height. So the elements are visible all time.
See also #607