feat: Allow exemptions to focus trapping (#4609)

* Allow exemptions to focus trapping * Target optional * Add test
BrightspaceUI · Apr 26, 2024 · e18c0ec · e18c0ec
1 parent 6f1d0fa
commit e18c0ec
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/components/focus-trap/focus-trap.js b/components/focus-trap/focus-trap.js
@@ -34,6 +34,16 @@ class FocusTrap extends FocusMixin(LitElement) {
 		`;
 	}
 
+	static #exemptSelectors = [
+		'.d2l-focus-trap-exempt',
+		'.equatio-toolbar-wrapper',
+		'.equatio-toolbar-shadow-root-container'
+	].join(', ');
+
+	static #isExempt(target) {
+		return !!target?.closest(this.#exemptSelectors);
+	}
+
 	constructor() {
 		super();
 		this.trap = false;
@@ -97,13 +107,13 @@ class FocusTrap extends FocusMixin(LitElement) {
 		if (!this.trap || this._legacyPromptIds.size > 0 || lastTrap !== this) return;
 		const container = this._getContainer();
 		const target = e.composedPath()[0];
-		if (isComposedAncestor(container, target)) return;
+		if (isComposedAncestor(container, target) || FocusTrap.#isExempt(target)) return;
 		this._focusFirst();
 	}
 
 	_handleEndFocusIn(e) {
 		const container = this._getContainer();
-		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {
+		if (this.shadowRoot && (isComposedAncestor(container, e.relatedTarget) || FocusTrap.#isExempt(e.relatedTarget))) {
 			// user is exiting trap via forward tabbing...
 			const firstFocusable = getNextFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-start'));
 			if (firstFocusable) {
@@ -127,7 +137,7 @@ class FocusTrap extends FocusMixin(LitElement) {
 
 	_handleStartFocusIn(e) {
 		const container = this._getContainer();
-		if (this.shadowRoot && isComposedAncestor(container, e.relatedTarget)) {
+		if (this.shadowRoot && (isComposedAncestor(container, e.relatedTarget) || FocusTrap.#isExempt(e.relatedTarget))) {
 			// user is exiting trap via back tabbing...
 			const lastFocusable = getPreviousFocusable(this.shadowRoot.querySelector('.d2l-focus-trap-end'));
 			if (lastFocusable) {

diff --git a/components/focus-trap/test/focus-trap.test.js b/components/focus-trap/test/focus-trap.test.js
@@ -13,6 +13,7 @@ const normalFixture = html`
 			<a id="last" href="http://www.d2l.com">Last</a>
 		</d2l-focus-trap>
 		<a id="after" href="http://www.d2l.com">After</a>
+		<a class="d2l-focus-trap-exempt" href="http://www.d2l.com">Exempt</a>
 	</div>
 `;
 
@@ -77,6 +78,11 @@ describe('d2l-focus-trap', () => {
 				expect(document.activeElement).to.equal(elem.querySelector('#first'));
 			});
 
+			it('does not redirect from exempt elements', () => {
+				elem.querySelector('.d2l-focus-trap-exempt').focus();
+				expect(document.activeElement).to.equal(elem.querySelector('.d2l-focus-trap-exempt'));
+			});
+
 			it('does not redirect from children', () => {
 				elem.querySelector('#middle').focus();
 				expect(document.activeElement).to.equal(elem.querySelector('#middle'));