EqualifyEverything / equalify

A web accessibility platform, managing issues by integrating with A11Y services.
https://equalify.app
Other
117 stars 21 forks source link

Can't Filter By Message Type #375

Closed bbertucc closed 3 months ago

bbertucc commented 4 months ago

We can't currently filter by message type. There are currently three message types: violation, warning, and error.

Some users want to create reports of just errors to see where the scan failed.

Other users just want to see errors and warnings so they can know what to review.

wilsuriel03 commented 4 months ago

@bbertucc , you might want to ping chris on this. The API does not provide that info to ingest in the front end.

bbertucc commented 4 months ago

@heythisischris could you output type?

The schema has a type for messages that should be output for use in filtering. It's not displayed elsewhere (though it probably should be displayed).

After you incorporate it into the API, I will switch this back to Adonis.

heythisischris commented 3 months ago

This feature is complete! @wilsuriel03, you'll be able to add a new filter attribute called types.

Quick note: to prevent overloading our database, you must include at least one property or URL before filtering down by types.

These are the filter values for types:

[
     {"type": "types", "label": "Violation", "value": "violation"},
     {"type": "types", "label": "Warning", "value": "warning"},
     {"type": "types", "label": "Error", "value": "error"}
]

Here's an example of an appropriate filter object:

Reports (table) -> Filters (column)

[{"type": "types", "label": "Error", "value": "error"}, {"type": "properties", "label": "Equalify Sitemap", "value": "99735071-94a6-4530-a226-8be2f986f845"}]

