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

"Images must have alt text" on element template icon #4720

Open
barmac opened this issue Nov 22, 2024 · 0 comments
Open

"Images must have alt text" on element template icon #4720

barmac opened this issue Nov 22, 2024 · 0 comments
Labels
a11y backlog Queued in backlog bug Something isn't working good first issue Good for newcomers spring cleaning Could be cleaned up one day

Comments

@barmac
Copy link
Collaborator

barmac commented Nov 22, 2024

Describe the bug

Axe reports missing alt attribute on element template icon:

report
{
  "id": "image-alt",
  "impact": "critical",
  "tags": [
    "cat.text-alternatives",
    "wcag2a",
    "wcag111",
    "section508",
    "section508.22.a",
    "TTv5",
    "TT7.a",
    "TT7.b",
    "EN-301-549",
    "EN-9.1.1.1",
    "ACT"
  ],
  "description": "Ensures <img> elements have alternate text or a role of none or presentation",
  "help": "Images must have alternate text",
  "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/image-alt?application=axeAPI",
  "nodes": [
    {
      "any": [
        {
          "id": "has-alt",
          "data": null,
          "relatedNodes": [],
          "impact": "critical",
          "message": "Element does not have an alt attribute"
        },
        {
          "id": "aria-label",
          "data": null,
          "relatedNodes": [],
          "impact": "critical",
          "message": "aria-label attribute does not exist or is empty"
        },
        {
          "id": "aria-labelledby",
          "data": null,
          "relatedNodes": [],
          "impact": "critical",
          "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
        },
        {
          "id": "non-empty-title",
          "data": {
            "messageKey": "noAttr"
          },
          "relatedNodes": [],
          "impact": "critical",
          "message": "Element has no title attribute"
        },
        {
          "id": "presentational-role",
          "data": null,
          "relatedNodes": [],
          "impact": "critical",
          "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ],
      "all": [],
      "none": [],
      "impact": "critical",
      "html": "<img class=\"element-templates-list__item-icon\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzkwXzI0MjApIj4KPHBhdGggZD0iTTguMzM4MzUgOS45NTM2NUwxMC4zODk0IDEyLjAxMDRMOC4zMzI2MiAxNC4wNjcyTDkuMTQ2MTYgMTQuODc1TDEyLjAxMDcgMTIuMDEwNEw5LjE0NjE2IDkuMTQ1ODNMOC4zMzgzNSA5Ljk1MzY1WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTEyLjM0ODggOS45NTM2NUwxNC4zOTk4IDEyLjAxMDRMMTIuMzQzIDE0LjA2NzJMMTMuMTU2NiAxNC44NzVMMTYuMDIxMiAxMi4wMTA0TDEzLjE1NjYgOS4xNDU4M0wxMi4zNDg4IDkuOTUzNjVaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNMy45NzIgMTEuNDM3NUgxLjEyNTMzVjIuNzkyMTlMNy42NzM3NiA3LjMyMzk2QzcuNzY5NjcgNy4zOTA0OSA3Ljg4MzYgNy40MjYxNCA4LjAwMDMyIDcuNDI2MTRDOC4xMTcwNSA3LjQyNjE0IDguMjMwOTggNy4zOTA0OSA4LjMyNjg5IDcuMzIzOTZMMTQuODc1MyAyLjc5MjE5VjhIMTYuMDIxMlYyLjI3MDgzQzE2LjAyMTIgMS45NjY5NCAxNS45MDA0IDEuNjc1NDkgMTUuNjg1NiAxLjQ2MDYxQzE1LjQ3MDcgMS4yNDU3MiAxNS4xNzkyIDEuMTI1IDE0Ljg3NTMgMS4xMjVIMS4xMjUzM0MwLjgyMTQzMiAxLjEyNSAwLjUyOTk4NCAxLjI0NTcyIDAuMzE1MDk5IDEuNDYwNjFDMC4xMDAyMTQgMS42NzU0OSAtMC4wMjA1MDc4IDEuOTY2OTQgLTAuMDIwNTA3OCAyLjI3MDgzVjExLjQzNzVDLTAuMDIwNTA3OCAxMS43NDE0IDAuMTAwMjE0IDEyLjAzMjggMC4zMTUwOTkgMTIuMjQ3N0MwLjUyOTk4NCAxMi40NjI2IDAuODIxNDMyIDEyLjU4MzMgMS4xMjUzMyAxMi41ODMzSDMuOTcyVjExLjQzNzVaTTEzLjYxNDkgMi4yNzA4M0w4LjAwMDMyIDYuMTU1MjFMMi4zODU3NCAyLjI3MDgzSDEzLjYxNDlaIiBmaWxsPSIjRkM1RDBEIi8+CjxwYXRoIGQ9Ik00LjI4MjEgOS45NTM2NUw2LjMzMzE0IDEyLjAxMDRMNC4yNzYzNyAxNC4wNjcyTDUuMDg5OTEgMTQuODc1TDcuOTU0NDkgMTIuMDEwNEw1LjA4OTkxIDkuMTQ1ODNMNC4yODIxIDkuOTUzNjVaIiBmaWxsPSJibGFjayIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzkwXzI0MjAiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==\">",
      "target": [
        ".element-templates-list__item--selected > .element-templates-list__item-header > img"
      ],
      "failureSummary": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
    }
  ]
}

Steps to reproduce

  1. Select a template with an icon
  2. now this happens

Expected behavior

We should use empty alt="" as the icon is purely presentational.

Environment

  • OS: [e.g. MacOS 10.2, Windows 10]
  • Camunda Modeler Version: 5.30.0-rc.0 and previous
  • Execution Platform: [e.g. Camunda 7, Camunda 8]
  • Installed plug-ins: [...]

Additional context

No response

@barmac barmac added bug Something isn't working a11y labels Nov 22, 2024
@philippfromme philippfromme added backlog Queued in backlog good first issue Good for newcomers spring cleaning Could be cleaned up one day labels Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y backlog Queued in backlog bug Something isn't working good first issue Good for newcomers spring cleaning Could be cleaned up one day
Projects
None yet
Development

No branches or pull requests

2 participants