@royaloperahouse/chord 2.3.3 → 2.3.5

package/dist/chord.cjs.development.js

@@ -3668,6 +3668,54 @@ var ErrorLabel$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_temp
   return "var(--base-color-errorstate)";
 });
 
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === undefined) return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.', e);
+    return false;
+  }
+}; // React hook version of isIOS (for server side rendering)
+
+
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+      IOS = _useState[0],
+      setIOS = _useState[1];
+
+  React.useEffect(function () {
+    if (typeof navigator === undefined) return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+}; // Checks device size based on window width
+
+var isMobile = function isMobile() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.', e);
+    return false;
+  }
+}; // React hook version of isMobile (for server side rendering)
+
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+      mobile = _useState2[0],
+      setMobile = _useState2[1];
+
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -3715,12 +3763,14 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       width = _ref.width,
-      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width"]);
+      id = _ref.id,
+      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width", "id"]);
 
   var _useState = React.useState(false),
       showPassword = _useState[0],
       setShowPassword = _useState[1];
 
+  var isMobile = useMobile();
   var isPasswordField = type === 'password';
   var showHideButtonText = showPassword ? 'Hide' : 'Show';
 
@@ -3736,7 +3786,20 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      showHideClickHandler();
+    }
+  };
+
+  var inputId = React.useMemo(function () {
+    return id || "text-field-" + Math.random().toString(36).substr(2, 9);
+  }, [id]);
+  var errorId = inputId + "-error";
+  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: inputId
+  }, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
     darkMode: darkMode,
     "data-testid": "text-field-text-label"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
@@ -3744,20 +3807,30 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, label)), /*#__PURE__*/React__default.createElement(InputWrapper, {
     width: width
   }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    id: inputId,
     isPasswordField: isPasswordField,
     type: inputType,
     error: error,
     darkMode: darkMode,
     "data-testid": "text-field-input",
-    ref: ref
+    ref: ref,
+    "aria-invalid": !isMobile ? error !== undefined : undefined,
+    "aria-describedby": error ? errorId : undefined
   }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
     type: "button",
-    onClick: showHideClickHandler
+    onClick: showHideClickHandler,
+    onKeyDown: handleKeyDown,
+    "aria-label": showHideButtonText + " password",
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Overline, {
     level: 1
   }, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
+    id: errorId,
     darkMode: darkMode,
-    "data-testid": "text-field-error-label"
+    "data-testid": "text-field-error-label",
+    role: "alert",
+    "aria-live": "assertive",
+    tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, error)));
@@ -3814,28 +3887,43 @@ var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templa
  * This component was introduced due to incompatibilities between versions of the Chord library.
  * */
 
-var TextFieldLegacy = function TextFieldLegacy(_ref) {
+var TextFieldLegacy = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
       error = _ref.error,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       width = _ref.width,
-      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width"]);
+      id = _ref.id,
+      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "darkMode", "width", "id"]);
 
-  return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel$2, {
+  var isMobile = useMobile();
+  var inputId = React.useMemo(function () {
+    return id || "text-field-" + Math.random().toString(36).substr(2, 9);
+  }, [id]);
+  var errorId = inputId + "-error";
+  return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: inputId
+  }, /*#__PURE__*/React__default.createElement(TextLabel$2, {
     darkMode: darkMode,
     "data-testid": "text-field-text-label"
   }, label), /*#__PURE__*/React__default.createElement(Input$1, Object.assign({
+    id: inputId,
     type: "text",
     error: error,
     darkMode: darkMode,
     "data-testid": "text-field-input",
-    width: width
+    width: width,
+    ref: ref,
+    "aria-invalid": !isMobile ? error !== undefined : undefined,
+    "aria-describedby": error ? errorId : undefined
   }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel$2, {
     darkMode: darkMode,
-    "data-testid": "text-field-error-label"
+    "data-testid": "text-field-error-label",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive"
   }, error) : null);
