docusaurus-theme-openapi-docs 0.0.0-391 → 0.0.0-392

package/lib/theme/ApiDemoPanel/FloatingButton/index.js

@@ -22,8 +22,10 @@ function FloatingButton({
   onClick,
   children
 }) {
-  return <div className={_stylesModule.default.floatingButton}>
-      {label && <button onClick={onClick}>{label}</button>}
+  return <div tabIndex={0} className={_stylesModule.default.floatingButton}>
+      {label && <button tabIndex={0} onClick={onClick}>
+          {label}
+        </button>}
       {children}
     </div>;
 }

package/lib/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -9,7 +9,6 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
   cursor: pointer;
-  outline: none;
   padding: 0.4rem 0.5rem;
   opacity: 0;
   visibility: hidden;
@@ -20,7 +19,9 @@
   right: calc(var(--ifm-pre-padding) / 2);
 }
 
-.floatingButton:hover button {
+.floatingButton:hover button,
+.floatingButton:focus-visible button,
+.floatingButton button:focus-visible {
   visibility: visible;
   opacity: 1;
 }

package/lib/theme/ApiDemoPanel/LiveEditor/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
@@ -19,6 +19,10 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
  *
@@ -29,9 +33,18 @@ function Live({
   onEdit
 }) {
   const isBrowser = (0, _useIsBrowser.default)();
-  return <>
-      <_reactLive.LiveEditor key={String(isBrowser)} className={_stylesModule.default.playgroundEditor} onChange={onEdit} />
-    </>;
+  const [editorDisabled, setEditorDisabled] = (0, _react.useState)(false); // TODO: Temporary solution for disabling tab key
+
+  const handleKeydown = event => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setEditorDisabled(true);
+    }
+  };
+
+  return <div onClick={() => setEditorDisabled(false)}>
+      <_reactLive.LiveEditor key={String(isBrowser)} className={_stylesModule.default.playgroundEditor} onChange={onEdit} disabled={editorDisabled} onKeyDown={handleKeydown} />
+    </div>;
 }
 
 const LiveComponent = (0, _reactLive.withLive)(Live);

package/lib/theme/ApiDemoPanel/ParamOptions/styles.module.css

@@ -41,10 +41,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */

package/lib/theme/ApiDemoPanel/Server/index.js

@@ -73,7 +73,7 @@ function Server() {
   }
 
   return <div className={_stylesModule.default.optionsPanel}>
-      <button className={_stylesModule.default.showMoreButton} onClick={() => setIsEditing(false)}>
+      <button className={_stylesModule.default.showMoreButton} onClick={() => setIsEditing(false)} tabIndex={0}>
         Hide
       </button>
       <_FormItem.default label="Endpoint">

package/lib/theme/ApiDemoPanel/Server/styles.module.css

@@ -28,10 +28,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */

package/lib-next/theme/ApiDemoPanel/FloatingButton/index.js

@@ -9,8 +9,12 @@ import styles from "./styles.module.css";
 
 function FloatingButton({ label, onClick, children }) {
   return (
-    <div className={styles.floatingButton}>
-      {label && <button onClick={onClick}>{label}</button>}
+    <div tabIndex={0} className={styles.floatingButton}>
+      {label && (
+        <button tabIndex={0} onClick={onClick}>
+          {label}
+        </button>
+      )}
       {children}
     </div>
   );

package/lib-next/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -9,7 +9,6 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
   cursor: pointer;
-  outline: none;
   padding: 0.4rem 0.5rem;
   opacity: 0;
   visibility: hidden;
@@ -20,7 +19,9 @@
   right: calc(var(--ifm-pre-padding) / 2);
 }
 
