@oneuptime/common 11.3.2 → 11.3.4

package/UI/Components/Date/RangeStartAndEndDateView.tsx

@@ -7,7 +7,7 @@ import { GetReactElementFunction } from "../../../UI/Types/FunctionTypes";
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
 import RangeStartAndEndDateEdit from "./RangeStartAndEndDateEdit";
-import Modal from "../Modal/Modal";
+import Modal, { ModalWidth } from "../Modal/Modal";
 
 export interface ComponentProps {
   dashboardStartAndEndDate: RangeStartAndEndDateTime;
@@ -25,17 +25,65 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
   const isCustomRange: boolean =
     props.dashboardStartAndEndDate.range === TimeRange.CUSTOM;
 
-  const getContent: GetReactElementFunction = (): ReactElement => {
-    const title: string = isCustomRange
-      ? `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
-            OneUptimeDate.getCurrentDate(),
-        )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-          props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
-            OneUptimeDate.getCurrentDate(),
-        )}`
-      : props.dashboardStartAndEndDate.range;
+  /*
+   * The Apply button should only commit a custom range when both ends are set
+   * and the start is strictly before the end.
+   */
+  const isSelectionValid: (
+    selection: RangeStartAndEndDateTime | null,
+  ) => boolean = (selection: RangeStartAndEndDateTime | null): boolean => {
+    if (!selection) {
+      return false;
+    }
+
+    if (selection.range !== TimeRange.CUSTOM) {
+      return true;
+    }
+
+    const startAndEndDate: typeof selection.startAndEndDate =
+      selection.startAndEndDate;
+
+    if (!startAndEndDate) {
+      return false;
+    }
+
+    return OneUptimeDate.isAfter(
+      startAndEndDate.endValue,
+      startAndEndDate.startValue,
+    );
+  };
+
+  const closeModal: () => void = (): void => {
+    setTempStartAndEndDate(null);
+    setShowTimeSelectModal(false);
+  };
 
+  const commitSelection: (selection: RangeStartAndEndDateTime) => void = (
+    selection: RangeStartAndEndDateTime,
+  ): void => {
+    props.onChange(selection);
+    closeModal();
+  };
+
+  const getButtonTitle: () => string = (): string => {
+    if (isCustomRange) {
+      return `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
+          OneUptimeDate.getCurrentDate(),
+        false,
+        true,
+      )} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+        props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
+          OneUptimeDate.getCurrentDate(),
+        false,
+        true,
+      )}`;
+    }
+
+    return props.dashboardStartAndEndDate.range;
+  };
+
+  const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <div>
         <Tooltip text="Click to change the date and time range of data on this dashboard.">
@@ -48,30 +96,34 @@ const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
             }}
           >
             <Icon icon={IconProp.Clock} className="w-3.5 h-3.5 text-gray-500" />
