add console warnings

EasyPost · Nov 14, 2023 · 33b5925 · 33b5925
1 parent e13e0b8
commit 33b5925
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/easy-ui-react/src/InputField/InputField.tsx b/easy-ui-react/src/InputField/InputField.tsx
@@ -11,6 +11,7 @@ import { useInputField } from "./useInputField";
 import styles from "./InputField.module.scss";
 import {
   getElementType,
+  logWarningForMissingAriaLabel,
   logWarningsForInvalidPropConfiguration,
 } from "./utilities";
 
@@ -106,6 +107,7 @@ export function InputField(props: InputFieldProps) {
     validationState = "valid",
     isLabelEmphasized = false,
     autoFocus = false,
+    "aria-label": ariaLabel,
     label,
     errorText,
     helperText,
@@ -135,6 +137,8 @@ export function InputField(props: InputFieldProps) {
     definedIconsWithTextarea,
   );
 
+  logWarningForMissingAriaLabel(label, ariaLabel);
+
   const isPassword = type === "password";
   const hasError = validationState === "invalid";
   const showErrorText = hasError && errorText;

diff --git a/easy-ui-react/src/InputField/utilities.ts b/easy-ui-react/src/InputField/utilities.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { InputSize } from "./InputField";
 
 /** Small fields need xs icon */
@@ -28,6 +29,15 @@ export function logWarningsForInvalidPropConfiguration(
   }
 }
 
+export function logWarningForMissingAriaLabel(
+  label: ReactNode,
+  ariaLabel: string | undefined,
+) {
+  if (!label && !ariaLabel) {
+    console.warn("An aria-label must be provided if omitting `label`");
+  }
+}
+
 export function getElementType(isMultiline: boolean) {
   return isMultiline ? "textarea" : "input";
 }
diff --git a/easy-ui-react/src/Select/Select.tsx b/easy-ui-react/src/Select/Select.tsx
@@ -8,6 +8,7 @@ import { SelectOption } from "./SelectOption";
 import { SelectSection } from "./SelectSection";
 import { SelectOverlay } from "./SelectOverlay";
 import { useTriggerWidth } from "../Menu/useTriggerWidth";
+import { logWarningForMissingAriaLabel } from "../InputField/utilities";
 
 export type BaseSelectProps<T> = {
   /** Method that is called when the open state of the select field changes. */
@@ -96,6 +97,7 @@ export function Select<T extends object>(props: SelectProps<T>) {
     validationState,
     isLabelEmphasized,
     size = "md",
+    "aria-label": ariaLabel,
     label,
     errorText,
     helperText,
@@ -106,6 +108,8 @@ export function Select<T extends object>(props: SelectProps<T>) {
   const triggerRef = React.useRef(null);
   const selectState = useSelectState(props);
 
+  logWarningForMissingAriaLabel(label, ariaLabel);
+
   const {
     labelProps,
     valueProps,