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

fix(menu-item): Improve keyboard navigability when href populated #8408

Merged
merged 7 commits into from
Dec 15, 2023
Merged

fix(menu-item): Improve keyboard navigability when href populated #8408

merged 7 commits into from
Dec 15, 2023

Conversation

macandcheese
Copy link
Contributor

Related Issue: #8135

Summary

@macandcheese macandcheese requested a review from a team as a code owner December 12, 2023 17:52
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 12, 2023
driskull
driskull approved these changes Dec 12, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

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

👍

Any way to test this?

macandcheese
macandcheese commented Dec 13, 2023
View reviewed changes
packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
await menuItem.click();
await page.waitForChanges();
const newUrl = page.url();
expect(newUrl).toEqual(originalUrl + testHref);
Copy link
Contributor Author

@macandcheese macandcheese Dec 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

@driskull @jcfranco any other ideas for how to test this? All I could come up with is checking for a named anchor with #, any href that changed the full url, I wasn't having luck testing against.

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 this works. I don’t think we can use Puppeteer’s waitForNavigation method, but this seems like a good alternative. If you were able to make the test fail when expected (e.g. removing/bypassing the fix), this should be good to go. 🚀

macandcheese
macandcheese commented Dec 13, 2023
View reviewed changes
packages/calcite-components/src/components/menu-item/menu-item.tsx
this.open = !this.open;
const { hasSubmenu, href, layout, open, submenuItems } = this;
const key = event.key;
const targetIsDropdown = event.target === this.dropdownActionEl;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@anveshmekala this look ok to you? I think at some point we might want to break the dropdown key / click and the anchor key / click apart so we can simplify some of this logic.

@macandcheese macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 13, 2023
@macandcheese macandcheese added this to the 2023 December Priorities milestone Dec 13, 2023
jcfranco
jcfranco approved these changes Dec 15, 2023
View reviewed changes
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

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

Noice! 👉🏼🔗

packages/calcite-components/src/components/menu-item/menu-item.tsx Show resolved Hide resolved
packages/calcite-components/src/components/menu-item/menu-item.tsx Show resolved Hide resolved
packages/calcite-components/src/components/menu-item/menu-item.tsx Show resolved Hide resolved
packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
await menuItem.click();
await page.waitForChanges();
const newUrl = page.url();
expect(newUrl).toEqual(originalUrl + testHref);
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 this works. I don’t think we can use Puppeteer’s waitForNavigation method, but this seems like a good alternative. If you were able to make the test fail when expected (e.g. removing/bypassing the fix), this should be good to go. 🚀

@macandcheese macandcheese removed the request for review from driskull December 15, 2023 23:11
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 15, 2023
@macandcheese macandcheese merged commit 5b44798 into main Dec 15, 2023
16 checks passed
@macandcheese macandcheese deleted the macandcheese/8135-allow-keyboard-navigation-menu-item-href branch December 15, 2023 23:25
@calcite-admin calcite-admin mentioned this pull request Dec 15, 2023
Merged
benelan pushed a commit that referenced this pull request Dec 19, 2023
@calcite-admin @github-actions
chore: release main (#8329)
44d4b83 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-design-tokens: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Features

* **font tokens:** Add font family fallbacks
([#8389](#8389))
([b2fd255](b2fd255))
* Update tokens for better documentation
([#8395](#8395))
([ff19630](ff19630))


### Bug Fixes

* **color tokens:** Fix errors in schema
([#8446](#8446))
([f36a90e](f36a90e))
* **color-context tokens:** Only apply when `.calcite-mode-auto` is
applied
([#8344](#8344))
([19de817](19de817))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
</details>

<details><summary>@esri/calcite-components: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Features

* Add `validation-message` and `validation-icon` attributes to form
components for new internal `calcite-input-message`
([#8305](#8305))
([a554cfd](a554cfd))
* **dropdown-item:** Add disabled support
([#8312](#8312))
([4c311c6](4c311c6))
* **list-item:** Add calciteListItemToggle event.
([#8433](#8433))
([1d2fa04](1d2fa04))
* **list:** Add `calciteListDragStart` and `calciteListDragEnd` events
for when a drag starts and ends.
([#8361](#8361))
([1314605](1314605))
* **list:** Add drag event details to `calciteListDragStart` and
`calciteListDragEnd` events
([#8438](#8438))
([e199c08](e199c08))
* Provide legacy CSS custom props for backwards compatibility
([#8355](#8355))
([b0f063e](b0f063e))


### Bug Fixes

* **action-menu:** Filter hidden or disabled actions via keyboard.
([#8336](#8336))
([11c0007](11c0007))
* **action-menu:** Fix closing action menu after a drag occurs
([#8339](#8339))
([dcb8548](dcb8548))
* **action-menu:** Keep internal popover open property in sync
([#8387](#8387))
([38dff7c](38dff7c))
* **dropdown-item:** Avoid hover/active styling when disabled
([#8398](#8398))
([35817dc](35817dc))
* **floating-ui:** Improve floating element performance
([#8409](#8409))
([4d8cfb8](4d8cfb8))
* **input-date-picker:** Ensure range input toggling is consistent
([#8414](#8414))
([cd92586](cd92586))
* **input-date-picker:** No longer emits redundant change event
([#8341](#8341))
([cd5b92b](cd5b92b))
* **input-date-picker:** Respect the numberingSystem property when
rendering the input
([#8383](#8383))
([395b538](395b538))
* **list-item:** Drag grid cell should be accessible via arrow keys.
([#8353](#8353))
([2718ab3](2718ab3))
* **menu-item:** Improve keyboard navigability when `href` populated
([#8408](#8408))
([5b44798](5b44798))
* **modal:** Ensure document overflow styles are properly restored when
multiple modals are closed/removed
([#8390](#8390))
([f2c6b09](f2c6b09))
* Replace "\n" to support Windows for tokens output
([#8352](#8352))
([02cf5d5](02cf5d5))
* **shell-panel:** Adds border at the start when slotted in `panel-end`
([#8314](#8314))
([2d1a1e2](2d1a1e2))
* **shell, shell-panel:** Support resizing shell panel when there is an
iframe slotted in shell content
([#8317](#8317))
([e0f69c9](e0f69c9))
* **stepper:** Emits `calciteStepperItemChange` event when switched to
first step
([#8422](#8422))
([508979f](508979f))
* **table-cell:** Fix background css variable
([#8439](#8439))
([9e5c59b](9e5c59b))
* **tab:** Prevent vertical scrollbar on content pane when the height of
outer elements are specified
([#8399](#8399))
([9e6d901](9e6d901))
* Use Stencil watchers instead of global attributes util
([#8407](#8407))
([c531d81](c531d81))


### Dependencies

* The following workspace dependencies were updated
  * devDependencies
    * @esri/calcite-design-tokens bumped from ^2.1.0-next.1 to ^2.1.0
</details>

<details><summary>@esri/calcite-components-angular: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-angular:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0
</details>

<details><summary>@esri/calcite-components-react: 2.1.0</summary>

##
[2.1.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected])
(2023-12-19)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^2.1.0-next.12 to ^2.1.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@calcite-admin calcite-admin mentioned this pull request May 14, 2024
Merged
@calcite-admin calcite-admin mentioned this pull request May 28, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull approved these changes

@jcfranco jcfranco jcfranco approved these changes

Assignees

@macandcheese macandcheese

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 December Priorities
Development

Successfully merging this pull request may close these issues.
3 participants
@macandcheese @jcfranco @driskull