-};
+});
 
 var _templateObject$q, _templateObject2$e;
 var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
@@ -8171,54 +8259,6 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.', e);
-    return false;
-  }
-}; // React hook version of isIOS (for server side rendering)
-
-
-var useIOS = function useIOS() {
-  var _useState = React.useState(false),
-      IOS = _useState[0],
-      setIOS = _useState[1];
-
-  React.useEffect(function () {
-    if (typeof navigator === undefined) return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-}; // Checks device size based on window width
-
-var isMobile = function isMobile() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof window === undefined) return false;
-    return window.innerWidth < breakpoints.sm;
-  } catch (e) {
-    console.warn('Error checking if device is mobile.', e);
-    return false;
-  }
-}; // React hook version of isMobile (for server side rendering)
-
-var useMobile = function useMobile() {
-  var _useState2 = React.useState(false),
-      mobile = _useState2[0],
-      setMobile = _useState2[1];
-
-  React.useEffect(function () {
-    if (typeof window === undefined) return;
-    setMobile(isMobile());
-  }, []);
-  return mobile;
-};
-
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -9777,8 +9817,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
       error = _ref.error,
       width = _ref.width,
       darkMode = _ref.darkMode,
+      id = _ref.id,
       children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
+  var errorId = id + "-error";
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id
+  }, !!label && /*#__PURE__*/React__default.createElement(TextLabel$4, {
     darkMode: darkMode,
     "data-testid": "select2-text-label"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
@@ -9789,7 +9833,10 @@ var WrapperComponent = function WrapperComponent(_ref) {
     darkMode: darkMode
   }, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$5, {
     darkMode: darkMode,
-    "data-testid": "select2-error-label"
+    "data-testid": "select2-error-label",
+    id: errorId,
+    role: "alert",
+    "aria-live": "assertive"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 6
   }, error)));
@@ -9818,14 +9865,23 @@ var SelectComponent = function SelectComponent(_ref2) {
       _ref2$isSearchable = _ref2.isSearchable,
       isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
       components = _ref2.components,
-      selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
+      id = _ref2.id,
+      selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components", "id"]);
 
+  var isMobile = useMobile();
+  var inputId = React.useMemo(function () {
+    return id || "chord-select-" + Math.random().toString(36).substr(2, 9);
+  }, [id]);
+  var errorId = inputId + "-error";
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode
+    darkMode: darkMode,
+    id: inputId
   }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
+    inputId: inputId,
+    "aria-errormessage": errorId,
     components: _extends({
       DropdownIndicator: DropdownIndicator,
       LoadingIndicator: undefined,
@@ -9833,7 +9889,9 @@ var SelectComponent = function SelectComponent(_ref2) {
     }, components),
     className: "chord-select-container",
     classNamePrefix: "chord-select",
-    isSearchable: isSearchable
+    isSearchable: isSearchable,
+    "aria-invalid": !isMobile ? !!error : undefined,
+    "aria-describedby": error ? errorId : undefined
   })));
 };
 
@@ -9859,21 +9917,30 @@ var SelectComponent$1 = function SelectComponent(_ref) {
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       components = _ref.components,
-      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
+      id = _ref.id,
+      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components", "id"]);
 
+  var inputId = React.useMemo(function () {
+    return id || "chord-select-" + Math.random().toString(36).substr(2, 9);
+  }, [id]);
+  var errorId = inputId + "-error";
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode
+    darkMode: darkMode,
+    id: inputId
   }, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
+    id: inputId,
     components: _extends({
       DropdownIndicator: DropdownIndicator,
       LoadingIndicator: undefined,
       IndicatorSeparator: undefined
     }, components),
     className: "chord-select-container",
-    classNamePrefix: "chord-select"
+    classNamePrefix: "chord-select",
+    "aria-invalid": !!error,
+    "aria-describedby": error ? errorId : undefined
   })));
 };