Adding keyboard accessibility to left navs

Signed-off-by: Rudra-SH <rudra099999@gmail.com>

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx

@@ -45,6 +45,7 @@ import {
   useSanitizerTransformer,
   useStylesTransformer,
   handleMetaRedirects,
+  addNavLinkKeyboardToggle,
 } from '../../transformers';
 import { useNavigateUrl } from './useNavigateUrl';
 import { useParams } from 'react-router-dom';
@@ -267,6 +268,7 @@ export const useTechDocsReaderDom = (
           },
           onLoaded: () => {},
         }),
+        addNavLinkKeyboardToggle(),
       ]),
     [theme, navigate, analytics, entityRef.name, configApi],
   );

plugins/techdocs/src/reader/transformers/addNavLinkKeyboardToggle.test.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { addNavLinkKeyboardToggle } from './addNavLinkKeyboardToggle';
+import { createTestShadowDom } from '../../test-utils';
+import { act } from '@testing-library/react';
+
+describe('addNavLinkKeyboardToggle', () => {
+  it('adds tabindex and toggles checkbox on Enter/Space', async () => {
+    let shadowDom: ShadowRoot;
+    await act(async () => {
+      shadowDom = await createTestShadowDom(
+        `
+				<input type="checkbox" id="cb1" />
+				<label class="md-nav__link" for="cb1">Section</label>
+				`,
+        {
+          preTransformers: [],
+          postTransformers: [addNavLinkKeyboardToggle()],
+        },
+      );
+    });
+    const label = shadowDom!.querySelector('label.md-nav__link')!;
+    const checkbox = shadowDom!.querySelector('#cb1') as HTMLInputElement;
+    expect(label.getAttribute('tabIndex')).toBe('0');
+
+    // Simulate keydown: Enter
+    await act(async () => {
+      label.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+    });
+    expect(checkbox.checked).toBe(true);
+
+    // Simulate keydown: space
+    await act(async () => {
+      label.dispatchEvent(
+        new KeyboardEvent('keydown', { key: ' ', bubbles: true }),
+      );
+    });
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it('does nothing if no for attribute or checkbox', async () => {
+    let shadowDom: ShadowRoot;
+    await act(async () => {
+      shadowDom = await createTestShadowDom(
+        `<label class ="md-nav__link">No for</label>`,
+        {
+          preTransformers: [],
+          postTransformers: [addNavLinkKeyboardToggle()],
+        },
+      );
+    });
+    const label = shadowDom!.querySelector('label.md-nav__link')!;
+    await act(async () => {
+      expect(() =>
+        label.dispatchEvent(
+          new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+        ),
+      ).not.toThrow();
+    });
+  });
+});

plugins/techdocs/src/reader/transformers/addNavLinkKeyboardToggle.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function addNavLinkKeyboardToggle() {
+  return (element: Element) => {
+    const navLabels = element.querySelectorAll('label.md-nav__link[for]');
+    navLabels.forEach(label => {
+      label.setAttribute('tabIndex', '0');
+      label.addEventListener('keydown', event => {
+        const keyboardEvent = event as KeyboardEvent;
+        if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {
+          const forId = label.getAttribute('for');
+          if (!forId) return;
+          const checkbox = element.querySelector(
+            `#${forId}`,
+          ) as HTMLInputElement | null;
+          if (checkbox && checkbox.type === 'checkbox') {
+            checkbox.checked = !checkbox.checked;
+            checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      });
+    });
+    return element;
+  };
+}

plugins/techdocs/src/reader/transformers/index.ts

@@ -28,3 +28,4 @@ export * from './onCssReady';
 export * from './scrollIntoNavigation';
 export * from './transformer';
 export * from './handleMetaRedirects';
+export * from './addNavLinkKeyboardToggle';