Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop: Fix errors found by automated accessibility testing #11246

Conversation

personalizedrefrigerator
Copy link
Collaborator

@personalizedrefrigerator personalizedrefrigerator commented Oct 23, 2024

Summary

This pull request:

  1. Sets up automated accessibility scanning with @axe-core/playwright (docs).
    • For now, this scans the "General" and "Plugins" tabs of the settings screen and the main screen with an open note.
  2. Fixes WCAG errors found by the scan.

Note

This pull request includes code from #11218.

Change summary

  • Missing lang attribute on HTML.
  • Avoid empty aria-labels:
    • Fixed by using aria-hidden={true} instead.
  • Missing role='main' and role='navigation' elements.
    • Fixed by adding role='navigation' to the sidebars and role='main' to the note editor.
    • The two role='navigation' elements are distinguishable by their different aria-labels.
  • aria-details={id} sometimes points to an ID that isn't in the document.
    • Fixed by ensuring that the details element always exists. Previously, it was only created if it had content.
  • aria-setsize on unsupported element.
    • Removed aria-setsize from the note list and sidebar content containers. (aria-setsize is already correctly present on children of the sidebar and note list).
  • Missing label for note viewer.
    • Added aria-label to the note viewer.
  • Missing label for the Markdown editor's content.
    • Added aria-label to the Markdown editor's content.
  • Contrast issues:
    • Made colorFaded and color3 darker in the light theme.
    • Previously, the following elements had contrast issues in light mode:
      • Setting labels (3.18:1, expected 4.5:1)
        • Before: image before of a settings extended description
        • After: image after of a settings extended description with slightly darker text
      • Plugin version text (3.47:1, expected 4.5:1)
        • Before: screenshot before of plugin version number
        • After: image
      • Toolbar text labels (e.g. the language code for the spellchecker toolbar item), (3.79:1, expected 4.5:1)
        • Before: screenshot before of spellchecker button, slightly lighter text
        • After: screenshot after with slightly darker text

Additionally, while running tests in dark mode (currently disabled because of contrast issues not included below):

  • Improved contrast of the "Plugins" settings sidebar divider.

@personalizedrefrigerator personalizedrefrigerator added desktop All desktop platforms accessibility Related to accessibility labels Oct 23, 2024
@personalizedrefrigerator
Copy link
Collaborator Author

CI errrors in this CI run should be fixed by #11224.

@laurent22
Copy link
Owner

Conflict on styles/index.scss

@personalizedrefrigerator
Copy link
Collaborator Author

The Android APK build failure should be fixed by #11294.

@laurent22
Copy link
Owner

Sorry, more conflicts now. Other than that it's ready to merge

@laurent22 laurent22 merged commit a616dc3 into laurent22:dev Nov 9, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Related to accessibility desktop All desktop platforms
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants