fix(left-nav): fix focus trapping #11842

andy-blum · 2024-05-31T13:39:13Z

Related Ticket(s)

https://jsw.ibm.com/browse/ADCMS-5191

Description

Fixes the focus trapping on the left-nav component

Changelog

Changed

Fixes the focus trapping on the left-nav component

Testing Instructions

Open the masthead story
Reduce viewport width to get the mobile version of the nav
Open the left-nav with the keyboard
Ensure focus moves to the first item in the left-nav on open
Ensure focus is trapped in the left-nav, cycling between the close button & last link/button element in both directions.

andy-blum · 2024-05-31T13:43:08Z

packages/carbon-web-components/src/components/ui-shell/side-nav.ts

-          ) as HTMLElement
-        )?.focus();
-      }
-    }


While we change the value of this.expanded here, we then immediately wait for the resolution of this.update from the component's update/render cycle.

this.update is already resolved from the last run of the component lifecycle and our current function hasn't been off the main thread to let the component start a new update.

Since we're awaiting a resolved promise, we immediate move on to try to focus on elements that are not yet in the DOM.

ibmdotcom-bot · 2024-05-31T13:43:40Z

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11842/index.html

Built with commit: ab93ccadbc7c75ccf5ec43e87736da1ddc012400

andy-blum · 2024-05-31T13:43:52Z

packages/carbon-web-components/src/components/ui-shell/side-nav.ts

+          this.querySelector(
+            (this.constructor as typeof CDSSideNav).selectorNavItems
+          ) as HTMLElement
+        )?.focus();


Moving the logic out of the event listener and into the update lifecycle ensures we focus after the seletorNavItems are added to the DOM.

andy-blum · 2024-05-31T13:44:40Z

packages/web-components/src/components/masthead/left-nav.ts

+      await Promise.all([
+        import('./left-nav-name'),
+        import('./left-nav-menu'),
+        import('./left-nav-menu-section'),
+        import('./left-nav-menu-item'),
+        import('./left-nav-menu-category-heading'),
+        import('./left-nav-overlay')
+      ]);


We don't want to await each of these in series, we should see a slight perf boost by awaiting in parallel.

andy-blum · 2024-05-31T13:46:18Z

packages/web-components/src/components/masthead/left-nav.ts

-        import('./left-nav-menu-category-heading');
-        import('./left-nav-overlay');
-        this._importedSideNav = true;
-      }


super.updated(), called at the top of this function, is where we try to set focus. We have to make sure all our components are loaded before that, so this section is moved to willUpdate() to prioritize loading in the components we need.

jkaeser

Code changes are looking good, but CI and deploy previews are failing.

ibmdotcom-bot · 2024-05-31T19:20:15Z

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

Built with commit: ab93ccadbc7c75ccf5ec43e87736da1ddc012400

ibmdotcom-bot · 2024-05-31T19:31:44Z

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11842/index.html

Built with commit: ab93ccadbc7c75ccf5ec43e87736da1ddc012400

ibmdotcom-bot · 2024-05-31T19:31:45Z

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11842/index.html

Built with commit: ab93ccadbc7c75ccf5ec43e87736da1ddc012400

jkaeser

Works beautifully! +1 from me

andy-blum · 2024-05-31T20:39:23Z

This is on hold pending a successful test of #11839's deploy preview CDN on ibm.com

ibmdotcom-bot · 2024-06-06T18:52:42Z

Deploy preview created for package IBM.com Web Components Deploy Preview CDN:
https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11842/index.html

Built with commit: ab93ccadbc7c75ccf5ec43e87736da1ddc012400

andy-blum · 2024-06-10T13:48:40Z

This is ready now. I tested successfully by doing a chrome devtools override and replacing dds-masthead-container with c4d-masthead-container and using the CDN deploy preview.

github-actions · 2024-07-23T17:32:13Z

Hey there! This issue/pull request was referenced in recently released v2.11.0.

github-actions · 2024-07-23T17:32:13Z

Hey there! This issue/pull request was referenced in recently released v2.11.0.

https://jsw.ibm.com/browse/ADCMS-5191 Fixes the focus trapping on the left-nav component **Changed** - Fixes the focus trapping on the left-nav component - Open the masthead story - Reduce viewport width to get the mobile version of the nav - Open the left-nav with the keyboard - Ensure focus moves to the first item in the left-nav on open - Ensure focus is trapped in the left-nav, cycling between the close button & last link/button element in both directions.

andy-blum added 2 commits May 30, 2024 17:02

fix(left-nav): wait for component to load, then focus in

887f078

fix(left-nav): watch for correct event

a840177

andy-blum requested a review from a team as a code owner May 31, 2024 13:39

andy-blum requested review from IgnacioBecerra and sangeethababu9223 and removed request for a team May 31, 2024 13:39

andy-blum commented May 31, 2024

View reviewed changes

andy-blum requested review from m4olivei and jkaeser May 31, 2024 13:46

andy-blum changed the title ~~Fix/masthead focus trap v2~~ fix(left-nav): fix focus trapping May 31, 2024

jkaeser reviewed May 31, 2024

View reviewed changes

fix(left-nav): format & lint

f295746

jkaeser approved these changes May 31, 2024

View reviewed changes

fix(left-nav): move import logic

bf99f81

andy-blum added the test: CDN preview used for generating @carbon/ibmdotcom-web-components CDN for testing label Jun 6, 2024

andy-blum added 2 commits June 6, 2024 14:22

fix(left-nav): fix focus trapping

a8a09d9

Merge branch 'main' into fix/masthead-focus-trap-v2

28464bb

Merge branch 'main' into fix/masthead-focus-trap-v2

3f7ec94

kennylam added 2 commits June 10, 2024 11:22

Merge branch 'main' into fix/masthead-focus-trap-v2

e54bfca

Merge branch 'main' into fix/masthead-focus-trap-v2

ab93cca

kennylam added the Ready to merge Label for the pull requests that are ready to merge label Jun 10, 2024

kodiakhq bot merged commit 5f824ec into carbon-design-system:main Jun 10, 2024
18 of 21 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(left-nav): fix focus trapping #11842

fix(left-nav): fix focus trapping #11842

andy-blum commented May 31, 2024 •

edited

Loading

andy-blum May 31, 2024

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

andy-blum May 31, 2024

andy-blum May 31, 2024

andy-blum May 31, 2024

jkaeser left a comment

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

jkaeser left a comment

andy-blum commented May 31, 2024

ibmdotcom-bot commented Jun 6, 2024 •

edited

Loading

andy-blum commented Jun 10, 2024

github-actions bot commented Jul 23, 2024

github-actions bot commented Jul 23, 2024

fix(left-nav): fix focus trapping #11842

fix(left-nav): fix focus trapping #11842

Conversation

andy-blum commented May 31, 2024 • edited Loading

Related Ticket(s)

Description

Changelog

Testing Instructions

andy-blum May 31, 2024

Choose a reason for hiding this comment

ibmdotcom-bot commented May 31, 2024 • edited Loading

andy-blum May 31, 2024

Choose a reason for hiding this comment

andy-blum May 31, 2024

Choose a reason for hiding this comment

andy-blum May 31, 2024

Choose a reason for hiding this comment

jkaeser left a comment

Choose a reason for hiding this comment

ibmdotcom-bot commented May 31, 2024 • edited Loading

ibmdotcom-bot commented May 31, 2024 • edited Loading

ibmdotcom-bot commented May 31, 2024 • edited Loading

jkaeser left a comment

Choose a reason for hiding this comment

andy-blum commented May 31, 2024

ibmdotcom-bot commented Jun 6, 2024 • edited Loading

andy-blum commented Jun 10, 2024

github-actions bot commented Jul 23, 2024

github-actions bot commented Jul 23, 2024

andy-blum commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented May 31, 2024 •

edited

Loading

ibmdotcom-bot commented Jun 6, 2024 •

edited

Loading