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

On the "About Queries" page, prefer links to external guides over external specifications. #1286

Open
DanKaplanSES opened this issue Aug 5, 2023 · 1 comment

Comments

@DanKaplanSES
Copy link

DanKaplanSES commented Aug 5, 2023

Is your feature request related to a problem? Please describe.
As a novice at writing accessible HTML, the testing-library documentation was straightforward until I reached the "About Queries" page. To be specific, the links in the Priority section's getByRole paragraph initially overwhelmed me, and I'd like to propose an idea that may help others like me in the future.

Here's an list of each link in the paragraph and a context relevant description:

  1. The accessibility tree link goes to a reference page that forks off to many more reference pages and specifications.
  2. The accessible name link goes to a 10+ page specification written in abstract language. The primary audience appears to be browser developers, not web developers.
  3. The list of roles forks off to more reference pages and specifications than the previous two.

As far as I can tell, none of these links directly show how to use the HTML role attribute. They seem more about accessibility in general.

Describe the solution you'd like
W3.org provides guides on some of these concepts (e.g., https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#naming_role_guidance ) written in relatively easy language. Even better, link to an article focused entirely on explaining the HTML role attribute. Ideally, the article would contain lots of examples.

Describe alternatives you've considered

  1. The end of the getByRole paragraph already includes an example, but in my humble opinion, it should also include the HTML of the queried button. Actually, I think this should be done in addition to the solution described above.
  2. To be honest, I think the documentation would improve if links 1 and 2 were removed and nothing else changed. Whether intended or not, they imply, "if you're unfamiliar with these concepts, here's where you should start." But personally, I think there are better places to start. If those links weren't there, I would have opened a new tab and found a user-friendly guide on these concepts.

Additional context
Apologies if this comes off complain-y. That's not my intention: I want to increase testing-library's adoption by reducing its learning curve. Oh, and I'm not personally struggling with anything I mentioned (anymore). I wrote this to help the next person that starts where I started.

@timdeschryver
Copy link
Member

timdeschryver commented Aug 14, 2023

Thanks for the feedback @DanKaplanSES

After giving it some thought, I think we tried to add too much information about ByRole queries in the priority section. Adding an additional example will make this bloaty (imho), and then we should also add examples for the rest of the queries.

Instead, I propose to only mention that ByRole is preferable in most cases and why, but refer to the ByRole page for more information.
This page can have an example at the top of the page (as it's done for the other types of queries).

The link you mentioned seems like another good addition to add on the ByRole page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants