[A11Y] Accessibility mega-issue

[davwheat]

Flarum isn't particularly accessible at the moment, particularly revolving around keyboard navigation.

This issue serves as progress tracking for individual a11y issues.

More issues may be present in core aside from just the ones listed below. If this is the case, please open an individual issue, and reference that issue as a reply to this issue. Discussion should also take place on individual issues rather than this issue.

Current issues (Core only)

• [A11Y] App drawer on mobile is still part of accessibility tree when hidden #2565
• [A11Y] Dropdown toggle buttons missing accessibility label #2581
• [A11Y] Missing accessible label and landmark role on search input #2667
• Add accessibility attributes to loading spinner #2799
• Allow extra attrs provided to <Select> to be passed through to the DOM element #2959
• [A11Y] Cannot focus switches (display: none) #2973
• [A11Y] Side nav items have no keyboard focus styles #2656
• [A11Y] Triggering click on drawer button can cause layered backdrops #2663
• [A11Y] New reply counter is focusable when not acting as a button #2664
• [A11Y] Focus can leave open nav drawer on mobile #2665
• [A11Y] Toggle drawer button has no accessible label #2974
• [A11Y] Modal close buttons have no accessible label #2975
• fix: Add a11y labels to auth modal inputs #3207
• fix: prevent unwarranted a11y warnings on custom Button subclasses #3238
• fix(a11y): fix a11y warning in alert, and other a11y fixes #3237
• [A11Y] Apply role="feed" to post/discussion streams #3363
• [A11Y] Use aria-live on changing regions (discussion lists, post streams) #3365
• [A11Y] Add missing attributes to modal #3516
• [A11Y] Notifications list switches missing accessible labels #3369
• [A11Y] Set aria-busy on content being edited (posts) #3366
• [A11Y] Discussion reply count (mark as read) is button with no accessible information #3368
• [A11Y] Remove useless title attributes added to common controls (e.g. buttons) #3364
• [A11Y] Add missing aria-selected attribute to selected dropdown items #3362
• [A11Y] Convert empty links to button elements #3519
• [A11Y] Notification clear buttons have small touch targets #3518
• [A11Y] Use prefers-reduced-motion to calm animations #3517

Bundled extensions

• [A11Y] [Tags] Composer "Choose Tags" button is inaccessible via keyboard navigation #3367
• [A11Y] [Tags] Using keyboard nav in "Choose Tags" modal closes modal #3361

[davwheat]

I just discovered this: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

We should probably look into a way to implement this, but I can't think of a great way, especially with extensions that might modify page content that we don't think about.

Setting aria-live="polite" on commonly modified areas (e.g. PostStreams) would be a great starting point.

[SychO9]

I noticed the admin area form labels have no for attribute linking them to their inputs, the actual label attribute on the input isn't a thing, it's just leftover from not removing it from componentAttrs on JS side.

<div class="Form-group">
    <label>Forum Title</label>
    <div class="helpText"></div>
    <input type="text" label="Forum Title" class="FormControl">
</div>

Also, let's log #2799 as done as well.