We need to do a pass on the banners and work out how to make them accessible to screen readers, and keyboard navigation.
Quick Wins
- Banner should be focusable and have a title to let screen readers announce to the donor that they've entered a banner rather than the usual Wikipedia layout that they're used to.
- Check how accessible Keen Slider is.
- If a donor focuses the search bar after the banner is shown it makes it vanish. Banner should check for focus at show time and if focused then not display.
- Icon buttons do not have aria labels. This includes:
- All close buttons.
- Slider chevrons.
- Form back buttons.
- Custom amount is not keyboard focusable.
- Second pages of the form are removed from the tab index.
- When a form page changes the newly visible form should be focused.
- Forms don't focus when they appear.
- Forms don't have the aria live attribute.
- The slider probably should have an aria live attribute.
- Selectable bank data should select on focus as well as click.
- Selectable bank data fields are missing labels.
- Donation form should have a screen readable title (TBH, it should probably have a visible one too).
- Individual form pages should all have aria labels, this would probably also fix the point above.
- Maybe add a skip link?
- Use of funds (UoF) should be a dialogue element.
- Focus UoF when it's opened.
- UoF accordian styles should match the ones on Spenden: https://spenden.wikimedia.de/use-of-funds?ast=0&mbi=0&ap=0&afo=0
- Soft Close should be focused when it appears.
- Soft close should have an aria label so what has happened when the donor clicked close is announced by the screen reader.