Giter VIP home page Giter VIP logo

Comments (4)

tskarhed avatar tskarhed commented on September 28, 2024

Update:
I have tried fixing aria-activedescendant='' and React's useId :. None of them are at fault. Could this have to do with something faulty configured with pa11y?

 β€’ ARIA attributes must conform to valid values
   (https://dequeuniversity.com/rules/axe/4.4/aria-valid-attr-value?application=axeAPI)

   (#week-start-input)

   <input class="css-8tk2dk-input-input" placeholder="Choose starting day of
   the week" aria-autocomplete="list" aria-controls="downshift---rj---menu"
   aria-expanded="false" aria-labelledby="downshift---rk---label"
   autocomplete="off" id="week-start-input"...

It would be super helpful if it mentioned which attribute is invalid, so I actually could fix it.

from axe-core.

straker avatar straker commented on September 28, 2024

Thanks for the issue. Is the site you're seeing the issue on public that I could test it? Without that it may be hard to figure out what we can do. I did notice that the deque university help page link listed in the output points to version 4.4. Axe-core is currently up to 4.10 (https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI), so I recommend that if you have control of the version that you try with the latest version of axe-core.

from axe-core.

tskarhed avatar tskarhed commented on September 28, 2024

@straker Thanks. The real issue was that aria-labelledby pointed to an element that didn't exist. It did take me quite some time to come to that conclusion. Do newer versions display which is the affected aria attribute?

We're running an older version of pa11y (which probably uses axe-core 4.4). The latest seem to be at 4.8.

from axe-core.

straker avatar straker commented on September 28, 2024

Letting aria-valid-attr-value display when an id is missing from the page was added back in 2019, which would have been in version v3 of axe-core. It doesn't look like p11y is outputing the failure summary for the issue. For example when running the code with axe-core itself, it gives this for the entire issue.

{
    "id": "aria-valid-attr-value",
    "impact": "critical",
    "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
    ],
    "description": "Ensure all ARIA attributes have valid values",
    "help": "ARIA attributes must conform to valid values",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
    "nodes": [
        {
            "any": [],
            "all": [
                {
                    "id": "aria-valid-attr-value",
                    "data": {
                        "messageKey": "noId",
                        "needsReview": "aria-labelledby=\"downshift-_rc_-label\""
                    },
                    "relatedNodes": [],
                    "impact": "critical",
                    "message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
                }
            ],
            "none": [],
            "impact": "critical",
            "html": "<input class=\"css-8tk2dk-input-input\" aria-activedescendant=\"\" aria-autocomplete=\"list\" aria-controls=\"downshift-_rb_-menu\" aria-expanded=\"false\" aria-labelledby=\"downshift-_rc_-label\" autocomplete=\"off\">",
            "element": {},
            "target": [
                "input"
            ],
            "failureSummary": "Fix all of the following:\n  ARIA attribute element ID does not exist on the page: aria-labelledby=\"downshift-_rc_-label\""
        }
    ]
}

from axe-core.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.