Day/Night mode icon toggle is not accessible to assistive technology

[hollsk]

Bug Report

Current Behavior
There's no accessible name for the button toggle. Here's the output code, from js/src/forum/addSettingsItems.js, lines 129 onwards:

<button class="Button Button--flat hasIcon" type="button"><i aria-hidden="true" class="icon fas fa-adjust Button-icon"></i><span class="Button-label">Toggle forum theme</span></button>

I see that the .Button-label span is intended to be the accessible name, but the CSS sets it to display:none;:

@media (min-width: 768px) { .Header-secondary .Header-controls > .item-nightmode .Button-label { display: none; } }

... this unfortunately removes the element entirely from the accessibility tree by design, so it never reaches its intended audience 😅

Expected Behavior
Screen reader users are able to understand what the button is for, and voice input users are able to target it.

Screenshots
You can also verify this by using the axe accessibility dev tool. Here's a screenshot:

Environment

• Flarum version: 1.8.5
• Extension version: 1.5.3
• Browser: all browsers, and all assistive technology

Possible solution(s)
Elsewhere in Flarum this is solved by adding an aria-label to the button, like the aria-label="View notifications" from the flagged posts notice:

<button class="Dropdown-toggle Button Button--flat" aria-haspopup="menu" aria-label="View notifications" data-toggle="dropdown" title="Flagged Posts"><i aria-hidden="true" class="icon fas fa-flag Button-icon"></i><span class="Button-label">Flagged Posts</span></button>

A better alternative to aria-label, and my preferred approach (aria should be avoided unless it's genuinely unavoidable - see The first rule of using aria), would be to stick with your existing CSS-only approach, but to use an accessible technique, as described in Kitty Giraudel's article above.

That would put it slightly out of step with the rest of Flarum. Flarum does already have an accessible .sr-only class that could just be applied to the same span as .Button-label, but it doesn't seem to be getting used on buttons anywhere in the header bar at the moment (imo it should be! but that's a bit out of scope for this issue, heh).

Additional context
I'm very very new to Flarum, and I don't know how to make this happen for you in a PR. I would like to! It's out of my capability right now, but if either of my suggestions are accepted I'll be studying the update closely 😄