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

Ignore SVG accessible name requirement when the svg is used as the image of a button with an accessible name #2224

Open
shunguoy opened this issue Mar 12, 2025 · 2 comments
Labels
Bug Something isn't working Carbon Carbon related issue engine Issues in the accessibility-checker-engine component

Comments

@shunguoy
Copy link
Contributor

When an svg is used as an image of a button, if the button already has an accessible name, the accessible name for the svg should not be required.
a test case in Carbon: https://react.carbondesignsystem.com/?path=/docs/experimental-fluid-components-unstable-fluidnumberinput--overview

Image

Is this similar to the requirement for an image if it's used for a button?

@shunguoy shunguoy added Bug Something isn't working engine Issues in the accessibility-checker-engine component Carbon Carbon related issue labels Mar 12, 2025
@philljenkins
Copy link
Contributor

philljenkins commented Mar 31, 2025

another instance in IBM Cloud

See https://cloud.ibm.com/observability/event-routing/routes/create

<li id="help-link" role="menuitem" class="cds--cloud-header-list__item cds--cloud-header-list__item--icon">`
   <ul role="menu" data-header-dropdown="" data-dropdown-type="navigation" class="cds--dropdown" aria-label="Help">
      <li role="menuitem" class="cds--dropdown-text cds--cloud-header-list__btn tooltip-widget" aria-label="Help" tabindex="0">
         <svg width="20px" height="20px" viewBox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path><circle cx="16" cy="23.5" r="1.5"></circle><path d="M17,8H15.5A4.49,4.49,0,0,0,11,12.5V13h2v-.5A2.5,2.5,0,0,1,15.5,10H17a2.5,2.5,0,0,1,0,5H15v4.5h2V17a4.5,4.5,0,0,0,0-9Z"></path><rect fill="none" width="32" height="32"></rect></svg>
         <span class="tooltip-content" style="width: 30px;">Help</span>
      </li>

Checker incorrectly reports the following violations:

Rule ID: svg_graphics_labelled
Reason ID: fail_acc_name

  • The SVG element has no accessible name
  • A non-decorative SVG element must have an accessible name

@shunguoy
Copy link
Contributor Author

shunguoy commented Apr 4, 2025

Triage: as a button child, because the button's children are presentational, the svg name check should be ignored.
As a child of

  • , the name requirement should be checked, the Author needs to mark with aria-hidden if it's decorative.

  • Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    Bug Something isn't working Carbon Carbon related issue engine Issues in the accessibility-checker-engine component
    Projects
    None yet
    Development

    No branches or pull requests

    2 participants