docusaurus-theme-openapi-docs 0.0.0-1109 → 0.0.0-1130

package/src/theme/ApiExplorer/FormSelect/index.tsx

@@ -5,33 +5,59 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { useId } from "react";
+
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 
 export interface Props {
   value?: string;
   options?: string[];
   onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  label?: string;
+  type?: string;
+  required?: boolean;
+  ariaLabelledBy?: string;
+  ariaLabel?: string;
 }
 
-function FormSelect({ value, options, onChange }: Props) {
+function FormSelect({
+  value,
+  options,
+  onChange,
+  label,
+  type,
+  required,
+  ariaLabelledBy,
+  ariaLabel,
+}: Props) {
+  const id = useId();
+
   if (!Array.isArray(options) || options.length === 0) {
     return null;
   }
 
   return (
-    <select
-      className="openapi-explorer__select-input"
-      value={value}
-      onChange={onChange}
-    >
-      {options.map((option) => {
-        return (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        );
-      })}
-    </select>
+    <>
+      {label && (
+        <FormLabel htmlFor={id} label={label} type={type} required={required} />
+      )}
+      <select
+        id={label ? id : undefined}
+        className="openapi-explorer__select-input"
+        value={value}
+        onChange={onChange}
+        aria-labelledby={!label ? ariaLabelledBy : undefined}
+        aria-label={!label && !ariaLabelledBy ? ariaLabel : undefined}
+      >
+        {options.map((option) => {
+          return (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
+    </>
   );
 }
 

package/src/theme/ApiExplorer/FormTextInput/index.tsx

@@ -6,10 +6,11 @@
  * ========================================================================== */
 
 // @ts-nocheck
-import React from "react";
+import React, { useId } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 import { OPENAPI_FORM } from "@theme/translationIds";
 import clsx from "clsx";
 import { useFormContext } from "react-hook-form";
@@ -21,6 +22,9 @@ export interface Props {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   paramName?: string;
   isRequired?: boolean;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
 function FormTextInput({
@@ -30,7 +34,12 @@ function FormTextInput({
   password,
   onChange,
   paramName,
+  label,
+  type,
+  required,
 }: Props) {
+  const id = useId();
+
   placeholder = placeholder?.split("\n")[0];
 
   const {
@@ -42,6 +51,9 @@ function FormTextInput({
 
   return (
     <>
+      {label && (
+        <FormLabel htmlFor={id} label={label} type={type} required={required} />
+      )}
       {paramName ? (
         <input
           {...register(paramName, {
@@ -52,6 +64,7 @@ function FormTextInput({
                 })
               : false,
           })}
+          id={label ? id : undefined}
           className={clsx("openapi-explorer__form-item-input", {
             error: showErrorMessage,
           })}
@@ -64,6 +77,7 @@ function FormTextInput({
         />
       ) : (
         <input
+          id={label ? id : undefined}
           className="openapi-explorer__form-item-input"
           type={password ? "password" : "text"}
           placeholder={placeholder}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamArrayFormItem.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useState } from "react";
 import { translate } from "@docusaurus/Translate";
 import { ErrorMessage } from "@hookform/error-message";
 import { nanoid } from "@reduxjs/toolkit";
+import FormLabel from "@theme/ApiExplorer/FormLabel";
 import FormSelect from "@theme/ApiExplorer/FormSelect";
 import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { Param, setParam } from "@theme/ApiExplorer/ParamOptions/slice";
@@ -19,6 +20,9 @@ import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
   param: Param;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
 function ArrayItem({
@@ -31,6 +35,7 @@ function ArrayItem({
   if (param.schema?.items?.type === "boolean") {
     return (
       <FormSelect
+        ariaLabel={param.description || param.name}
         options={["---", "true", "false"]}
         onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           const val = e.target.value;
@@ -52,7 +57,12 @@ function ArrayItem({
   );
 }
 
-export default function ParamArrayFormItem({ param }: ParamProps) {
+export default function ParamArrayFormItem({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps) {
   const [items, setItems] = useState<{ id: string; value?: string }[]>([]);
   const dispatch = useTypedDispatch();
 
@@ -122,6 +132,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
 
   return (
     <>
+      {label && <FormLabel label={label} type={type} required={required} />}
       <Controller
         control={control}
         rules={{
@@ -145,6 +156,7 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                 <button
                   className="openapi-explorer__delete-btn"
                   onClick={handleDeleteItem(item)}
+                  aria-label="Delete"
                 >
                   <svg
                     focusable="false"
@@ -157,7 +169,6 @@ export default function ParamArrayFormItem({ param }: ParamProps) {
                     aria-hidden="true"
                   >
                     <path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path>
-                    <title>Delete</title>
                   </svg>
                 </button>
               </div>

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamBooleanFormItem.tsx

@@ -17,9 +17,17 @@ import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
   param: Param;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
-export default function ParamBooleanFormItem({ param }: ParamProps) {
+export default function ParamBooleanFormItem({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps) {
   const dispatch = useTypedDispatch();
 
   const {
@@ -44,6 +52,9 @@ export default function ParamBooleanFormItem({ param }: ParamProps) {
         name="paramBoolean"
         render={({ field: { onChange } }) => (
           <FormSelect
+            label={label}
+            type={type}
+            required={required}
             options={["---", "true", "false"]}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamMultiSelectFormItem.tsx

@@ -18,9 +18,17 @@ import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
   param: Param;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
-export default function ParamMultiSelectFormItem({ param }: ParamProps) {
+export default function ParamMultiSelectFormItem({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps) {
   const {
     control,
     formState: { errors },
@@ -75,6 +83,9 @@ export default function ParamMultiSelectFormItem({ param }: ParamProps) {
         name="paramMultiSelect"
         render={({ field: { onChange } }) => (
           <FormMultiSelect
+            label={label}
+            type={type}
+            required={required}
             options={options as string[]}
             onChange={(e: any) => handleChange(e, onChange)}
             showErrors={!!showErrorMessage}

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamSelectFormItem.tsx

@@ -18,9 +18,17 @@ import { Controller, useFormContext } from "react-hook-form";
 
 export interface ParamProps {
   param: Param;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
-export default function ParamSelectFormItem({ param }: ParamProps) {
+export default function ParamSelectFormItem({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps) {
   const {
     control,
     formState: { errors },
@@ -47,6 +55,9 @@ export default function ParamSelectFormItem({ param }: ParamProps) {
         name="paramSelect"
         render={({ field: { onChange } }) => (
           <FormSelect
+            label={label}
+            type={type}
+            required={required}
             options={["---", ...(options as string[])]}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               const val = e.target.value;

package/src/theme/ApiExplorer/ParamOptions/ParamFormItems/ParamTextFormItem.tsx

@@ -13,12 +13,23 @@ import { useTypedDispatch } from "@theme/ApiItem/hooks";
 
 export interface ParamProps {
   param: Param;
+  label?: string;
+  type?: string;
+  required?: boolean;
 }
 
-export default function ParamTextFormItem({ param }: ParamProps) {
+export default function ParamTextFormItem({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps) {
   const dispatch = useTypedDispatch();
   return (
     <FormTextInput
+      label={label}
+      type={type}
+      required={required}
       isRequired={param.required}
       paramName={param.name}
       placeholder={param.description || param.name}

package/src/theme/ApiExplorer/ParamOptions/_ParamOptions.scss

@@ -63,15 +63,10 @@
   margin-top: calc(var(--ifm-pre-padding) / 2);
   background-color: var(--openapi-input-background);
   border: none;
-  outline: none;
   color: var(--ifm-pre-color);
   border-radius: 4px;
   margin-left: 4px;
 
-  &:focus {
-    outline: 0;
-  }
-
   &:active {
     box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
   }
@@ -102,10 +97,6 @@
     background-color: var(--openapi-input-border);
   }
 
-  &:focus {
-    outline: 0;
-  }
-
   &:active {
     box-shadow:
       inset 0 0 0 1px var(--openapi-input-border),

package/src/theme/ApiExplorer/ParamOptions/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState } from "react";
+import React, { useState, useId } from "react";
 
 import { translate } from "@docusaurus/Translate";
 import FormItem from "@theme/ApiExplorer/FormItem";
@@ -19,6 +19,12 @@ import { OPENAPI_PARAM_OPTIONS } from "@theme/translationIds";
 
 import { Param } from "./slice";
 
+export interface LabelProps {
+  label?: string;
+  type?: string;
+  required?: boolean;
+}
+
 export interface ParamProps {
   param: Param;
 }
@@ -45,35 +51,80 @@ export function getSchemaEnum(schema: any): any[] | undefined {
   return undefined;
 }
 
-function ParamOption({ param }: ParamProps) {
+function ParamOption({
+  param,
+  label,
+  type,
+  required,
+}: ParamProps & LabelProps) {
   const schemaEnum = getSchemaEnum(param.schema);
   const itemsEnum = getSchemaEnum(param.schema?.items);
 
   if (param.schema?.type === "array" && itemsEnum) {
-    return <ParamMultiSelectFormItem param={param} />;
+    return (
+      <ParamMultiSelectFormItem
+        param={param}
+        label={label}
+        type={type}
+        required={required}
+      />
+    );
   }
 
   if (param.schema?.type === "array") {
-    return <ParamArrayFormItem param={param} />;
+    return (
+      <ParamArrayFormItem
+        param={param}
+        label={label}
+        type={type}
+        required={required}
+      />
+    );
   }
 
   if (schemaEnum) {
-    return <ParamSelectFormItem param={param} />;
+    return (
+      <ParamSelectFormItem
+        param={param}
+        label={label}
+        type={type}
+        required={required}
+      />
+    );
   }
 
   if (param.schema?.type === "boolean") {
-    return <ParamBooleanFormItem param={param} />;
+    return (
+      <ParamBooleanFormItem
+        param={param}
+        label={label}
+        type={type}
+        required={required}
+      />
+    );
   }
 
   // integer, number, string, int32, int64, float, double, object, byte, binary,
   // date-time, date, password
-  return <ParamTextFormItem param={param} />;
+  return (
+    <ParamTextFormItem
+      param={param}
+      label={label}
+      type={type}
+      required={required}
+    />
+  );
 }
 
 function ParamOptionWrapper({ param }: ParamProps) {
   return (
-    <FormItem label={param.name} type={param.in} required={param.required}>
-      <ParamOption param={param} />
+    <FormItem>
+      <ParamOption
+        param={param}
+        label={param.name}
+        type={param.in}
+        required={param.required}
+      />
     </FormItem>
   );
 }
@@ -81,6 +132,8 @@ function ParamOptionWrapper({ param }: ParamProps) {
 function ParamOptions() {
   const [showOptional, setShowOptional] = useState(false);
 
+  const optionalId = useId();
+
   const pathParams = useTypedSelector((state: any) => state.params.path);
   const queryParams = useTypedSelector((state: any) => state.params.query);
   const cookieParams = useTypedSelector((state: any) => state.params.cookie);
@@ -109,6 +162,8 @@ function ParamOptions() {
           <button
             type="button"
             className="openapi-explorer__show-more-btn"
+            aria-expanded={showOptional}
+            aria-controls={optionalId}
             onClick={() => setShowOptional((prev) => !prev)}
           >
             <span
@@ -162,6 +217,7 @@ function ParamOptions() {
                 ? "openapi-explorer__show-options"
                 : "openapi-explorer__hide-options"
             }
+            id={optionalId}
           >
             {optionalParams.map((param) => (
               <ParamOptionWrapper

package/src/theme/ApiExplorer/Request/_Request.scss

@@ -48,6 +48,17 @@
 }
 
 .openapi-explorer__expand-details-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: 0px solid transparent;
+  background-color: transparent;
+  text-transform: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+
   &:hover {
     cursor: pointer;
   }

package/src/theme/ApiExplorer/Request/index.tsx

@@ -6,7 +6,7 @@
  * ========================================================================== */
 
 // @ts-nocheck
-import React, { useState } from "react";
+import React, { useState, useId } from "react";
 
 import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import { translate } from "@docusaurus/Translate";
@@ -67,6 +67,8 @@ function Request({ item }: { item: ApiItem }) {
   const [expandParams, setExpandParams] = useState(true);
   const [expandServer, setExpandServer] = useState(true);
 
+  const serverLabelId = useId();
+
   const allParams = [
     ...pathParams,
     ...queryParams,
@@ -251,7 +253,8 @@ function Request({ item }: { item: ApiItem }) {
             })}
           </span>
           {allDetailsExpanded ? (
-            <span
+            <button
+              type="button"
               className="openapi-explorer__expand-details-btn"
               onClick={collapseAllDetails}
             >
@@ -259,9 +262,10 @@ function Request({ item }: { item: ApiItem }) {
                 id: OPENAPI_REQUEST.COLLAPSE_ALL,
                 message: "Collapse all",
               })}
-            </span>
+            </button>
           ) : (
-            <span
+            <button
+              type="button"
               className="openapi-explorer__expand-details-btn"
               onClick={expandAllDetails}
             >
@@ -269,7 +273,7 @@ function Request({ item }: { item: ApiItem }) {
                 id: OPENAPI_REQUEST.EXPAND_ALL,
                 message: "Expand all",
               })}
-            </span>
+            </button>
           )}
         </div>
         <div className="openapi-explorer__details-outer-container">
@@ -279,6 +283,7 @@ function Request({ item }: { item: ApiItem }) {
               className="openapi-explorer__details-container"
             >
               <summary
+                id={serverLabelId}
                 className="openapi-explorer__details-summary"
                 onClick={(e) => {
                   e.preventDefault();
@@ -290,7 +295,7 @@ function Request({ item }: { item: ApiItem }) {
                   message: "Base URL",
                 })}
               </summary>
-              <Server />
+              <Server labelId={serverLabelId} />
             </details>
           )}
           {showAuth && (

package/src/theme/ApiExplorer/Response/_Response.scss

@@ -43,6 +43,17 @@
 }
 
 .openapi-explorer__response-clear-btn {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  cursor: pointer;
+  border: 0px solid transparent;
+  background-color: transparent;
+  text-transform: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+
   &:hover {
     cursor: pointer;
   }

package/src/theme/ApiExplorer/Response/index.tsx

@@ -84,7 +84,8 @@ function Response({ item }: { item: ApiItem }) {
         <span className="openapi-explorer__response-title">
           {translate({ id: OPENAPI_RESPONSE.TITLE, message: "Response" })}
         </span>
-        <span
+        <button
+          type="button"
           className="openapi-explorer__response-clear-btn"
           onClick={() => {
             dispatch(clearResponse());
@@ -93,7 +94,7 @@ function Response({ item }: { item: ApiItem }) {
           }}
         >
           {translate({ id: OPENAPI_RESPONSE.CLEAR, message: "Clear" })}
-        </span>
+        </button>
       </div>
       <div
         style={{

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

@@ -17,7 +17,11 @@ import { OPENAPI_SERVER } from "@theme/translationIds";
 
 import { setServer, setServerVariable } from "./slice";
 
-function Server() {
+interface ServerProps {
+  labelId?: string;
+}
+
+function Server({ labelId }: ServerProps) {
   const [isEditing, setIsEditing] = useState(false);
   const value = useTypedSelector((state: any) => state.server.value);
   const options = useTypedSelector((state: any) => state.server.options);
@@ -79,6 +83,7 @@ function Server() {
       >
         <FormItem>
           <FormSelect
+            ariaLabelledBy={labelId}
             options={options.map((s: any) => s.url)}
             onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
               dispatch(
@@ -99,8 +104,9 @@ function Server() {
           Object.keys(value.variables).map((key) => {
             if (value.variables?.[key].enum !== undefined) {
               return (
-                <FormItem label={key}>
+                <FormItem>
                   <FormSelect
+                    label={key}
                     options={value.variables[key].enum}
                     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                       dispatch(
@@ -115,8 +121,9 @@ function Server() {
               );
             }
             return (
-              <FormItem label={key}>
+              <FormItem>
                 <FormTextInput
+                  label={key}
                   placeholder={value.variables?.[key].default}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     dispatch(