diff --git a/package-lock.json b/package-lock.json
index 24626f53d3..330871fb21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4536,9 +4536,17 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/@openedx/paragon": {
-      "version": "22.5.1",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.5.1.tgz",
-      "integrity": "sha512-GSDC28jlsfP8LPUoebXtkzw5cIxl44+9dhscvz2znZ7uMYjEbmp5waPR5rAJ4lKtNzFBZUX/mAiaNilhhZXu9Q==",
+      "version": "22.6.1",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.6.1.tgz",
+      "integrity": "sha512-xblrspAfsYsiDzyLIh+tceiTPgx1HY6v0eceatTYSj/BINxN8Dcqh9uQOZi2eJc1os3w2dr0nZRGnTt8cYu2BA==",
+      "license": "Apache-2.0",
+      "workspaces": [
+        "example",
+        "component-generator",
+        "www",
+        "icons",
+        "dependent-usage-analyzer"
+      ],
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
@@ -4628,6 +4636,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
       "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 57e2eff976..66bd7e100a 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -74,7 +74,7 @@ const CustomMenu = (props) => {
         <div className="d-flex flex-row justify-content-end">
           <div className="d-inline">
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectCancelRef}
               variant="tertiary"
               className="tags-drawer-cancel-button"
@@ -83,7 +83,7 @@ const CustomMenu = (props) => {
               { intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText) }
             </Button>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectAddRef}
               variant="tertiary"
               className="text-info-500 add-tags-button"
@@ -139,7 +139,7 @@ const CustomIndicatorsContainer = (props) => {
             onClick={handleCommitStagedTags}
             onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }}
             ref={selectInlineAddRef}
-            tabIndex="0"
+            tabIndex={0}
             onKeyDown={disableActionKeys} // To prevent navigating staged tags when button focused
           >
             { intl.formatMessage(messages.collapsibleInlineAddStagedTagsButtonText) }
@@ -240,7 +240,7 @@ const ContentTagsCollapsible = ({
   const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
-  const selectInlineEditModeRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectInlineEditModeRef = React.useRef(/** @type {HTMLButtonElement | null} */(null));
   const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
 
   const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
@@ -393,7 +393,7 @@ const ContentTagsCollapsible = ({
               <div className="mb-3" key={taxonomyId}>
                 <p className="text-gray-500">{intl.formatMessage(messages.collapsibleNoTagsAddedText)}
                   <Button
-                    tabIndex="0"
+                    tabIndex={0}
                     size="inline"
                     ref={selectInlineEditModeRef}
                     variant="link"
diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index f8596e8959..117ffc3947 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -53,7 +53,7 @@ const TaxonomyList = ({ contentId }) => {
         values={{
           link: (
             <Button
-              tabIndex="0"
+              tabIndex={0}
               size="inline"
               variant="link"
               className="text-info-500 p-0 enable-taxonomies-button"
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index 491d442ed2..394ab6b56e 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -309,7 +309,7 @@ const ContentTagsDropDownSelector = ({
         ? (
           <div>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               variant="tertiary"
               iconBefore={Add}
               onClick={loadMoreTags}
diff --git a/src/files-and-videos/videos-page/VideoThumbnail.jsx b/src/files-and-videos/videos-page/VideoThumbnail.jsx
index 60543991dc..2929c6d32d 100644
--- a/src/files-and-videos/videos-page/VideoThumbnail.jsx
+++ b/src/files-and-videos/videos-page/VideoThumbnail.jsx
@@ -69,7 +69,7 @@ const VideoThumbnail = ({
               variant="primary"
               size="sm"
               onClick={fileInputControl.click}
-              tabIndex="0"
+              tabIndex={0}
             >
               {addThumbnailMessage}
             </Button>
diff --git a/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx b/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
index aca6d3f0cc..22d4d0ca4c 100644
--- a/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
+++ b/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
@@ -34,7 +34,7 @@ const WhatsInClipboard = ({
       />
       <p
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex="0"
+        tabIndex={0}
         role="presentation"
         ref={triggerElementRef}
         className="whats-in-clipboard-text m-0"
diff --git a/src/generic/clipboard/paste-component/index.jsx b/src/generic/clipboard/paste-component/index.jsx
index a6602bb079..4d74c771b6 100644
--- a/src/generic/clipboard/paste-component/index.jsx
+++ b/src/generic/clipboard/paste-component/index.jsx
@@ -14,7 +14,7 @@ const PasteComponent = ({
   const handlePopoverToggle = (isOpen) => togglePopover(isOpen);
 
   const renderPopover = (props) => (
-    <div role="link" ref={popoverElementRef} tabIndex="0">
+    <div role="link" ref={popoverElementRef} tabIndex={0}>
       <Popover
         className="clipboard-popover"
         id="popover-positioned"
diff --git a/src/search-modal/SearchFilterWidget.tsx b/src/search-modal/SearchFilterWidget.tsx
index a3e82d4356..b14e2f29dd 100644
--- a/src/search-modal/SearchFilterWidget.tsx
+++ b/src/search-modal/SearchFilterWidget.tsx
@@ -24,7 +24,7 @@ const SearchFilterWidget: React.FC<{
   children: React.ReactNode;
 }> = ({ appliedFilters, ...props }) => {
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = React.useState(null);
+  const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
   return (
     <>
diff --git a/src/search-modal/SearchResult.tsx b/src/search-modal/SearchResult.tsx
index 77f806be4a..57584cefe5 100644
--- a/src/search-modal/SearchResult.tsx
+++ b/src/search-modal/SearchResult.tsx
@@ -22,13 +22,13 @@ import type { ContentHit } from './data/api';
 import Highlight from './Highlight';
 import messages from './messages';
 
-const STRUCTURAL_TYPE_ICONS: Record<string, React.ReactElement> = {
+const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
   vertical: TYPE_ICONS_MAP.vertical,
   sequential: Folder,
   chapter: Folder,
 };
 
-function getItemIcon(blockType: string): React.ReactElement {
+function getItemIcon(blockType: string): React.ComponentType {
   return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
 }