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.

Sign up for GitHub

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

Jump to bottom

Bump jest-axe from 6.0.0 to 7.0.0 in /frontend #2763

Merged
merged 2 commits into from
Nov 7, 2022
Merged

Bump jest-axe from 6.0.0 to 7.0.0 in /frontend #2763

merged 2 commits into from
Nov 7, 2022

Conversation

dependabot[bot]
Copy link
Contributor

@dependabot dependabot bot commented on behalf of github Nov 7, 2022 •
edited
Loading

Bumps jest-axe from 6.0.0 to 7.0.0.

Release notes

Sourced from jest-axe's releases.

Release 7.0.0

Update main dependencies:

  • axe-core from version 4.4.1 to 4.5.1 - thanks @​jbchr.
  • chalk updated from version 4.1.0 to 4.1.2
  • jest-matcher-utils updated from version 27.0.2 to 29.2.2

Breaking changes:

  • axe-core includes new rules and checks which may need to be fixed or turned off
  • axe-core help messages updates will change your snapshot output
  • no longer support Node.js 10 and 12

Release version 6.0.1

Fix "Not implemented: window.computedStyle(elt, pseudoElt)" errors.

Changelog

Sourced from jest-axe's changelog.

7.0.0

Update main dependencies:

  • axe-core from version 4.4.1 to 4.5.1 - thanks @​jbchr.
  • chalk updated from version 4.1.0 to 4.1.2
  • jest-matcher-utils updated from version 27.0.2 to 29.2.2

Breaking changes:

  • axe-core includes new rules and checks which may need to be fixed or turned off
  • axe-core help messages updates will change your snapshot output
  • no longer support Node.js 10 and 12

6.0.1

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot dependabot bot added dependencies Pull requests that update a dependency file javascript Pull requests that update Javascript code labels Nov 7, 2022
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/frontend/jest-axe-7.0.0 branch 8 times, most recently from 34c5024 to 81bf7b3 Compare November 7, 2022 09:35
@dependabot
Bump jest-axe from 6.0.0 to 7.0.0 in /frontend
17f7f1d 
Bumps [jest-axe](https://github.com/nickcolley/jest-axe) from 6.0.0 to 7.0.0.
- [Release notes](https://github.com/nickcolley/jest-axe/releases)
- [Changelog](https://github.com/NickColley/jest-axe/blob/main/CHANGELOG.md)
- [Commits](NickColley/jest-axe@v6.0.0...v7.0.0)

---
updated-dependencies:
- dependency-name: jest-axe
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
@dependabot dependabot bot force-pushed the dependabot/npm_and_yarn/frontend/jest-axe-7.0.0 branch from 81bf7b3 to 17f7f1d Compare November 7, 2022 10:08
@Vinnl
Copy link
Collaborator

Vinnl commented Nov 7, 2022

Hmm, unfortunately there's not too much information on why the violation of the new rule added in axe-core's new release affects us. jest-axe doesn't show the related nodes, but I was able to access them by copying node_modules/axe-core/axe.js into /frontend/public, then adding <Head><script src="/axe.js"></script></Head> to _app.page.tsx and running this in the console with the site loaded: axe.run().then(results => console.log({results}));

I then got the following violation:

{
  "id": "aria-required-children",
  "impact": "critical",
  "tags": [
    "cat.aria",
    "wcag2a",
    "wcag131"
  ],
  "description": "Ensures elements with an ARIA role that require child roles contain them",
  "help": "Certain ARIA roles must contain particular children",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.5/aria-required-children?application=axeAPI",
  "nodes": [
    {
      "any": [
        {
          "id": "aria-required-children",
          "data": {
            "messageKey": "unallowed"
          },
          "relatedNodes": [
            {
              "html": "<div id=\"react-aria-3-tabpanel-use-cases/shopping\" aria-labelledby=\"react-aria-8-tab-use-cases/shopping\" tabindex=\"0\" role=\"tabpanel\" class=\"Carousel_content__ARUFX\">",
              "target": [
                "#react-aria-3-tabpanel-use-cases\\/shopping"
              ]
            }
          ],
          "impact": "critical",
          "message": "Element has children which are not allowed (see related nodes)"
        },
        {
          "id": "aria-busy",
          "data": null,
          "relatedNodes": [],
          "impact": "serious",
          "message": "Element has no aria-busy=\"true\" attribute"
        }
      ],
      "all": [],
      "none": [],
      "impact": "critical",
      "html": "<div id=\"react-aria-3\" aria-label=\"Use ⁨Firefox Relay⁩ for:\" role=\"tablist\" aria-orientation=\"vertical\" class=\"Carousel_sections__sCXLY Carousel_selected-tab-0__4L_XA\">",
      "target": [
        "#react-aria-3"
      ],
      "failureSummary": "Fix any of the following:\n  Element has children which are not allowed (see related nodes)\n  Element has no aria-busy=\"true\" attribute"
    }
  ]
}

Apparently the tabpanel is not allowed. I think that might have to do with the tabpanel's aria-labelledby being wrong, which is due to our overriding the IDs of tabs. However, even without that override, I still get the above error.

I'll probably leave my analysis at that for now.

@Vinnl
Copy link
Collaborator

Vinnl commented Nov 7, 2022

And of course writing that down triggered the answer :) A tabpanel shouldn't be a direct child of a tablist, which makes sense. Seen in this example. fd5dd11

Vinnl
Vinnl approved these changes Nov 7, 2022
View reviewed changes
Copy link
Collaborator

@Vinnl Vinnl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, it found a new inaccessible thing and I got to fix that :)

@dependabot merge

@dependabot dependabot bot merged commit 8acc6ad into main Nov 7, 2022
@dependabot dependabot bot deleted the dependabot/npm_and_yarn/frontend/jest-axe-7.0.0 branch November 7, 2022 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Vinnl Vinnl Vinnl approved these changes

Assignees
No one assigned
Labels
dependencies Pull requests that update a dependency file javascript Pull requests that update Javascript code
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@Vinnl