-.floatingButton:hover button {
+.floatingButton:hover button,
+.floatingButton:focus-visible button,
+.floatingButton button:focus-visible {
   visibility: visible;
   opacity: 1;
 }

package/lib-next/theme/ApiDemoPanel/LiveEditor/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
-import React from "react";
+import React, { useState } from "react";
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { LiveProvider, LiveEditor, withLive } from "react-live";
@@ -13,14 +13,25 @@ import styles from "./styles.module.css";
 
 function Live({ onEdit }) {
   const isBrowser = useIsBrowser();
+  const [editorDisabled, setEditorDisabled] = useState(false); // TODO: Temporary solution for disabling tab key
+
+  const handleKeydown = (event) => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setEditorDisabled(true);
+    }
+  };
+
   return (
-    <>
+    <div onClick={() => setEditorDisabled(false)}>
       <LiveEditor
         key={String(isBrowser)}
         className={styles.playgroundEditor}
         onChange={onEdit}
+        disabled={editorDisabled}
+        onKeyDown={handleKeydown}
       />
-    </>
+    </div>
   );
 }
 

package/lib-next/theme/ApiDemoPanel/ParamOptions/styles.module.css

@@ -41,10 +41,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */

package/lib-next/theme/ApiDemoPanel/Server/index.js

@@ -62,6 +62,7 @@ function Server() {
       <button
         className={styles.showMoreButton}
         onClick={() => setIsEditing(false)}
+        tabIndex={0}
       >
         Hide
       </button>

package/lib-next/theme/ApiDemoPanel/Server/styles.module.css

@@ -28,10 +28,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-391",
+  "version": "0.0.0-392",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -50,7 +50,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-391",
+    "docusaurus-plugin-openapi-docs": "0.0.0-392",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "f61f756a734fd90ac876ce7af67f68e4204aa35d"
+  "gitHead": "04ea33fa332252a40c87d8018afe6cdb91cbdf8a"
 }

package/src/theme/ApiDemoPanel/FloatingButton/index.tsx

@@ -17,8 +17,12 @@ interface Props {
 
 function FloatingButton({ label, onClick, children }: Props) {
   return (
-    <div className={styles.floatingButton}>
-      {label && <button onClick={onClick}>{label}</button>}
+    <div tabIndex={0} className={styles.floatingButton}>
+      {label && (
+        <button tabIndex={0} onClick={onClick}>
+          {label}
+        </button>
+      )}
       {children}
     </div>
   );

package/src/theme/ApiDemoPanel/FloatingButton/styles.module.css

@@ -9,7 +9,6 @@
   border-radius: var(--ifm-global-radius);
   color: var(--ifm-color-white);
   cursor: pointer;
-  outline: none;
   padding: 0.4rem 0.5rem;
   opacity: 0;
   visibility: hidden;
@@ -20,7 +19,9 @@
   right: calc(var(--ifm-pre-padding) / 2);
 }
 
-.floatingButton:hover button {
+.floatingButton:hover button,
+.floatingButton:focus-visible button,
+.floatingButton button:focus-visible {
   visibility: visible;
   opacity: 1;
 }

package/src/theme/ApiDemoPanel/LiveEditor/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useState } from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
@@ -16,14 +16,26 @@ import styles from "./styles.module.css";
 
 function Live({ onEdit }: any) {
   const isBrowser = useIsBrowser();
+  const [editorDisabled, setEditorDisabled] = useState(false);
+
+  // TODO: Temporary solution for disabling tab key
+  const handleKeydown = (event: React.KeyboardEvent) => {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setEditorDisabled(true);
+    }
+  };
+
   return (
-    <>
+    <div onClick={() => setEditorDisabled(false)}>
       <LiveEditor
         key={String(isBrowser)}
         className={styles.playgroundEditor}
         onChange={onEdit}
+        disabled={editorDisabled}
+        onKeyDown={handleKeydown}
       />
-    </>
+    </div>
   );
 }
 

package/src/theme/ApiDemoPanel/ParamOptions/styles.module.css

@@ -41,10 +41,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */

package/src/theme/ApiDemoPanel/Server/index.tsx

@@ -62,6 +62,7 @@ function Server() {
       <button
         className={styles.showMoreButton}
         onClick={() => setIsEditing(false)}
+        tabIndex={0}
       >
         Hide
       </button>

package/src/theme/ApiDemoPanel/Server/styles.module.css

@@ -28,10 +28,6 @@
   display: block;
 }
 
-.showMoreButton:focus {
-  outline: 0;
-}
-
 .showMoreButton:hover {
   /* text-decoration: underline; */
   /* background-color: red; */