Lazy create accessible dom elements (#79)

anderoonies · web-flow · commit bc62cfb2d90b · 2021-12-14T18:39:34.000-05:00
* Query for specific buttons when doing accessibility tests to prevent issues with leaky Graphics instances
diff --git a/test/accessibility.test.js b/test/accessibility.test.js
@@ -13,7 +13,9 @@ describe('Keyboard navigation', () => {
             const t = new Thing();
             g.add(t);
             simulateEvent('keydown', { key: 'Tab' }, document.querySelector('#game'));
-            const button = document.querySelector('button');
+            const button = document.getElementById(
+                HIDDEN_KEYBOARD_NAVIGATION_DOM_ELEMENT_ID(t._id)
+            );
             expect(button).not.toBeNull();
             button.dispatchEvent(new Event('focus'));
             expect(button.textContent).toEqual(t.describe());
@@ -23,7 +25,9 @@ describe('Keyboard navigation', () => {
             const t = new Thing();
             g.add(t);
             simulateEvent('keydown', { key: 'Tab' }, document.querySelector('#game'));
-            const button = document.querySelector('button');
+            const button = document.getElementById(
+                HIDDEN_KEYBOARD_NAVIGATION_DOM_ELEMENT_ID(t._id)
+            );
             expect(button.style.cssText.replace(/\s+/g, '')).toEqual(
                 KEYBOARD_NAVIGATION_DOM_ELEMENT_STYLE.replace(/\s+/g, '')
             );
@@ -32,8 +36,10 @@ describe('Keyboard navigation', () => {
             const g = new Graphics();
             const t = new Thing();
             g.add(t);
-            simulateEvent('keydown', { key: 'Tab' }, document.querySelector('#game'));
-            const button = document.querySelector('button');
+            simulateEvent('keydown', { key: 'Tab' }, window);
+            const button = document.getElementById(
+                HIDDEN_KEYBOARD_NAVIGATION_DOM_ELEMENT_ID(t._id)
+            );
             expect(button.style.cssText.replace(/\s+/g, '')).toEqual(
                 KEYBOARD_NAVIGATION_DOM_ELEMENT_STYLE.replace(/\s+/g, '')
             );
