Skip to content
This repository has been archived by the owner on Mar 8, 2023. It is now read-only.

fix(modal): include select shadow root children in focus wrap queries #689

Merged
merged 3 commits into from
Aug 23, 2021
Merged

fix(modal): include select shadow root children in focus wrap queries #689

merged 3 commits into from
Aug 23, 2021

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Aug 23, 2021

Related Ticket(s)

#558

Description

This PR updates the currentContains queries to include all shadow root children (except for the endSentinel in order to preserve expected focus wrap behavior. unsure if the startSentinel needs to be an exception as well)

observe that clicking on the space in the modal body between the copy and the footer buttons no longer causes focus to be automatically placed on the modal close button any longer, and keyboard focus wrap behavior remains unchanged

original behavior (focus is returned to close button after clicking on the empty space):

Screen.Recording.2021-08-23.at.12.28.26.mov

updated behavior (focus is not moved to the close button after clicking on the empty space):

Screen.Recording.2021-08-23.at.12.29.04.mov

Changelog

Changed

  • modal currentContains logic in handleBlur method

emyarod added 2 commits August 23, 2021 12:10
@emyarod
docs(modal): fix description
0f53bcd
@emyarod
fix(modal): differentiate b/t endSentinel and modal shadow root children
4587553 
* shadow root children do not appear in `this.contains(relatedTarget)` query
* `endSentinel` needs to be separate from other shadow root children in new `this.shadowRoot.contains(relatedTarget)` query
@emyarod emyarod requested review from asudoh and removed request for asudoh August 23, 2021 17:33
@emyarod emyarod mentioned this pull request Aug 23, 2021
Closed
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Aug 23, 2021 •
edited
Loading

Deploy preview created for Carbon Web Components - Vue:
https://carbon-web-components-vue.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/689/index.html

Built with commit: 89fcdb1bf07a04a00f0c9f7bd6765d97ff1858d5

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Aug 23, 2021 •
edited
Loading

Deploy preview created for Carbon Web Components - React:
https://carbon-web-components-react.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/689/index.html

Built with commit: 89fcdb1bf07a04a00f0c9f7bd6765d97ff1858d5

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Aug 23, 2021 •
edited
Loading

Deploy preview created for Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/689/index.html

Built with commit: 89fcdb1bf07a04a00f0c9f7bd6765d97ff1858d5

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Aug 23, 2021 •
edited
Loading

Deploy preview created for Carbon Web Components - Angular:
https://carbon-web-components-angular.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/689/index.html

Built with commit: 89fcdb1bf07a04a00f0c9f7bd6765d97ff1858d5

jeffchew
jeffchew approved these changes Aug 23, 2021
View reviewed changes
Copy link
Member

@jeffchew jeffchew left a comment

Choose a reason for hiding this comment

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

LGTM!

@jeffchew jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Aug 23, 2021
@kodiakhq kodiakhq bot merged commit a4c6ba8 into carbon-design-system:master Aug 23, 2021
@emyarod emyarod deleted the 558-fix/modal-focus-wrap-shadow-root-relatedTarget branch August 23, 2021 20:05
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jeffchew jeffchew jeffchew approved these changes

Assignees
No one assigned
Labels
Ready to merge Label for the pull requests that are ready to merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@emyarod @ibmdotcom-bot @jeffchew