@oneuptime/common 9.4.7 → 9.4.8

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -1,8 +1,11 @@
 import React, {
   forwardRef,
   ReactElement,
+  useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
+  useRef,
   useState,
 } from "react";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -20,8 +23,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
   ComponentProps & React.RefAttributes<unknown>
 > = forwardRef(
   (props: ComponentProps, componentRef: React.ForwardedRef<unknown>) => {
+    const uniqueId: string = useId();
+    const menuId: string = `menu-${uniqueId}`;
+    const buttonId: string = `menu-button-${uniqueId}`;
     const { ref, isComponentVisible, setIsComponentVisible } =
       useComponentOutsideClick(false);
+    const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+    const menuItemRefs: React.MutableRefObject<(HTMLDivElement | null)[]> =
+      useRef<(HTMLDivElement | null)[]>([]);
 
     useImperativeHandle(componentRef, () => {
       return {
@@ -41,18 +50,75 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
     useEffect(() => {
       setDropdownVisible(isComponentVisible);
+      if (isComponentVisible) {
+        setFocusedIndex(0);
+      } else {
+        setFocusedIndex(-1);
+      }
     }, [isComponentVisible]);
 
+    useEffect(() => {
+      if (focusedIndex >= 0 && menuItemRefs.current[focusedIndex]) {
+        menuItemRefs.current[focusedIndex]?.focus();
+      }
+    }, [focusedIndex]);
+
+    const handleKeyDown: (event: React.KeyboardEvent) => void = useCallback(
+      (event: React.KeyboardEvent): void => {
+        if (!isComponentVisible) {
+          return;
+        }
+
+        const itemCount: number = props.children.length;
+
+        switch (event.key) {
+          case "Escape":
+            event.preventDefault();
+            setIsComponentVisible(false);
+            break;
+          case "ArrowDown":
+            event.preventDefault();
+            setFocusedIndex((prev: number) => {
+              return (prev + 1) % itemCount;
+            });
+            break;
+          case "ArrowUp":
+            event.preventDefault();
+            setFocusedIndex((prev: number) => {
+              return (prev - 1 + itemCount) % itemCount;
+            });
+            break;
+          case "Home":
+            event.preventDefault();
+            setFocusedIndex(0);
+            break;
+          case "End":
+            event.preventDefault();
+            setFocusedIndex(itemCount - 1);
+            break;
+        }
+      },
+      [isComponentVisible, props.children.length, setIsComponentVisible],
+    );
+
     return (
-      <div className="relative inline-block text-left">
+      <div
+        className="relative inline-block text-left"
+        onKeyDown={handleKeyDown}
+      >
         {!props.elementToBeShownInsteadOfButton && (
           <Button
+            id={buttonId}
             icon={props.menuIcon || IconProp.More}
             title={props.text || ""}
             buttonStyle={ButtonStyleType.OUTLINE}
             onClick={() => {
               setIsComponentVisible(!isDropdownVisible);
             }}
+            ariaLabel={props.text || "More options"}
+            ariaExpanded={isComponentVisible}
+            ariaHaspopup="menu"
+            ariaControls={isComponentVisible ? menuId : undefined}
           />
         )}
 
@@ -63,21 +129,37 @@ const MoreMenu: React.ForwardRefExoticComponent<
         {isComponentVisible && (
           <div
             ref={ref}
+            id={menuId}
             className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             role="menu"
             aria-orientation="vertical"
-            aria-labelledby="menu-button"
+            aria-labelledby={buttonId}
           >
             {props.children.map((child: ReactElement, index: number) => {
               return (
                 <div
                   key={index}
+                  ref={(el: HTMLDivElement | null) => {
+                    menuItemRefs.current[index] = el;
+                  }}
                   role="menuitem"
+                  tabIndex={focusedIndex === index ? 0 : -1}
                   onClick={() => {
                     if (isComponentVisible) {
                       setIsComponentVisible(false);
                     }
                   }}
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setIsComponentVisible(false);
+                      // Trigger child click
+                      const clickEvent: MouseEvent = new MouseEvent("click", {
+                        bubbles: true,
+                      });
+                      e.currentTarget.dispatchEvent(clickEvent);
+                    }
+                  }}
                 >
                   {child}
                 </div>

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -48,14 +48,36 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
 
   if (props.data.length === 0) {
     return (
-      <ErrorMessage
-        message={
-          props.noItemsMessage
-            ? props.noItemsMessage
-            : `No ${props.singularLabel.toLocaleLowerCase()}`
-        }
-        onRefreshClick={props.onRefreshClick}
-      />
+      <div className="text-center">
+        {/* Only show the no items message if there's no create button */}
+        {!props.onCreateNewItem && (
+          <ErrorMessage
+            message={
+              props.noItemsMessage
+                ? props.noItemsMessage
+                : `No ${props.singularLabel.toLocaleLowerCase()}`
+            }
+            onRefreshClick={props.onRefreshClick}
+          />
+        )}
+        {props.onCreateNewItem && (
+          <div className="my-10">
+            <div
+              className="m-auto inline-flex items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5"
+              onClick={() => {
+                if (props.onCreateNewItem) {
+                  props.onCreateNewItem(1);
+                }
+              }}
+            >
+              <Icon icon={IconProp.Add} className="h-5 w-5" />
+              <span className="text-sm ml-2">
+                Add New {props.singularLabel}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
     );
   }
 

package/UI/Components/Pagination/Pagination.tsx

@@ -67,9 +67,10 @@ const Pagination: FunctionComponent<ComponentProps> = (
     useState<boolean>(false);
 
   return (
-    <div
+    <nav
       className="flex items-center justify-between border-t border-gray-200 bg-white px-4"
       data-testid={props.dataTestId}
+      aria-label={`Pagination for ${props.pluralLabel}`}
     >
       {/* Desktop layout: Description on left, all controls on right */}
       <div className="hidden md:block">
@@ -92,7 +93,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
 
       {/* Desktop layout: All controls together on right */}
       <div className="hidden md:flex">
-        <nav className="inline-flex -space-x-px rounded-md shadow-sm">
+        <div className="inline-flex -space-x-px rounded-md shadow-sm">
           <div className="my-2">
             <Button
               dataTestId="show-pagination-modal-button"
@@ -100,14 +101,19 @@ const Pagination: FunctionComponent<ComponentProps> = (
               buttonSize={ButtonSize.ExtraSmall}
               icon={IconProp.AdjustmentHorizontal}
               buttonStyle={ButtonStyleType.ICON_LIGHT}
+              ariaLabel="Open pagination settings"
               onClick={() => {
                 setShowPaginationModel(true);
               }}
             />
           </div>
 
-          <ul className="py-3">
+          <ul className="py-3" role="list">
             <li
+              role="button"
+              tabIndex={isPreviousDisabled ? -1 : 0}
+              aria-disabled={isPreviousDisabled}
+              aria-label="Go to previous page"
               onClick={() => {
                 let currentPageNumber: number = props.currentPageNumber;
 
@@ -122,6 +128,24 @@ const Pagination: FunctionComponent<ComponentProps> = (
                   );
                 }
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (
+                  (e.key === "Enter" || e.key === " ") &&
+                  !isPreviousDisabled
+                ) {
+                  e.preventDefault();
+                  let currentPageNumber: number = props.currentPageNumber;
+                  if (typeof currentPageNumber === "string") {
+                    currentPageNumber = parseInt(currentPageNumber);
+                  }
+                  if (props.onNavigateToPage) {
+                    props.onNavigateToPage(
+                      currentPageNumber - 1,
+                      props.itemsOnPage,
+                    );
+                  }
+                }
+              }}
               className={` inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500   ${
                 isPreviousDisabled
                   ? "bg-gray-100"
@@ -131,6 +155,10 @@ const Pagination: FunctionComponent<ComponentProps> = (
               <span className="page-link">Previous</span>
             </li>
             <li
+              role="button"
+              tabIndex={isCurrentPageButtonDisabled ? -1 : 0}
+              aria-current="page"
+              aria-label={`Page ${props.currentPageNumber}, click to change page`}
               data-testid="current-page-link"
               className={` z-10 inline-flex items-center border border-x-0 border-gray-300 hover:bg-gray-50 px-4 py-2 text-sm font-medium text-text-600  cursor-pointer ${
                 isCurrentPageButtonDisabled ? "bg-gray-100" : ""
@@ -138,10 +166,20 @@ const Pagination: FunctionComponent<ComponentProps> = (
               onClick={() => {
                 setShowPaginationModel(true);
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setShowPaginationModel(true);
+                }
+              }}
             >
               <span>{props.currentPageNumber}</span>
             </li>
             <li
+              role="button"
+              tabIndex={isNextDisabled ? -1 : 0}
+              aria-disabled={isNextDisabled}
+              aria-label="Go to next page"
               onClick={() => {
                 let currentPageNumber: number = props.currentPageNumber;
 
@@ -156,6 +194,21 @@ const Pagination: FunctionComponent<ComponentProps> = (
                   );
                 }
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if ((e.key === "Enter" || e.key === " ") && !isNextDisabled) {
+                  e.preventDefault();
+                  let currentPageNumber: number = props.currentPageNumber;
+                  if (typeof currentPageNumber === "string") {
+                    currentPageNumber = parseInt(currentPageNumber);
+                  }
+                  if (props.onNavigateToPage) {
+                    props.onNavigateToPage(
+                      currentPageNumber + 1,
+                      props.itemsOnPage,
+                    );
+                  }
+                }
+              }}
               className={` inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500  ${
                 isNextDisabled
                   ? "bg-gray-100"
@@ -165,7 +218,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
               <span>Next</span>
             </li>
           </ul>
-        </nav>
+        </div>
       </div>
 
       {/* Mobile layout: Navigate button on left, pagination controls on right */}
@@ -176,6 +229,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
           buttonSize={ButtonSize.ExtraSmall}
           icon={IconProp.AdjustmentHorizontal}
           buttonStyle={ButtonStyleType.ICON_LIGHT}
+          ariaLabel="Open pagination settings"
           onClick={() => {
             setShowPaginationModel(true);
           }}
@@ -183,9 +237,13 @@ const Pagination: FunctionComponent<ComponentProps> = (
       </div>
 
       <div className="md:hidden">
-        <nav className="inline-flex -space-x-px rounded-md shadow-sm">
-          <ul>
+        <div className="inline-flex -space-x-px rounded-md shadow-sm">
+          <ul role="list">
             <li
+              role="button"
+              tabIndex={isPreviousDisabled ? -1 : 0}
+              aria-disabled={isPreviousDisabled}
+              aria-label="Go to previous page"
               onClick={() => {
                 let currentPageNumber: number = props.currentPageNumber;
 
@@ -200,6 +258,24 @@ const Pagination: FunctionComponent<ComponentProps> = (
                   );
                 }
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (
+                  (e.key === "Enter" || e.key === " ") &&
+                  !isPreviousDisabled
+                ) {
+                  e.preventDefault();
+                  let currentPageNumber: number = props.currentPageNumber;
+                  if (typeof currentPageNumber === "string") {
+                    currentPageNumber = parseInt(currentPageNumber);
+                  }
+                  if (props.onNavigateToPage) {
+                    props.onNavigateToPage(
+                      currentPageNumber - 1,
+                      props.itemsOnPage,
+                    );
+                  }
+                }
+              }}
               className={` inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500   ${
                 isPreviousDisabled
                   ? "bg-gray-100"
@@ -209,6 +285,10 @@ const Pagination: FunctionComponent<ComponentProps> = (
               <span className="page-link">Previous</span>
             </li>
             <li
+              role="button"
+              tabIndex={isCurrentPageButtonDisabled ? -1 : 0}
+              aria-current="page"
+              aria-label={`Page ${props.currentPageNumber}, click to change page`}
               data-testid="current-page-link-mobile"
               className={` z-10 inline-flex items-center border border-x-0 border-gray-300 hover:bg-gray-50 px-4 py-2 text-sm font-medium text-text-600  cursor-pointer ${
                 isCurrentPageButtonDisabled ? "bg-gray-100" : ""
@@ -216,10 +296,20 @@ const Pagination: FunctionComponent<ComponentProps> = (
               onClick={() => {
                 setShowPaginationModel(true);
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setShowPaginationModel(true);
+                }
+              }}
             >
               <span>{props.currentPageNumber}</span>
             </li>
             <li
+              role="button"
+              tabIndex={isNextDisabled ? -1 : 0}
+              aria-disabled={isNextDisabled}
+              aria-label="Go to next page"
               onClick={() => {
                 let currentPageNumber: number = props.currentPageNumber;
 
@@ -234,6 +324,21 @@ const Pagination: FunctionComponent<ComponentProps> = (
                   );
                 }
               }}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if ((e.key === "Enter" || e.key === " ") && !isNextDisabled) {
+                  e.preventDefault();
+                  let currentPageNumber: number = props.currentPageNumber;
+                  if (typeof currentPageNumber === "string") {
+                    currentPageNumber = parseInt(currentPageNumber);
+                  }
+                  if (props.onNavigateToPage) {
+                    props.onNavigateToPage(
+                      currentPageNumber + 1,
+                      props.itemsOnPage,
+                    );
+                  }
+                }
+              }}
               className={` inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500  ${
                 isNextDisabled
                   ? "bg-gray-100"
@@ -243,7 +348,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
               <span>Next</span>
             </li>
           </ul>
-        </nav>
+        </div>
       </div>
 
       {showPaginationModel && (
@@ -317,7 +422,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
           }}
         />
       )}
-    </div>
+    </nav>
   );
 };
 

package/UI/Components/ProgressBar/ProgressBar.tsx

@@ -50,13 +50,23 @@ const ProgressBar: FunctionComponent<ComponentProps> = (
   }
 
   return (
-    <div className={`w-full ${progressBarSize} mb-4 bg-gray-200 rounded-full`}>
+    <div
+      className={`w-full ${progressBarSize} mb-4 bg-gray-200 rounded-full`}
+      role="progressbar"
+      aria-valuenow={percent}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={`Progress: ${props.count} of ${props.totalCount} ${props.suffix} (${percent}%)`}
+    >
       <div
         data-testid="progress-bar"
         className={`${progressBarSize} bg-indigo-600 rounded-full `}
         style={{ width: percent + "%" }}
       ></div>
-      <div className="text-sm text-gray-400 mt-1 flex justify-between">
+      <div
+        className="text-sm text-gray-400 mt-1 flex justify-between"
+        aria-hidden="true"
+      >
         <div data-testid="progress-bar-count">
           {props.count} {props.suffix}
         </div>

package/UI/Components/Radio/Radio.tsx

@@ -4,6 +4,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 
@@ -22,11 +23,14 @@ export interface ComponentProps {
   tabIndex?: number | undefined;
   error?: string | undefined;
   dataTestId?: string | undefined;
+  ariaLabel?: string | undefined;
 }
 
 const Radio: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const uniqueId: string = useId();
+  const errorId: string = `radio-error-${uniqueId}`;
   const [value, setValue] = useState<RadioValue | undefined>(
     props.initialValue || props.value || undefined,
   );
@@ -41,14 +45,20 @@ const Radio: FunctionComponent<ComponentProps> = (
     <div
       className={`mt-2 space-y-2 ${props.className}`}
       data-testid={props.dataTestId}
+      role="radiogroup"
+      aria-label={props.ariaLabel}
+      aria-invalid={props.error ? "true" : undefined}
+      aria-describedby={props.error ? errorId : undefined}
     >
       {props.options.map((option: RadioOption, index: number) => {
+        const optionId: string = `${groupName}-option-${index}`;
         return (
           <div key={index} className="flex items-center gap-x-3">
             <input
+              id={optionId}
               tabIndex={props.tabIndex}
               checked={value === option.value}
-              onClick={() => {
+              onChange={() => {
                 setValue(option.value);
                 if (props.onChange) {
                   props.onChange(option.value);
@@ -64,7 +74,10 @@ const Radio: FunctionComponent<ComponentProps> = (
               type="radio"
               className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
             />
-            <label className="block text-sm font-medium leading-6 text-gray-900">
+            <label
+              htmlFor={optionId}
+              className="block text-sm font-medium leading-6 text-gray-900"
+            >
               {option.label}
             </label>
           </div>
@@ -72,7 +85,12 @@ const Radio: FunctionComponent<ComponentProps> = (
       })}
 
       {props.error && (
-        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+        <p
+          id={errorId}
+          data-testid="error-message"
+          className="mt-1 text-sm text-red-400"
+          role="alert"
+        >
           {props.error}
         </p>
       )}

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -7,7 +7,10 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import Link from "../../../Types/Link";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useState, useCallback } from "react";
+import GlobalEvents from "../../Utils/GlobalEvents";
+
+export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   link: Link;
@@ -29,43 +32,67 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
   const [error, setError] = useState<string>("");
   const [count, setCount] = useState<number>(0);
 
-  const fetchCount: PromiseVoidFunction = async (): Promise<void> => {
-    if (!props.modelType) {
-      return;
-    }
+  const fetchCount: PromiseVoidFunction =
+    useCallback(async (): Promise<void> => {
+      if (!props.modelType) {
+        return;
+      }
 
-    if (!props.countQuery) {
-      return;
-    }
+      if (!props.countQuery) {
+        return;
+      }
 
-    setError("");
-    setIsLoading(true);
+      setError("");
+      setIsLoading(true);
 
-    if (props.onCountFetchInit) {
-      props.onCountFetchInit();
-    }
+      if (props.onCountFetchInit) {
+        props.onCountFetchInit();
+      }
 
-    try {
-      const count: number = await ModelAPI.count<BaseModel>({
-        modelType: props.modelType,
-        query: props.countQuery,
-        requestOptions: props.requestOptions,
-      });
+      try {
+        const count: number = await ModelAPI.count<BaseModel>({
+          modelType: props.modelType,
+          query: props.countQuery,
+          requestOptions: props.requestOptions,
+        });
 
-      setCount(count);
-      setError("");
-    } catch (err) {
-      setError(API.getFriendlyMessage(err));
-    }
+        setCount(count);
+        setError("");
+      } catch (err) {
+        setError(API.getFriendlyMessage(err));
+      }
 
-    setIsLoading(false);
-  };
+      setIsLoading(false);
+    }, [
+      props.modelType,
+      props.countQuery,
+      props.requestOptions,
+      props.onCountFetchInit,
+    ]);
 
   useEffect(() => {
     fetchCount().catch((err: Error) => {
       setError(API.getFriendlyMessage(err));
     });
-  }, [props.countQuery]);
+  }, [fetchCount]);
+
+  // Listen for global refresh events
+  useEffect(() => {
+    const handleRefresh: () => void = (): void => {
+      fetchCount().catch((err: Error) => {
+        setError(API.getFriendlyMessage(err));
+      });
+    };
+
+    GlobalEvents.addEventListener(REFRESH_SIDEBAR_COUNT_EVENT, handleRefresh);
+
+    return () => {
+      GlobalEvents.removeEventListener(
+        REFRESH_SIDEBAR_COUNT_EVENT,
+        handleRefresh,
+      );
+    };
+  }, [fetchCount]);
 
   return (
     <SideMenuItem

package/UI/Components/StatusBubble/StatusBubble.tsx

@@ -17,8 +17,13 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
     : Black.toString();
 
   return (
-    <div className="flex" style={props.style}>
-      <div className="-mr-2 ml-5">
+    <div
+      className="flex"
+      style={props.style}
+      role="status"
+      aria-label={`Status: ${props.text}`}
+    >
+      <div className="-mr-2 ml-5" aria-hidden="true">
         <span className="relative -left-1 -translate-x-full top-1/2 -translate-y-1/2 flex h-3.5 w-3.5">
           <span
             className={`${