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

feat(ByRole): Allow filter by disabled state #1221

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Mar 8, 2023

Part of a larger committment to unify APIs for /react-native and /react (which is just /react-dom at the moment)

What:

Enables ByRole(role, { disabled })

Why:

Makes writing tests for react-native and react-dom easier by removing barriers when changing the target platform that's being tested.

How:

Same patterns as for expanded, selected etc

Checklist:

@eps1lon eps1lon force-pushed the feat/byrole-disabled branch from 2209724 to eeebfc2 Compare March 8, 2023 16:19
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 8, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a42f42e:

Sandbox Source
react-testing-library-examples Configuration

@codecov
Copy link

codecov bot commented Mar 8, 2023

Codecov Report

Merging #1221 (a42f42e) into main (d09b3c2) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main     #1221   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           24        24           
  Lines         1038      1049   +11     
  Branches       346       353    +7     
=========================================
+ Hits          1038      1049   +11     
Flag Coverage Δ
node-14 100.00% <100.00%> (ø)
node-16 100.00% <100.00%> (ø)
node-18 100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/queries/role.ts 100.00% <100.00%> (ø)
src/role-helpers.js 100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

timdeschryver
timdeschryver previously approved these changes Mar 10, 2023
src/__tests__/ariaAttributes.js Outdated Show resolved Hide resolved
<button />
</div>`,
)
expect(getByRole('button', {disabled: true})).toBeInTheDocument()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just an idea, maybe for the completeness of this test, we should also add:

expect(queryByRole('button', {disabled: false})).not.toBeInTheDocument()

@@ -281,6 +281,29 @@ function computeAriaCurrent(element) {
)
}

const elementsSupportingDisabledAttribute = new Set([
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might be missing something, but this seems to me like something that should be defined in aria-query because it can change as part of the spec and having it here is like mixing the ARIA logic with our role implementation.
Wdyt?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I see we have something like this in jest-dom too, so it makes me think that this indeed shouldn't belong in one of our packages.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't want to put more stuff into aria-query. dom-accesibility-api makes more sense at this point. Feel free to raise a PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done: eps1lon/dom-accessibility-api#919
Please lmk if I can change stuff, I'm not happy with putting the change in the util file but I'm not familiar with the codebase, so I'm happy to change it.
Thanks!

? // https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings
true
: // https://www.w3.org/TR/wai-aria-1.1/#aria-disabled
element.getAttribute('aria-disabled') === 'true'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's worth adding this to jest-dom assertion too (I can do this on my own if you agree with me).
Having two libraries in the organization considering different things as disabled is quite confusing IMO.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Querying should not be used for assertions. For jest-dom i.e. there was a clear case why this wasn't as straight forward because it might contain footguns.

/dom: queries based on a11y tree
For assertions I'd rather remove the convenience query from jest-dom altogether in favor of an explicit query for just a11y disabled.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with that querying and asserting are two different operations.
Just so I'll understand, what are the footguns you're referring to?
I don't think removing the toBeDisabled assertion is a good idea as it's widely used but maybe I'm missing something.

Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
@jamesonhill
Copy link

Would be super helpful to have this

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

Successfully merging this pull request may close these issues.

4 participants