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

Add a11y checker #141

Closed

Conversation

mark-wiemer
Copy link
Contributor

@mark-wiemer mark-wiemer commented Jan 19, 2025

fixes #72

Tests are failing but at least now they're present. Fixing will require a theme change, so hoping we can at least review and add a basic check template for others to use in the meantime

~/myStuff/dev.luanti.org (fix-contributing-links)
$ npm test

> test
> playwright test


Running 1 test using 1 worker

  ✘  1 … should not have any automatically detectable accessibility issues (1.8s)


  1) a11y/a11y.test.ts:5:7 › homepage › should not have any automatically detectable accessibility issues 

    Error: expect(received).toEqual(expected) // deep equality

    - Expected  -   1
    + Received  + 163

    - Array []
    + Array [
    +   Object {
    +     "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
    +     "help": "Elements must meet minimum color contrast ratio thresholds",
    +     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=playwright",
    +     "id": "color-contrast",
    +     "impact": "serious",
    +     "nodes": Array [
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "bgColor": "#5a83a5",
    +               "contrastRatio": 2.23,
    +               "expectedContrastRatio": "4.5:1",
    +               "fgColor": "#f5b642",
    +               "fontSize": "12.0pt (16px)",
    +               "fontWeight": "normal",
    +               "messageKey": null,
    +             },
    +             "id": "color-contrast",
    +             "impact": "serious",
    +             "message": "Element has insufficient color contrast of 2.23 (foreground color: #f5b642, background color: #5a83a5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "<div id=\"site-notice\">",
    +                 "target": Array [
    +                   "#site-notice",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   Element has insufficient color contrast of 2.23 (foreground color: #f5b642, background color: #5a83a5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
    +         "html": "<a href=\"https://dev.luanti.org/about-this-site/\">the About page</a>",
    +         "impact": "serious",
    +         "none": Array [],
    +         "target": Array [
    +           "#site-notice > p > a",
    +         ],
    +       },
    +     ],
    +     "tags": Array [
    +       "cat.color",
    +       "wcag2aa",
    +       "wcag143",
    +       "TTv5",
    +       "TT13.c",
    +       "EN-301-549",
    +       "EN-9.1.4.3",
    +       "ACT",
    +     ],
    +   },
    +   Object {
    +     "description": "Ensure the order of headings is semantically correct",
    +     "help": "Heading levels should only increase by one",
    +     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/heading-order?application=playwright",
    +     "id": "heading-order",
    +     "impact": "moderate",
    +     "nodes": Array [
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": null,
    +             "id": "heading-order",
    +             "impact": "moderate",
    +             "message": "Heading order invalid",
    +             "relatedNodes": Array [],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   Heading order invalid",
    +         "html": "<h4 id=\"develop-the-core-engine\">Develop the core engine
    + <a class=\"anchor\" href=\"#develop-the-core-engine\">#</a></h4>",
    +         "impact": "moderate",
    +         "none": Array [],
    +         "target": Array [
    +           "#develop-the-core-engine",
    +         ],
    +       },
    +     ],
    +     "tags": Array [
    +       "cat.semantics",
    +       "best-practice",
    +     ],
    +   },
    +   Object {
    +     "description": "Ensure landmarks are unique",
    +     "help": "Landmarks should have a unique role or role/label/title (i.e. accessible name) combination",
    +     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/landmark-unique?application=playwright",
    +     "id": "landmark-unique",
    +     "impact": "moderate",
    +     "nodes": Array [
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "accessibleText": null,
    +               "role": "complementary",
    +             },
    +             "id": "landmark-is-unique",
    +             "impact": "moderate",
    +             "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "<aside class=\"book-toc\"><div class=\"book-toc-content\"><nav id=\"TableOfContents\"><ul><li><a href=\"#contribute-to-luanti\">Contribute to Luanti!</a><ul><li></li></ul></li><li><a href=\"#content-index\">Content Index</a></li></ul></nav></div></aside>",
    +                 "target": Array [
    +                   ".book-toc",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable",
    +         "html": "<aside class=\"book-menu\">",
    +         "impact": "moderate",
    +         "none": Array [],
    +         "target": Array [
    +           ".book-menu",
    +         ],
    +       },
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "accessibleText": null,
    +               "role": "navigation",
    +             },
    +             "id": "landmark-is-unique",
    +             "impact": "moderate",
    +             "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "<nav id=\"TableOfContents\"><ul><li><a href=\"#contribute-to-luanti\">Contribute to Luanti!</a><ul><li></li></ul></li><li><a href=\"#content-index\">Content Index</a></li></ul></nav>",
    +                 "target": Array [
    +                   ".book-toc-content > nav",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable",
    +         "html": "<nav>",
    +         "impact": "moderate",
    +         "none": Array [],
    +         "target": Array [
    +           ".book-menu-content > nav",
    +         ],
    +       },
    +     ],
    +     "tags": Array [
    +       "cat.semantics",
    +       "best-practice",
    +     ],
    +   },
    + ]

       8 |     const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
       9 |
    > 10 |     expect(accessibilityScanResults.violations).toEqual([]);
         |                                                 ^
      11 |   });
      12 | });
        at /home/markw/myStuff/dev.luanti.org/a11y/a11y.test.ts:10:49

  1 failed
    a11y/a11y.test.ts:5:7 › homepage › should not have any automatically detectable accessibility issues

@mark-wiemer
Copy link
Contributor Author

Working on "pinning" the issues now so we get clean output when only known issues are present. Will try to fix what I can without introducing significant changes. All within this PR, but happy to merge this as-is as well. Will add the checks to CI once the tests are passing.

Ref #72

@wsor4035
Copy link
Collaborator

wsor4035 commented Jan 20, 2025

probably should build the site and test that, rather than live, otherwise its testing the previous pr. would be nice if we could output the a light/dark artifact image

image

also testing every page or only certain ones?

@mark-wiemer
Copy link
Contributor Author

@wsor4035 for now just testing the home page, and yeah we should build the site. Should definitely test dark mode vs light mode too, should be easy to create a playwright.config.ts for that as the site respects browser settings.

marking this PR as a draft for now

@mark-wiemer mark-wiemer marked this pull request as draft January 20, 2025 02:26
@mark-wiemer
Copy link
Contributor Author

Closing in favor of #142

@mark-wiemer mark-wiemer deleted the fix-contributing-links branch January 20, 2025 04:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Standard accessibility checks
2 participants