Remove simple jquery instances

packages/libs/wdk-client/src/Components/Display/TabbableContainer.tsx

@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import React from 'react';
 
 type RKeyboardEvent = React.KeyboardEvent<HTMLDivElement>;
@@ -35,7 +34,6 @@ class TabbableContainer extends React.Component<Props> {
       !this.node.contains(document.activeElement)
     ) {
       this.node.focus();
-      // $(this.node).find(':tabbable:first').focus();
     }
   }
 
@@ -53,14 +51,32 @@ class TabbableContainer extends React.Component<Props> {
     if (event.key !== 'Tab') {
       return;
     }
-    let tabbables = $(':tabbable', this.node!);
-    let l = tabbables.length;
-    let index = tabbables.index($(event.target as HTMLElement));
+    // Assuming `this.node` refers to the container node, get all tabbable elements within the container
+    const tabbables: HTMLElement[] | null =
+      this.node &&
+      Array.from(
+        this.node.querySelectorAll(
+          'a[href], button, input, select, textarea, [tabindex]'
+        )
+      );
+
+    // Filter out elements that are not tabbable
+    const filteredTabbables =
+      tabbables?.filter((element) => {
+        const tabIndex = element.getAttribute('tabindex');
+        const isDisabled =
+          'disabled' in element &&
+          (element as HTMLElement & { disabled: boolean }).disabled;
+        return !isDisabled && tabIndex !== '-1';
+      }) ?? [];
+
+    let l = filteredTabbables.length;
+    let index = filteredTabbables.findIndex((el) => el === event.target);
     let delta = event.shiftKey ? l - 1 : 1;
     let nextIndex = (index + delta) % l;
-    let nextTarget = tabbables[nextIndex];
+    let nextTarget = filteredTabbables[nextIndex];
     if (nextTarget == null) {
-      nextTarget = tabbables[0];
+      nextTarget = filteredTabbables[0];
     }
     nextTarget.focus();
     event.preventDefault();

packages/libs/wdk-client/src/Views/Answer/AnswerFilterSelector.jsx

@@ -1,9 +1,7 @@
-import $ from 'jquery';
 import { includes } from 'lodash';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import TabbableContainer from '../../Components/Display/TabbableContainer';
-import { wrappable, lazy } from '../../Utils/ComponentUtils';
+import { wrappable } from '../../Utils/ComponentUtils';
 
 /** Filter text input */
 function renderFilterField(field, isChecked, handleChange) {
@@ -22,6 +20,8 @@ function renderFilterField(field, isChecked, handleChange) {
   );
 }
 
+const ANSWER_FILTER_CLASSNAME = 'wdk-Answer-filterFieldSelector';
+
 /** Record fields to match filter expression against */
 class AnswerFilterSelector extends Component {
   constructor(props) {
@@ -33,8 +33,7 @@ class AnswerFilterSelector extends Component {
     };
     this.handleDocumentClick = (e) => {
       // close if the click target is not contained by this node
-      let node = ReactDOM.findDOMNode(this);
-      if ($(e.target).closest(node).length === 0) {
+      if (!e.target.closest(`.${ANSWER_FILTER_CLASSNAME}`)) {
         this.props.onClose();
       }
     };
@@ -78,7 +77,7 @@ class AnswerFilterSelector extends Component {
       <TabbableContainer
         autoFocus
         onKeyDown={this.handleKeyPress}
-        className="wdk-Answer-filterFieldSelector"
+        className={ANSWER_FILTER_CLASSNAME}
       >
         <p>
           <a href="#" onClick={selectAll}>