[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)

• [x] flarum/framework#2565
• [x] flarum/framework#2581
• [x] flarum/framework#2667
• [x] flarum/framework#2799
• [x] flarum/framework#2959
• [x] flarum/framework#2973
• [x] flarum/framework#2656
• [x] flarum/framework#2663
• [x] flarum/framework#2664
• [x] flarum/framework#2665
• [x] flarum/framework#2974
• [x] flarum/framework#2975
• [x] flarum/framework#3207
• [x] flarum/framework#3238
• [x] flarum/framework#3237
• [x] flarum/framework#3363
• [x] flarum/framework#3365
• [x] flarum/framework#3516
• [x] flarum/framework#3369
• [x] flarum/framework#3366
• [x] flarum/framework#3368
• [ ] flarum/framework#3364
• [ ] flarum/framework#3362
• [x] flarum/framework#3519
• [ ] flarum/framework#3518
• [ ] flarum/framework#3517

Bundled extensions

• [ ] flarum/framework#3367
• [ ] flarum/framework#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 https://github.com/flarum/core/pull/2799 as done as well.