-            <span className="text-xs text-gray-500">{title}</span>
+            <span className="text-xs text-gray-500">{getButtonTitle()}</span>
           </button>
         </Tooltip>
         {showTimeSelectModal && (
           <Modal
-            title="Select Start and End Time"
-            onClose={() => {
-              setTempStartAndEndDate(null);
-              setShowTimeSelectModal(false);
-            }}
+            title="Select Time Range"
+            description="Choose a quick range or set an exact start and end date & time."
+            icon={IconProp.Clock}
+            modalWidth={ModalWidth.Medium}
+            submitButtonText="Apply"
+            disableSubmitButton={!isSelectionValid(tempStartAndEndDate)}
+            onClose={closeModal}
             onSubmit={() => {
               if (tempStartAndEndDate) {
-                props.onChange(tempStartAndEndDate);
+                commitSelection(tempStartAndEndDate);
               }
-              setShowTimeSelectModal(false);
-              setTempStartAndEndDate(null);
             }}
           >
-            <div className="mt-5">
+            <div className="mt-3">
               <RangeStartAndEndDateEdit
                 value={tempStartAndEndDate || undefined}
                 onChange={(startAndEndDate: RangeStartAndEndDateTime) => {
                   setTempStartAndEndDate(startAndEndDate);
                 }}
+                onApply={(startAndEndDate: RangeStartAndEndDateTime) => {
+                  // Quick ranges apply immediately and close the modal.
+                  commitSelection(startAndEndDate);
+                }}
               />
             </div>
           </Modal>

package/UI/Components/EditionLabel/EditionLabel.tsx

@@ -462,7 +462,12 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
         type="button"
         onClick={openDialog}
         className={`${pillClassName} ${props.className ? props.className : ""}`}
-        aria-label={`${editionName} details`}
+        /*
+         * Accessible name must include the visible text (WCAG 2.5.3 Label in
+         * Name) so voice-control users can activate it by the words they see
+         * ("{editionName}" and "{ctaLabel}", e.g. "Learn more").
+         */
+        aria-label={`${editionName}, ${ctaLabel}`}
       >
         {showAlertedPill && (
           <Icon

package/UI/Components/Footer/Footer.tsx

@@ -66,7 +66,7 @@ const Footer: FunctionComponent<ComponentProps> = (
           {/* Copyright: Show on mobile, hide on larger screens unless specified */}
           <div className="mt-5 md:order-1 md:mt-0 block md:hidden lg:block">
             {props.copyright && (
-              <p className="text-center text-sm text-gray-400">
+              <p className="text-center text-sm text-gray-500">
                 &copy; {props.copyright}
               </p>
             )}

package/UI/Components/GanttChart/ChartContainer.tsx

@@ -33,7 +33,14 @@ const ChartContainer: FunctionComponent<ComponentProps> = (
   }, []);
 
   return (
-    <div ref={divRef} className={"w-full"}>
+    /*
+     * `isolate` creates a new stacking context so the chart's internal
+     * z-indexes (e.g. a highlighted/matched bar uses z-30, see Bar/Index.tsx)
+     * stay trapped inside the chart. Without it those bars paint above
+     * page-level overlays like the span-details SideOver (z-10), making a
+     * matched span "show above" the sidebar.
+     */
+    <div ref={divRef} className={"w-full"} style={{ isolation: "isolate" }}>
       {props.children}
     </div>
   );

package/UI/Components/Icon/Icon.tsx

@@ -35,6 +35,14 @@ export interface ComponentProps {
   onClick?: (() => void) | undefined;
   type?: IconType | undefined;
   style?: React.CSSProperties | undefined;
+  /*
+   * When the icon conveys meaning on its own (e.g. a standalone status or
+   * severity indicator that is not described by adjacent text), pass an
+   * ariaLabel so the icon is exposed to assistive technology as an image
+   * with an accessible name (WCAG 1.1.1). When omitted, the icon is treated
+   * as decorative and hidden from assistive technology.
+   */
+  ariaLabel?: string | undefined;
   "data-testid"?: string;
 }
 const Icon: FunctionComponent<ComponentProps> = ({
@@ -46,6 +54,7 @@ const Icon: FunctionComponent<ComponentProps> = ({
   onClick,
   type,
   style,
+  ariaLabel,
   "data-testid": dataTestId,
 }: ComponentProps): ReactElement => {
   let sizeClassName: string = "";
@@ -113,7 +122,10 @@ const Icon: FunctionComponent<ComponentProps> = ({
       | undefined,
   ): ReactElement => {
     return (
-      <div role="icon">
+      <div
+        role={ariaLabel ? "img" : undefined}
+        aria-label={ariaLabel || undefined}
+      >
         <svg
           onClick={() => {
             if (onClick) {

package/UI/Components/Image/Image.tsx

@@ -41,7 +41,12 @@ const Image: FunctionComponent<ComponentProps> = (
           props.onClick?.();
         }}
         data-testid={props["data-testid"]}
-        alt={props.alt}
+        /*
+         * Always render an alt attribute so the <img> is never missing it
+         * (WCAG 1.1.1). Callers should pass a descriptive alt for meaningful
+         * images (e.g. avatars); an empty string marks the image decorative.
+         */
+        alt={props.alt ?? ""}
         src={url}
         height={props.height}
         className={props.className}

package/UI/Components/Link/Link.tsx

@@ -33,6 +33,28 @@ const Link: FunctionComponent<ComponentProps> = (
     children = props.children;
   }
 
+  /*
+   * Neither a destination nor an action: this is static text, not a link or a
+   * button. Render a <span> rather than an <a> with no href, which is
+   * ambiguous to assistive technology (is it a link, a button, or just text?
+   * WCAG 4.1.2 Name, Role, Value).
+   */
+  if (!props.to && !props.onClick) {
+    return (
+      <span
+        id={props.id}
+        className={`cursor-default ${props.className || ""}`}
+        onMouseOver={props.onMouseOver}
+        onMouseOut={props.onMouseOut}
+        onMouseLeave={props.onMouseLeave}
+        style={props.style}
+        title={props.title}
+      >
+        {children}
+      </span>
+    );
+  }
+
   const linkProps: JSONObject = {};
 
   /*

package/UI/Components/MasterPage/MasterPage.tsx

@@ -15,6 +15,12 @@ export interface ComponentProps {
   className?: string | undefined;
   hideHeader?: boolean | undefined;
   makeTopSectionUnstick?: boolean | undefined;
+  /*
+   * Set when the consumer renders its own <main id="main-content"> landmark
+   * and skip link inside children (e.g. the status page), so this component
+   * does not add a second, nested main landmark or a duplicate skip link.
+   */
+  disableMainContentWrapper?: boolean | undefined;
 }
 
 const MasterPage: FunctionComponent<ComponentProps> = (
@@ -42,6 +48,19 @@ const MasterPage: FunctionComponent<ComponentProps> = (
     <React.Fragment>
       {isOnline && (
         <div className={props.className}>
+          {/*
+           * Skip link so keyboard and screen-reader users can bypass the
+           * repeated header/navigation and jump straight to the page content
+           * (WCAG 2.4.1 Bypass Blocks). Visually hidden until focused.
+           */}
+          {!props.disableMainContentWrapper && (
+            <a
+              href="#main-content"
+              className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-indigo-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white focus:shadow-lg"
+            >
+              Skip to main content
+            </a>
+          )}
           <div
             className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
           >
@@ -53,7 +72,17 @@ const MasterPage: FunctionComponent<ComponentProps> = (
             />
           </div>
 
-          {props.children}
+          {props.disableMainContentWrapper ? (
+            props.children
+          ) : (
+            <main
+              id="main-content"
+              tabIndex={-1}
+              className="focus:outline-none"
+            >
+              {props.children}
+            </main>
+          )}
 
           {props.footer && props.footer}
         </div>

package/UI/Components/Page/Page.tsx

@@ -40,6 +40,33 @@ const Page: FunctionComponent<ComponentProps> = (
     }
   }, [props.breadcrumbLinks]);
 
+  /*
+   * Give each page a unique, descriptive document title (WCAG 2.4.2 Page
+   * Titled). Without this, every page keeps the generic title set once at app
+   * startup (e.g. "OneUptime | Dashboard"), which does not describe the page.
+   * Prefer the breadcrumb trail (most specific page last) and fall back to the
+   * page title.
+   */
+  useEffect(() => {
+    const breadcrumbTitle: string | undefined =
+      props.breadcrumbLinks && props.breadcrumbLinks.length > 0
+        ? props.breadcrumbLinks
+            .map((link: Link) => {
+              return translateString(link.title);
+            })
+            .filter((value: string | undefined): value is string => {
+              return Boolean(value);
+            })
+            .join(" - ")
+        : undefined;
+
+    const pageTitle: string | undefined = breadcrumbTitle || translatedTitle;
+
+    if (pageTitle) {
+      document.title = `OneUptime | ${pageTitle}`;
+    }
+  }, [translatedTitle, props.breadcrumbLinks]);
+
   if (props.error) {
     return <ErrorMessage message={props.error} />;
   }
@@ -104,7 +131,7 @@ const Page: FunctionComponent<ComponentProps> = (
       )}
 
       {props.sideMenu && (
-        <main className="mx-auto max-w-full pb-10">
+        <div className="mx-auto max-w-full pb-10">
           <div className="flex flex-col md:flex-row md:gap-4 lg:gap-5">
             {props.sideMenu}
 
@@ -117,7 +144,7 @@ const Page: FunctionComponent<ComponentProps> = (
               </div>
             )}
           </div>
-        </main>
+        </div>
       )}
 
       {!props.sideMenu && !props.isLoading && props.children}