And here is an example snippet of GET /results/all output (we're now including type):

{
    "messages": [
        {
            "id": "7467ecaf-e767-415f-9ce0-bbb8582de659",
            "message": "Color Contrast Rule: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. Elements must meet minimum color contrast ratio thresholds. More information: https://dequeuniversity.com/rules/axe/4.9/color-contrast?application=axe-puppeteer",
            "type": "error",
            "equalifiedCount": 0,
            "activeCount": 108,
            "totalCount": 108
        },
        {
            "id": "8a3f54a7-8199-4d36-8b0d-277c4c1503a1",
            "message": "Element's background color could not be determined due to a background image",
            "type": "error",
            "equalifiedCount": 0,
            "activeCount": 64,
            "totalCount": 64
        }
    ]
}
bbertucc commented 3 months ago

Sweet! Assigning to @wilsuriel03 to add the type filter

wilsuriel03 commented 3 months ago

@bbertucc , can you show me what is the current implementation for this on the managed. I want to see how the front end handles the selection of the type

bbertucc commented 3 months ago

@wilsuriel03 it just needs to be another option in the autocomplete dropdown. here is what we do: https://www.loom.com/share/f0d088b9f56a4d9498b0f2d23a128eee?sid=aea4f3ff-4698-41f9-a8c3-b8ba66f5e203

wilsuriel03 commented 3 months ago

complete ✅

bbertucc commented 3 months ago

Reassigning to me to review.

bbertucc commented 3 months ago

@heythisischris it doesn't look like we're getting warning content into the scan. For instance, if I send "https://decubing" to the scan in dashboard.equalify.app, and then filter by "warning" type, I get no results reported.

Looking at the raw data from scan.equalify.app, I see there are warnings associated with that page. See these results from scan.equalify.app:

{
    "status": "completed",
    "result": {
        "urls": [
            {
                "urlId": 1,
                "url": "https://decubing.com/"
            }
        ],
        "messages": [
            {
                "message": "Landmark Banner Is Top Level Rule: Ensures the banner landmark is at top level. Banner landmark should not be contained in another landmark. More information: https://dequeuniversity.com/rules/axe/4.9/landmark-banner-is-top-level?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    1
                ],
                "type": "violation"
            },
            {
                "message": "The banner landmark is contained in another landmark.",
                "relatedTagIds": [
                    2,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    1
                ],
                "type": "violation"
            },
            {
                "message": "Landmark Contentinfo Is Top Level Rule: Ensures the contentinfo landmark is at top level. Contentinfo landmark should not be contained in another landmark. More information: https://dequeuniversity.com/rules/axe/4.9/landmark-contentinfo-is-top-level?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    2
                ],
                "type": "violation"
            },
            {
                "message": "The contentinfo landmark is contained in another landmark.",
                "relatedTagIds": [
                    2,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    2
                ],
                "type": "violation"
            },
            {
                "message": "Landmark No Duplicate Banner Rule: Ensures the document has at most one banner landmark. Document should not have more than one banner landmark. More information: https://dequeuniversity.com/rules/axe/4.9/landmark-no-duplicate-banner?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    3
                ],
                "type": "violation"
            },
            {
                "message": "Document has more than one banner landmark",
                "relatedTagIds": [
                    2,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    3
                ],
                "type": "violation"
            },
            {
                "message": "Landmark No Duplicate Contentinfo Rule: Ensures the document has at most one contentinfo landmark. Document should not have more than one contentinfo landmark. More information: https://dequeuniversity.com/rules/axe/4.9/landmark-no-duplicate-contentinfo?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    4
                ],
                "type": "violation"
            },
            {
                "message": "Document has more than one contentinfo landmark",
                "relatedTagIds": [
                    2,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    4
                ],
                "type": "violation"
            },
            {
                "message": "Landmark Unique Rule: Landmarks should have a unique role or role/label/title (i.e. accessible name) combination. Ensures landmarks are unique. More information: https://dequeuniversity.com/rules/axe/4.9/landmark-unique?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    3,
                    4
                ],
                "type": "violation"
            },
            {
                "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable",
                "relatedTagIds": [
                    2,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    3,
                    4
                ],
                "type": "violation"
            },
            {
                "message": "Page Has Heading One Rule: Ensure that the page, or at least one of its frames contains a level-one heading. Page should contain a level-one heading. More information: https://dequeuniversity.com/rules/axe/4.9/page-has-heading-one?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    3,
                    4
                ],
                "relatedNodeIds": [
                    5
                ],
                "type": "violation"
            },
            {
                "message": "Color Contrast Rule: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. Elements must meet minimum color contrast ratio thresholds. More information: https://dequeuniversity.com/rules/axe/4.9/color-contrast?application=axe-puppeteer",
                "relatedTagIds": [
                    1,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12
                ],
                "relatedNodeIds": [
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13
                ],
                "type": "warning"
            },
            {
                "message": "Element's background color could not be determined due to a background gradient",
                "relatedTagIds": [
                    2,
                    5,
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12
                ],
                "relatedNodeIds": [
                    6,
                    7,
                    8,
                    9,
                    10,
                    11,
                    12,
                    13
                ],
                "type": "warning"
            }
        ],
        "tags": [
            {
                "tagId": 1,
                "tag": "axe-core Rule"
            },
            {
                "tagId": 2,
                "tag": "axe-core Message"
            },
            {
                "tagId": 3,
                "tag": "cat.semantics"
            },
            {
                "tagId": 4,
                "tag": "best-practice"
            },
            {
                "tagId": 5,
                "tag": "cat.color"
            },
            {
                "tagId": 6,
                "tag": "wcag2aa"
            },
            {
                "tagId": 7,
                "tag": "wcag143"
            },
            {
                "tagId": 8,
                "tag": "TTv5"
            },
            {
                "tagId": 9,
                "tag": "TT13.c"
            },
            {
                "tagId": 10,
                "tag": "EN-301-549"
            },
            {
                "tagId": 11,
                "tag": "EN-9.1.4.3"
            },
            {
                "tagId": 12,
                "tag": "ACT"
            }
        ],
        "nodes": [
            {
                "nodeId": 1,
                "html": "<header class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\" style=\"padding-top:2.5em;padding-bottom:2.5em\">",
                "targets": [
                    ".wp-container-core-group-is-layout-1"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 2,
                "html": "<footer class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-14 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\">",
                "targets": [
                    ".wp-container-core-group-is-layout-14"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 3,
                "html": "<header class=\"wp-block-template-part\">",
                "targets": [
                    ".wp-site-blocks > header"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 4,
                "html": "<footer class=\"wp-block-template-part\">",
                "targets": [
                    ".wp-site-blocks > footer"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 5,
                "html": "<html lang=\"en-US\" dir=\"ltr\">",
                "targets": [
                    "html"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 6,
                "html": "<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.672rem, 1.672rem + ((1vw - 0.2rem) * 2.142), 2.85rem);\">Dependable Web Solutions</h2>",
                "targets": [
                    ".wp-block-column.is-vertically-aligned-center.wp-block-column-is-layout-flow:nth-child(1) > h2"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 7,
                "html": "<p style=\"font-size:clamp(1.092rem, 1.092rem + ((1vw - 0.2rem) * 1.105), 1.7rem);\"><strong>Decubing develops solutions you can trust.</strong>&nbsp;We value efficiency and transparency, delivering rock-solid web based tools and communication assets.</p>",
                "targets": [
                    ".wp-block-column.is-vertically-aligned-center.wp-block-column-is-layout-flow:nth-child(1) > p:nth-child(2)"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 8,
                "html": "<strong>Decubing develops solutions you can trust.</strong>",
                "targets": [
                    "p:nth-child(2) > strong"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 9,
                "html": "<p>Work with Decubing today:</p>",
                "targets": [
                    ".wp-block-column.is-vertically-aligned-center.wp-block-column-is-layout-flow:nth-child(1) > p:nth-child(3)"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 10,
                "html": "<h2 class=\"wp-block-heading has-text-align-center\">Featured Projects</h2>",
                "targets": [
                    ".has-vivid-cyan-blue-to-vivid-purple-gradient-background.alignfull.has-background > .has-text-align-center"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 11,
                "html": "<a href=\"https://decubing.com\" rel=\"home\" aria-current=\"page\">Decubing Web Services</a>",
                "targets": [
                    "a[href$=\"decubing.com\"]"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 12,
                "html": "<span class=\"wp-block-navigation-item__label\">Accessibility Statement</span>",
                "targets": [
                    "#modal-2-content > .wp-block-navigation__container.is-responsive.wp-block-navigation > .wp-block-navigation-item.wp-block-navigation-link:nth-child(1) > .wp-block-navigation-item__content > .wp-block-navigation-item__label"
                ],
                "relatedUrlId": 1,
                "equalified": false
            },
            {
                "nodeId": 13,
                "html": "<span class=\"wp-block-navigation-item__label\">Contact Us</span>",
                "targets": [
                    ".wp-block-navigation-item.wp-block-navigation-link:nth-child(2) > .wp-block-navigation-item__content[href$=\"contact/\"] > .wp-block-navigation-item__label"
                ],
                "relatedUrlId": 1,
                "equalified": false
            }
        ]
    }
}
heythisischris commented 3 months ago

@bbertucc After running multiple scans, I don't see the "warning" type in any of the results. If we did import it, we'd be able to correctly filter by it. I only see violation and error messages in our database.

joelhsmith commented 3 months ago

When I go to "Add filter" I am not seeing the "Types" filter in the modal. Is it in the wild? Or not deployed yet?

bbertucc commented 3 months ago

This is not deployed on the version you're using yet, @joelhsmith. About to send you the updated version URL!

bbertucc commented 3 months ago

This is now fixed.