Accessibility Fixes

[IzzySmillie]

• Story: https://github.com/RaspberryPiFoundation/digital-editor/issues/58
• Fix all the accessibility errors found when running the aa tools (List below)
• Some are duplicates
• Once fixed, re-run through axe, WAVE and lighthouse to check there are no errors remaining

---

axe DevTools

• ARIA input fields must have accessible name [More info]
• • Text input area .cm-content
• Certain ARIA roles must contain particular children [More info]
• • Visual output tabs (<ul class="react-tabs__tab-list" role="tablist">)
• Buttons must have discernible text [More info]
• • Rename icon
• • Visual output toggles
• • file context-menu kebab/suitcase button
• • sense hat reset button
• Scrollable region must have keyboard access [More info]
• • Text input area.cm-scroller

WAVE

• Empty buttons on /
• • Rename icon
• • Visual output toggles
• • beta banner close
• Empty buttons on /projects
• • beta banner close
• • editor-project-list__menu
• Alt text issues
• • codemirror images in text input

Lighthouse - 91 score on AA

• Buttons do not have accessible name (Rename icons, output toggle icons)
• • Beta banner close icon
• • Rename icon
• • Visual output toggles
• ARIA input fields do not have accessible names
• • Text input area .cm-content

[create-issue-branch[bot]]

Branch a11y/370-Accessibility_Fixes created!