@okta/odyssey-react-mui 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.4.0",
+    "@okta/odyssey-design-tokens": "1.6.0",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "612e08d4ea3bd4c8acb732df7036bce16f4eda0b"
+  "gitHead": "03b8e69263df83250402101d7637a5ede3578099"
 }

package/src/Accordion.tsx

@@ -0,0 +1,94 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ReactNode, memo } from "react";
+import type { SeleniumProps } from "./SeleniumProps";
+import {
+  Accordion as MuiAccordion,
+  AccordionDetails as MuiAccordionDetails,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material";
+import { ChevronDownIcon } from "./icons.generated";
+import { Support } from "./Typography";
+
+export type AccordionProps = {
+  /**
+   * The content of the Accordion itself
+   */
+  children: ReactNode;
+  /**
+   * The label text for the AccordionSummary
+   */
+  label: string;
+  /**
+   * If true, the Accordion item will have a shadow.
+   */
+  hasShadow?: boolean;
+  /**
+   * Whether the item is expanded by default
+   */
+  isDefaultExpanded?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is expanded
+   */
+  isExpanded?: boolean;
+  /**
+   * Event fired when the expansion state of the accordion is changed
+   */
+  onChange?: MuiAccordionProps["onChange"];
+} & (
+  | {
+      isExpanded: boolean;
+      isDefaultExpanded?: never;
+    }
+  | {
+      isDefaultExpanded?: boolean;
+      isExpanded?: never;
+    }
+) &
+  SeleniumProps;
+
+const Accordion = ({
+  children,
+  label,
+  hasShadow = true,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  onChange,
+}: AccordionProps) => {
+  return (
+    <MuiAccordion
+      defaultExpanded={isDefaultExpanded}
+      disabled={isDisabled}
+      disableGutters
+      expanded={isExpanded}
+      onChange={onChange}
+      className={hasShadow ? `hasShadow` : undefined}
+    >
+      <MuiAccordionSummary expandIcon={<ChevronDownIcon />}>
+        <Support component="div">{label}</Support>
+      </MuiAccordionSummary>
+      <MuiAccordionDetails>{children}</MuiAccordionDetails>
+    </MuiAccordion>
+  );
+};
+
+const MemoizedAccordion = memo(Accordion);
+MemoizedAccordion.displayName = "Accordion";
+
+export { MemoizedAccordion as Accordion };

package/src/Autocomplete.tsx

@@ -184,10 +184,20 @@ const Autocomplete = <
         hint={hint}
         label={label}
         isOptional={isOptional}
-        renderFieldComponent={({ ariaDescribedBy, id }) => (
+        renderFieldComponent={({
+          ariaDescribedBy,
+          id,
+          errorMessageElementId,
+          labelElementId,
+        }) => (
           <InputBase
             {...params}
             {...InputProps}
+            inputProps={{
+              ...params.inputProps,
+              "aria-errormessage": errorMessageElementId,
+              "aria-labelledby": labelElementId,
+            }}
             aria-describedby={ariaDescribedBy}
             id={id}
             name={nameOverride ?? id}

package/src/Breadcrumbs.tsx

@@ -95,13 +95,13 @@ const breadcrumbProviderValue: Record<
   },
 };
 
+const defaultTruncationValue = 5;
+
 const BreadcrumbList = ({
   children,
   homeHref,
-  maxVisibleItems: maxVisibleItemsOverride,
+  maxVisibleItems = defaultTruncationValue,
 }: BreadcrumbsProps) => {
-  const maxVisibleItems = maxVisibleItemsOverride ?? children.length;
-
   const { t } = useTranslation();
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

package/src/Callout.tsx

@@ -51,7 +51,7 @@ const Callout = ({ children, role, severity, testId, title }: CalloutProps) => {
 
   return (
     <Alert data-se={testId} role={role} severity={severity} variant="callout">
-      <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
+      <ScreenReaderText>{t(`severity.${severity}`)}</ScreenReaderText>
       {title && <AlertTitle>{title}</AlertTitle>}
       <Box component="div">{children}</Box>
     </Alert>

package/src/CheckboxGroup.tsx

@@ -56,8 +56,13 @@ const CheckboxGroup = ({
   testId,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy }) => (
-      <MuiFormGroup aria-describedby={ariaDescribedBy} data-se={testId}>
+    ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
+      <MuiFormGroup
+        aria-describedby={ariaDescribedBy}
+        aria-errormessage={errorMessageElementId}
+        aria-labelledby={labelElementId}
+        data-se={testId}
+      >
         {children}
       </MuiFormGroup>
     ),

package/src/Dialog.tsx

@@ -118,7 +118,13 @@ const Dialog = ({
           variant="floating"
         />
       </DialogTitle>
-      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>
+      <DialogContent
+        dividers={isContentScrollable}
+        ref={dialogContentRef}
+        {...(isContentScrollable && {
+          tabIndex: 0,
+        })}
+      >
         {content}
       </DialogContent>
 

package/src/Field.tsx

@@ -77,11 +77,15 @@ export type FieldProps = {
   renderFieldComponent: ({
     ariaDescribedBy,
     dataSe,
+    errorMessageElementId,
     id,
+    labelElementId,
   }: {
     ariaDescribedBy?: string;
     dataSe?: string;
+    errorMessageElementId?: string;
     id: string;
+    labelElementId: string;
   }) => ReactElement;
 };
 
@@ -101,12 +105,12 @@ const Field = ({
 
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
-  const errorId = errorMessage ? `${id}-error` : undefined;
-  const labelId = `${id}-label`;
+  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;
+  const labelElementId = `${id}-label`;
 
   const ariaDescribedBy = useMemo(
-    () => [hintId, errorId].join(" ").trim() || undefined,
-    [errorId, hintId]
+    () => [hintId, errorMessageElementId].join(" ").trim() || undefined,
+    [errorMessageElementId, hintId]
   );
 
   const { isDisabled: isFieldsetDisabled } = useFieldset();
@@ -135,7 +139,7 @@ const Field = ({
       ) : (
         <FieldLabel
           hasVisibleLabel={hasVisibleLabel}
-          id={labelId}
+          id={labelElementId}
           inputId={id}
           isOptional={isOptional}
           text={label}
@@ -146,10 +150,14 @@ const Field = ({
 
       {renderFieldComponent({
         ariaDescribedBy,
+        errorMessageElementId,
         id,
+        labelElementId,
       })}
 
-      {errorMessage && <FieldError id={errorId} text={errorMessage} />}
+      {errorMessage && (
+        <FieldError id={errorMessageElementId} text={errorMessage} />
+      )}
     </MuiFormControl>
   );
 };

package/src/NativeSelect.tsx

@@ -99,11 +99,17 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
     ref
   ) => {
     const renderFieldComponent = useCallback(
-      () => (
+      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
         <MuiSelect
+          aria-describedby={ariaDescribedBy}
+          children={children}
           data-se={testId}
           defaultValue={defaultValue}
           id={idOverride}
+          inputProps={{
+            "aria-errormessage": errorMessageElementId,
+            "aria-labelledby": labelElementId,
+          }}
           name={idOverride}
           multiple={isMultiSelect}
           native={true}
@@ -112,7 +118,6 @@ const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           onFocus={onFocus}
           ref={ref}
           value={value}
-          children={children}
         />
       ),
       [

package/src/PasswordField.tsx

@@ -127,10 +127,10 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
     }, []);
 
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, id }) => (
+      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
           aria-describedby={ariaDescribedBy}
-          autoComplete={autoCompleteType}
+          autoComplete={inputType === "password" ? autoCompleteType : "off"}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */
           autoFocus={hasInitialFocus}
           data-se={testId}
@@ -151,7 +151,12 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             )
           }
           id={id}
-          inputProps={{ role: "textbox" }}
+          inputProps={{
+            "aria-errormessage": errorMessageElementId,
+            "aria-labelledby": labelElementId,
+            // role: "textbox" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.
+            role: "textbox",
+          }}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}

package/src/RadioGroup.tsx

@@ -10,8 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { RadioGroup as MuiRadioGroup } from "@mui/material";
-import { ChangeEventHandler, memo, ReactElement, useCallback } from "react";
+import {
+  RadioGroup as MuiRadioGroup,
+  type RadioGroupProps as MuiRadioGroupProps,
+} from "@mui/material";
+import { memo, ReactElement, useCallback } from "react";
 
 import { Radio, RadioProps } from "./Radio";
 import { Field } from "./Field";
@@ -53,7 +56,7 @@ export type RadioGroupProps = {
   /**
    * Listen for changes in the browser that change `value`
    */
-  onChange?: ChangeEventHandler<EventTarget>;
+  onChange?: MuiRadioGroupProps["onChange"];
   /**
    * The `value` on the selected Radio
    */
@@ -74,9 +77,11 @@ const RadioGroup = ({
   value,
 }: RadioGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, id }) => (
+    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiRadioGroup
         aria-describedby={ariaDescribedBy}
+        aria-errormessage={errorMessageElementId}
+        aria-labelledby={labelElementId}
         data-se={testId}
         defaultValue={defaultValue}
         id={id}

package/src/Select.tsx

@@ -10,19 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ReactNode, memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import {
   Box,
-  Chip,
   Checkbox as MuiCheckbox,
+  Chip,
+  ListItemSecondaryAction,
   ListSubheader,
   MenuItem,
   Select as MuiSelect,
-  SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 import { Field } from "./Field";
 import type { SeleniumProps } from "./SeleniumProps";
+import { CheckIcon } from "./icons.generated";
 
 export type SelectOption = {
   text: string;
@@ -30,11 +31,21 @@ export type SelectOption = {
   value?: string;
 };
 
-export type SelectProps = {
+export type SelectValueType<HasMultipleChoices> =
+  HasMultipleChoices extends true ? string[] : string;
+
+export type SelectProps<
+  Value extends SelectValueType<HasMultipleChoices>,
+  HasMultipleChoices extends boolean
+> = {
   /**
    * The error message for the Select
    */
   errorMessage?: string;
+  /**
+   * If `true`, the Select allows multiple selections
+   */
+  hasMultipleChoices?: HasMultipleChoices;
   /**
    * The hint text for the Select
    */
@@ -48,9 +59,10 @@ export type SelectProps = {
    */
   isDisabled?: boolean;
   /**
-   * If `true`, the Select allows multiple selections
+   * @deprecated Use `hasMultipleChoices` instead.
    */
-  isMultiSelect?: boolean;
+  /** **Deprecated:** use `hasMultipleChoices` */
+  isMultiSelect?: HasMultipleChoices;
   /**
    * If `true`, the Select is optional
    */
@@ -66,15 +78,15 @@ export type SelectProps = {
   /**
    * Callback fired when the Select loses focus
    */
-  onBlur?: MuiSelectProps["onBlur"];
+  onBlur?: MuiSelectProps<Value>["onBlur"];
   /**
    * Callback fired when the value of the Select changes
    */
-  onChange?: MuiSelectProps["onChange"];
+  onChange?: MuiSelectProps<Value>["onChange"];
   /**
    * Callback fired when the Select gains focus
    */
-  onFocus?: MuiSelectProps["onFocus"];
+  onFocus?: MuiSelectProps<Value>["onFocus"];
   /**
    * The options for the Select
    */
@@ -82,7 +94,7 @@ export type SelectProps = {
   /**
    * The value or values selected in the Select
    */
-  value?: string | string[];
+  value?: Value;
 } & SeleniumProps;
 
 /**
@@ -100,50 +112,59 @@ export type SelectProps = {
  *   - { text: string, type: "heading" } — Used to display a group heading with the text
  */
 
-const Select = ({
+const Select = <
+  Value extends SelectValueType<HasMultipleChoices>,
+  HasMultipleChoices extends boolean
+>({
   errorMessage,
+  hasMultipleChoices: hasMultipleChoicesProp,
   hint,
   id: idOverride,
   isDisabled = false,
-  isMultiSelect = false,
+  isMultiSelect,
   isOptional = false,
   label,
   name: nameOverride,
   onBlur,
   onChange: onChangeProp,
   onFocus,
-  value,
-  testId,
   options,
-}: SelectProps) => {
-  // If there's no value set, we set it to a blank string (if it's a single-select)
-  // or an empty array (if it's a multi-select)
-  if (typeof value === "undefined") {
-    value = isMultiSelect ? [] : "";
-  }
+  testId,
+  value,
+}: SelectProps<Value, HasMultipleChoices>) => {
+  const hasMultipleChoices = useMemo(
+    () =>
+      hasMultipleChoicesProp === undefined
+        ? isMultiSelect
+        : hasMultipleChoicesProp,
+    [hasMultipleChoicesProp, isMultiSelect]
+  );
 
-  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);
+  const formattedValueForMultiSelect = isMultiSelect
+    ? ([] as string[] as Value)
+    : ("" as string as Value);
 
-  const onChange = useCallback(
-    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {
-      const {
-        target: { value },
-      } = event;
+  const [selectedValue, setSelectedValue] = useState(
+    value === undefined ? formattedValueForMultiSelect : value
+  );
 
-      // Set the field value, with some additional logic to handle array values
-      // for multi-selects
-      if (isMultiSelect) {
-        setSelectedValue(typeof value === "string" ? value.split(",") : value);
+  const onChange = useCallback<NonNullable<MuiSelectProps<Value>["onChange"]>>(
+    (event, child) => {
+      const valueFromEvent = event.target.value;
+
+      if (typeof valueFromEvent === "string") {
+        if (hasMultipleChoices) {
+          setSelectedValue(valueFromEvent.split(",") as Value);
+        } else {
+          setSelectedValue(valueFromEvent as Value);
+        }
       } else {
-        setSelectedValue(value);
+        setSelectedValue(valueFromEvent);
       }
 
-      // Trigger the onChange event, if one has been passed
-      if (onChangeProp) {
-        onChangeProp(event, child);
-      }
+      onChangeProp?.(event, child);
     },
-    [isMultiSelect, onChangeProp, setSelectedValue]
+    [hasMultipleChoices, onChangeProp, setSelectedValue]
   );
 
   // Normalize the options array to accommodate the various
@@ -163,7 +184,7 @@ const Select = ({
   );
 
   const renderValue = useCallback(
-    (selected: string | string[]) => {
+    (selected: Value) => {
       // If the selected value isn't an array, then we don't need to display
       // chips and should fall back to the default render behavior
       if (typeof selected === "string") {
@@ -207,37 +228,42 @@ const Select = ({
 
         return (
           <MenuItem key={option.value} value={option.value}>
-            {isMultiSelect && (
+            {hasMultipleChoices && (
               <MuiCheckbox checked={selectedValue.includes(option.value)} />
             )}
             {option.text}
+            {selectedValue == option.value && (
+              <ListItemSecondaryAction>
+                <CheckIcon />
+              </ListItemSecondaryAction>
+            )}
           </MenuItem>
         );
       }),
-    [isMultiSelect, normalizedOptions, selectedValue]
+    [hasMultipleChoices, normalizedOptions, selectedValue]
   );
 
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, id }) => (
+    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiSelect
         aria-describedby={ariaDescribedBy}
+        aria-errormessage={errorMessageElementId}
         children={children}
         data-se={testId}
         id={id}
-        labelId={label}
-        multiple={isMultiSelect}
+        labelId={labelElementId}
+        multiple={hasMultipleChoices}
         name={nameOverride ?? id}
         onBlur={onBlur}
         onChange={onChange}
         onFocus={onFocus}
-        renderValue={isMultiSelect ? renderValue : undefined}
+        renderValue={hasMultipleChoices ? renderValue : undefined}
         value={selectedValue}
       />
     ),
     [
       children,
-      isMultiSelect,
-      label,
+      hasMultipleChoices,
       nameOverride,
       onBlur,
       onChange,

package/src/TextField.tsx

@@ -140,8 +140,12 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
     ref
   ) => {
     const renderFieldComponent = useCallback(
-      ({ ariaDescribedBy, id }) => (
+      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
         <InputBase
+          inputProps={{
+            "aria-errormessage": errorMessageElementId,
+            "aria-labelledby": labelElementId,
+          }}
           aria-describedby={ariaDescribedBy}
           autoComplete={autoCompleteType}
           /* eslint-disable-next-line jsx-a11y/no-autofocus */

package/src/index.ts

@@ -56,6 +56,7 @@ export type {
 
 export { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 
+export * from "./Accordion";
 export * from "./Autocomplete";
 export * from "./Banner";
 export * from "./Box";
@@ -65,6 +66,7 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
+export * from "./createShadowDom";
 export * from "./createUniqueId";
 export * from "./Dialog";
 export * from "./Fieldset";

package/src/properties/translations/odyssey-react-mui_cs.properties

@@ -1,6 +1,10 @@
+breadcrumbs.home.text = Domovsk\u00E1 str\u00E1nka
+breadcrumbs.label.text = Drobe\u010Dkov\u00E1 navigace
 fielderror.screenreader.text = Chyba
 fieldlabel.optional.text = Voliteln\u00E9
 fieldlabel.required.text = Povinn\u00E9
+passwordfield.icon.label.show = Zobrazit heslo
+passwordfield.icon.label.hide = Skr\u00FDt heslo
 severity.error = chyba
 severity.info = informace
 severity.success = \u00FAsp\u011Bch

package/src/properties/translations/odyssey-react-mui_da.properties

@@ -1,6 +1,10 @@
+breadcrumbs.home.text = Start
+breadcrumbs.label.text = Rasp
 fielderror.screenreader.text = Fejl
 fieldlabel.optional.text = Valgfrit
 fieldlabel.required.text = P\u00E5kr\u00E6vet
+passwordfield.icon.label.show = Vis adgangskode
+passwordfield.icon.label.hide = Skjul adgangskode
 severity.error = fejl
 severity.info = oplysninger
 severity.success = fuldf\u00F8rt

package/src/properties/translations/odyssey-react-mui_de.properties

@@ -1,6 +1,10 @@
+breadcrumbs.home.text = Home
+breadcrumbs.label.text = Breadcrumbs
 fielderror.screenreader.text = Fehler
 fieldlabel.optional.text = Optional
 fieldlabel.required.text = Erforderlich
+passwordfield.icon.label.show = Passwort anzeigen
+passwordfield.icon.label.hide = Passwort\u00A0verbergen
 severity.error = Fehler
 severity.info = Infos
 severity.success = Erfolg

package/src/properties/translations/odyssey-react-mui_el.properties

@@ -1,6 +1,10 @@
+breadcrumbs.home.text = \u0391\u03C1\u03C7\u03B9\u03BA\u03AE \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1
+breadcrumbs.label.text = \u03A4\u03BC\u03AE\u03BC\u03B1\u03C4\u03B1 \u03B4\u03C5\u03BD\u03B1\u03BC\u03B9\u03BA\u03AE\u03C2 \u03B4\u03B9\u03B1\u03B4\u03C1\u03BF\u03BC\u03AE\u03C2
 fielderror.screenreader.text = \u03A3\u03C6\u03AC\u03BB\u03BC\u03B1
 fieldlabel.optional.text = \u03A0\u03C1\u03BF\u03B1\u03B9\u03C1\u03B5\u03C4\u03B9\u03BA\u03CC
 fieldlabel.required.text = \u0391\u03C0\u03B1\u03B9\u03C4\u03B5\u03AF\u03C4\u03B1\u03B9
+passwordfield.icon.label.show = \u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2
+passwordfield.icon.label.hide = \u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD \u03C0\u03C1\u03CC\u03C3\u03B2\u03B1\u03C3\u03B7\u03C2
 severity.error = \u03C3\u03C6\u03AC\u03BB\u03BC\u03B1
 severity.info = \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2
 severity.success = \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03AF\u03B1

package/src/properties/translations/odyssey-react-mui_es.properties

@@ -1,6 +1,10 @@
+breadcrumbs.home.text = Inicio
+breadcrumbs.label.text = Rutas de navegaci\u00F3n
 fielderror.screenreader.text = Error
 fieldlabel.optional.text = Opcional
 fieldlabel.required.text = Obligatorio
+passwordfield.icon.label.show = Mostrar contrase\u00F1a
+passwordfield.icon.label.hide = Ocultar contrase\u00F1a
 severity.error = error
 severity.info = informaci\u00F3n
 severity.success = correcto