further accessibility improvements

KingSora · Apr 5, 2024 · 8c390b1 · 8c390b1
1 parent 59061bc
commit 8c390b1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/packages/overlayscrollbars/package.json b/packages/overlayscrollbars/package.json
@@ -1,7 +1,7 @@
 {
   "name": "overlayscrollbars",
   "private": true,
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "A scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.",
   "author": "Rene Haas | KingSora",
   "license": "MIT",

diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts
@@ -223,7 +223,7 @@ export const createStructureSetupElements = (
 
     if (!viewportIsTarget) {
       setAttrs(_viewport, dataAttributeViewport, '');
-      setAttrs(_viewport, tabIndexStr, '-1');
+      setAttrs(_viewport, tabIndexStr, ogTabindex || '-1');
       isBody && addAttrClass(docElement, dataAttributeHost, dataValueHostHtmlBody);
     }
 

diff --git a/...s/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts b/...s/overlayscrollbars/test/jest-jsdom/setups/structureSetup/structureSetup.elements.test.ts
@@ -1349,29 +1349,62 @@ describe('structureSetup.elements', () => {
   });
 
   describe('focus', () => {
-    describe('shift tabindex to viewport', () => {
-      test('with pointerdown on body', () => {
-        const { elements } = createStructureSetupElementsProxy(document.body);
+    describe('tabindex', () => {
+      test('body', () => {
+        const { elements } = createStructureSetupElementsProxy({
+          target: document.body,
+          elements: {
+            viewport: false,
+          },
+          cancel: {
+            body: false,
+          },
+        });
+        expect(elements._target.getAttribute('tabindex')).toBe(null);
         expect(elements._viewport.getAttribute('tabindex')).toBe('-1');
         expect(document.activeElement).toBe(elements._viewport);
+      });
 
-        elements._documentElm.dispatchEvent(new Event('pointerdown'));
-
+      test('body viewportIsTarget', () => {
+        const { elements } = createStructureSetupElementsProxy({
+          target: document.body,
+          elements: {
+            viewport: document.body,
+          },
+          cancel: {
+            body: false,
+          },
+        });
+        expect(elements._target.getAttribute('tabindex')).toBe(null);
         expect(elements._viewport.getAttribute('tabindex')).toBe(null);
+        expect(document.activeElement).toBe(elements._target);
       });
 
-      test('with keydown on element', () => {
+      test('element', () => {
         document.body.innerHTML = '<div tabindex="123"></div>';
         const target = document.body.firstElementChild as HTMLElement;
         target.focus();
 
-        const { elements } = createStructureSetupElementsProxy(target, { tabindex: true });
+        const { elements } = createStructureSetupElementsProxy(target);
         expect(elements._viewport.getAttribute('tabindex')).toBe('-1');
+        expect(elements._host.getAttribute('tabindex')).toBe('123');
         expect(document.activeElement).toBe(elements._viewport);
+      });
 
-        elements._documentElm.dispatchEvent(new Event('keydown'));
+      test('element viewportIsTarget', () => {
+        document.body.innerHTML = '<div tabindex="123"></div>';
+        const target = document.body.firstElementChild as HTMLElement;
+        target.focus();
 
+        const { elements } = createStructureSetupElementsProxy({
+          target,
+          elements: {
+            viewport: target,
+          },
+        });
         expect(elements._viewport.getAttribute('tabindex')).toBe('123');
+        expect(elements._host.getAttribute('tabindex')).toBe('123');
+        expect(document.activeElement).toBe(elements._viewport);
       });
     });