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

fix(accordion): prevent opening of readonly accordion using keyboard #28865

Merged
merged 4 commits into from Jan 24, 2024

Conversation

mapsandapps
Copy link
Contributor

@mapsandapps mapsandapps commented Jan 22, 2024

Issue number: resolves #28344


What is the current behavior?

When an Accordion is inside an Accordion Group, and the Accordion Group is enabled and not readonly but the Accordion is disabled and/or readonly, it is possible to navigate to the accordion and open it using the keyboard. This should not be allowed, just like opening it on click is not allowed.

What is the new behavior?

  • A disabled Accordion inside an Accordion Group may not be opened via the keyboard.
  • A readonly Accordion inside an Accordion Group may not be opened via the keyboard.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@github-actions github-actions bot added the package: core @ionic/core package label Jan 22, 2024
@mapsandapps mapsandapps marked this pull request as ready for review January 22, 2024 16:32
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Implementation looks good, and tests overall look good. I think there a few redundant tests which I've commented on below.

await expect(accordion).toHaveClass(/accordion-collapsed/);
});

test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe pressing "Enter" on an interactive element will also dispatch a click event, so testing that the accordion does not expand on click should be sufficient here (i.e. we don't need to test click and Enter)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's not what I'm seeing. If I revert the bugfix I made in this PR and run the tests, the "should not open accordion via keyboard navigation when accordion is readonly" test fails, and no other tests fail. This is what we expect, since this is the one case this PR addresses. The other tests I added are for behavior that was already correct, but didn't have test coverage.

If the keyboard & mouse tests are redundant with each other, I would expect either both to pass or both to fail in any situation.

Put another way: if I removed the keyboard tests (which I think is what you're suggesting), all the tests would pass without my bugfix being applied.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh yes I see what you are saying! In main all we do is set pointer-events: none on the header which prevents click events. But we never disable the underlying element, so you can still tab to an ion-item and then hit "Enter".

Keeping these tests make sense 👍 Thanks for clarifying

Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

Thanks!

@mapsandapps mapsandapps added this pull request to the merge queue Jan 24, 2024
Merged via the queue into main with commit e10f49c Jan 24, 2024
46 checks passed
@mapsandapps mapsandapps deleted the FW-5370 branch January 24, 2024 20:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: readonly accordion can be opened using keyboard controls
2 participants