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

icons no longer have presentation role #21132

Closed
2 tasks done
Jeffhabs opened this issue May 21, 2020 · 2 comments
Closed
2 tasks done

icons no longer have presentation role #21132

Jeffhabs opened this issue May 21, 2020 · 2 comments
Labels
accessibility a11y component: SvgIcon The React component.

Comments

@Jeffhabs
Copy link

Sorry if this isn't a bug, but I couldn't find any reference to it in any change-log. Upgrading to material icons I've noticed my tests are failing that are related to getByRole('presentation')

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

On "@material-ui/icons": "4.5.1" version an icon will have an svg tag like so....

<svg
   aria-hidden="true"
   class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
    focusable="false"
    role="presentation"
   viewBox="0 0 24 24"
   >
  <path
      d="M15,16H13V8H15M11,16H9V8H11M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
   />
 </svg>

note the present role being "presentation"

Expected Behavior 🤔

On "@material-ui/icons": "4.9.1", an icon will no longer have the presentation role

<svg
  aria-hidden="true"
  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
  focusable="false"
  viewBox="0 0 24 24"
   >
     <path
       d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z"
      />
</svg>

Was this intentional? If so did I miss the change log? Would be nice to know about these things, I have bunch of broken tests that depend on getByRole('presentation')

@oliviertassinari
Copy link
Member

oliviertassinari commented May 21, 2020

See #20307, it was an invalid role for a <svg> element.

@oliviertassinari
Copy link
Member

oliviertassinari commented May 21, 2020

If your icon is supposed to be read by screen readers, give it a title. In any cases, your query was wrong.

What's your use case for this test?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: SvgIcon The React component.
Projects
None yet
Development

No branches or pull requests

2 participants