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.

Sign up for GitHub

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

Jump to bottom

SVG nested <title> should be an accessible name #685

Closed
juanca opened this issue Jul 7, 2020 · 5 comments · Fixed by eps1lon/dom-accessibility-api#324 or #695
Closed

SVG nested <title> should be an accessible name #685

juanca opened this issue Jul 7, 2020 · 5 comments · Fixed by eps1lon/dom-accessibility-api#324 or #695
Labels
released

Comments

@juanca
Copy link
Contributor

juanca commented Jul 7, 2020 •
edited
Loading

  • @testing-library/dom version: @testing-library/dom@7.9.0
  • Testing Framework and version: jest@25.1.0
  • DOM Environment: jsdom@16.2.0
  • Node: node@10.20.1

Relevant code or config:

import React from 'react';
import { render, screen } from '@testing-library/react';

it('finds an SVG with an aria label', () => {
  render((
    <svg aria-label="Accessible SVG Name" role="img" />
  ));

  expect(screen.getByRole('img', { name: 'Accessible SVG Name' })).toBeInTheDocument();
});

it('finds an SVG with a nested title', () => {
  render((
    <svg role="img">
      <title>Accessible SVG Name</title>
    </svg>
  ));

  expect(screen.getByRole('img', { name: 'Accessible SVG Name' })).toBeInTheDocument();
});

What you did:

Run the tests.

What happened:

Second test fails because <title> is not considered an accessible name. Here is some output:

src/components/icon/icon.test.jsx
  ✓ finds an SVG with an aria label (71ms)
  ✕ finds an SVG with a nested title (45ms)

  ● finds an SVG with a nested title

    TestingLibraryElementError: Unable to find an accessible element with the role "img" and name "Accessible SVG Name"

    Here are the accessible roles:

      img:

      Name "":
      <svg
        role="img"
      />

      --------------------------------------------------

    <body>
      <div>
        <svg
          role="img"
        >
          <title>
            Accessible SVG Name
          </title>
        </svg>
      </div>
    </body>

      17 |   ));
      18 | 
    > 19 |   expect(screen.getByRole('img', { name: 'Accessible SVG Name' })).toBeInTheDocument();
         |                 ^
      20 | });
      21 |

Reproduction:

Copy and paste relevant code and run!

Problem description:

As far as I know, a nested <title> should be considered an accessible name for a SVG.

Suggested solution:

I'm not sure how the existing code looks up accessible names but I would assume there is some code that figures out appropriate accessible names. A solution would be to extend the existing code to look for <title> -- and I assume <label><input /></label> might have a similar implementation.
@eps1lon
Copy link
Member

eps1lon commented Jul 8, 2020

As far as I know, a nested <title> should be considered an accessible name for a SVG.

Could you expand a bit why this should be the case (aria spec? html-aam? some svg mapping related spec?)? This would help formulating a PR for dom-accessibility-api which takes care of the accessible name.

@juanca
Copy link
Contributor Author

juanca commented Jul 8, 2020

From MDN:

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element.

From W3:

User agents must make the text content of selected 'title' and 'desc' elements available to platform accessibility APIs as part of the name and description computation for the parent element, as defined in the SVG Accessibility API Mappings [SVG-AAM] specification.

I'm bad at figuring out which sets of specs imply the "supported" specs so there is a chance I looked at the wrong one.

@juanca
Copy link
Contributor Author

juanca commented Jul 8, 2020

Also, I wouldn't mind trying to make the PR for the other repo. Just point me in the right direction. But if it is more effective to do it yourself, that is fine with me too. 👍

@eps1lon
Copy link
Member

eps1lon commented Jul 8, 2020

eps1lon/dom-accessibility-api#234 and eps1lon/dom-accessibility-api#248 made similar changes. Hope that helps. If you're having problems with the change don't hesitate to open a PR with your progress so far.

@juanca juanca mentioned this issue Jul 12, 2020
Merged
@eps1lon eps1lon mentioned this issue Jul 13, 2020
Merged
1 task
@kentcdodds
Copy link
Member

🎉 This issue has been resolved in version 7.20.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@juanca juanca mentioned this issue Jul 23, 2020
Merged
6 tasks
@Josh68 Josh68 mentioned this issue May 18, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
3 participants
@juanca @kentcdodds @eps1lon