terra-form-select - npm Package Compare versions

Comparing version 6.39.0 to 6.40.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## 6.40.0 - (April 27, 2023)
+
+* Added
+  * Added `aria-label` to list options.
+
+* Changed
+  * Changed `hideRequired`, `isLabelHidden`, `onChange` props to private.
+  * Updated `aria-live`, `aria-label` usages.
+
+* Fixed
+  * Screen reader responses for single-select.
+
 ## 6.39.0 - (February 15, 2023)
@@ -7,0 +19,0 @@

lib/shared/_Option.js

@@ -14,3 +14,3 @@ "use strict";
 var _OptionModule = _interopRequireDefault(require("./_Option.module.scss"));
-var _excluded = ["disabled", "display", "value", "variant", "isActive", "isSelected", "isCheckable", "isAddOption"];
+var _excluded = ["disabled", "display", "value", "variant", "isActive", "isSelected", "isCheckable", "isAddOption", "index", "totalOptions", "ofText", "expandedStateText"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,3 +58,23 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
    */
-  variant: _propTypes.default.string
+  variant: _propTypes.default.string,
+  /**
+   * @private
+   * The index of the option.
+   */
+  index: _propTypes.default.number,
+  /**
+   * @private
+   * Number of options in the list.
+   */
+  totalOptions: _propTypes.default.number,
+  /**
+   * @private
+   * The i18n value of the text "OF".
+   */
+  ofText: _propTypes.default.string,
+  /**
+   * @private
+   * The i18n value of the text "Expanded combobox".
+   */
+  expandedStateText: _propTypes.default.string
 };
@@ -74,2 +94,6 @@ var defaultProps = {
     isAddOption = _ref.isAddOption,
+    index = _ref.index,
+    totalOptions = _ref.totalOptions,
+    ofText = _ref.ofText,
+    expandedStateText = _ref.expandedStateText,
     customProps = _objectWithoutProperties(_ref, _excluded);
@@ -103,2 +127,8 @@ var theme = _react.default.useContext(_terraThemeContext.default);
   }
+  var label = display;
+  // Allows VO to announce index of items
+  if (_SharedUtil.default.isMac() && index && totalOptions) {
+    label = "".concat(display, " (").concat(index, " ").concat(ofText, " ").concat(totalOptions, ")");
+  }
+  var itemLabel = isSelected || index === 1 ? "".concat(expandedStateText, " ").concat(label) : label;
   return /*#__PURE__*/_react.default.createElement("li", _extends({
@@ -116,3 +146,4 @@ role: role
     ,
-    "data-terra-select-option": true
+    "data-terra-select-option": true,
+    "aria-label": itemLabel
   }), (isCheckable || isAddOption) && /*#__PURE__*/_react.default.createElement("span", {
@@ -119,0 +150,0 @@ className: cx('icon')

lib/shared/_SharedUtil.js

@@ -11,2 +11,3 @@ "use strict";
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
@@ -31,6 +32,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
     }
+
+    /**
+     * Util to determine if the user agent indicates that it is macOS
+     * @return {boolean}
+     */
   }]);
   return SharedUtil;
 }();
+_defineProperty(SharedUtil, "isMac", function () {
+  return navigator.userAgent.indexOf('Mac') !== -1 && navigator.userAgent.indexOf('Win') === -1;
+});
 var _default = SharedUtil;
 exports.default = _default;

lib/single/Frame.js

@@ -141,16 +141,2 @@ "use strict";
 
-/**
-   * Determines compatible aria-labelledby IDs based on active variant
-   * Used with default, multiple, and tag variants to provide information about the label, displayed
-   * value and or the placeholder value.
-   */
-function ariaLabelledByIds(labelId, displayId, placeholderId) {
-  // Safari is able to read the display/placeholder text, other browsers need help to provide that info to
-  // the accessibility tree used by screen readers
-  if (_SharedUtil.default.isSafari()) {
-    return "".concat(labelId);
-  }
-  return "".concat(labelId, " ").concat(displayId, " ").concat(placeholderId);
-}
-
 /* This rule can be removed when eslint-plugin-jsx-a11y is updated to ~> 6.0.0 */
@@ -299,3 +285,3 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */
         this.openDropdown();
-      } else if (keyCode === KeyCode.KEY_ESCAPE) {
+      } else if (keyCode === KeyCode.KEY_ESCAPE || this.state.isOpen && keyCode === KeyCode.KEY_TAB) {
         this.select.focus();
@@ -365,6 +351,8 @@ this.closeDropdown();
       return display ? /*#__PURE__*/_react.default.createElement("span", {
-        id: displayId
+        id: displayId,
+        "aria-hidden": "true"
       }, display) : /*#__PURE__*/_react.default.createElement("div", {
         id: placeholderId,
-        className: cx('placeholder')
+        className: cx('placeholder'),
+        "aria-hidden": "true"
       }, placeholder || '\xa0');
@@ -470,2 +458,20 @@ }
     /**
+     * Generates the main label for the field.
+     */
+  }, {
+    key: "mainLabel",
+    value: function mainLabel() {
+      var selectedText = this.props.intl.formatMessage({
+        id: 'Terra.form.select.selected'
+      });
+      var label;
+      if (this.props.display) {
+        label = "".concat(this.props.display, " ").concat(selectedText, ", ").concat(this.ariaLabel());
+      } else if (this.props.placeholder) {
+        label = "".concat(this.props.placeholder, ", ").concat(this.ariaLabel());
+      }
+      return label || this.ariaLabel();
+    }
+
+    /**
      * Determines compatible role attribute to apply to select based on active variant and disabled prop
@@ -477,3 +483,4 @@ */
       var disabled = this.props.disabled;
-      return disabled ? undefined : 'combobox';
+      var role = _SharedUtil.default.isSafari() ? 'group' : 'button';
+      return disabled ? undefined : role;
     }
@@ -488,2 +495,7 @@
       var intl = this.props.intl;
+      var comboboxState = this.state.isOpen ? intl.formatMessage({
+        id: 'Terra.form.select.expanded'
+      }) : intl.formatMessage({
+        id: 'Terra.form.select.collapsed'
+      });
       var listOfOptionsTxt = intl.formatMessage({
@@ -498,3 +510,3 @@ id: 'Terra.form.select.listOfTotalOptions'
       }
-      return "".concat(listOfOptionsTxt, " ").concat(defaultUsageGuidanceTxt);
+      return "".concat(comboboxState, " ").concat(listOfOptionsTxt, " ").concat(defaultUsageGuidanceTxt);
     }
@@ -580,9 +592,8 @@ }, {
         role: this.role(),
-        "aria-required": required,
         "data-terra-select-combobox": true,
         "aria-controls": !disabled && this.state.isOpen ? selectMenuId : undefined,
         "aria-disabled": !!disabled,
-        "aria-expanded": !!disabled && !!this.state.isOpen,
+        "aria-expanded": !disabled && this.state.isOpen,
+        "aria-label": this.mainLabel(),
         "aria-haspopup": !disabled ? 'true' : undefined,
-        "aria-labelledby": ariaLabelledByIds(labelId, displayId, placeholderId),
         "aria-describedby": ariaDescribedBy,
@@ -609,8 +620,5 @@ "aria-owns": this.state.isOpen ? selectMenuId : undefined,
         className: cx('display'),
-        "aria-label": this.ariaLabel(),
-        role: "textbox"
+        "aria-label": this.ariaLabel()
       }, this.getDisplay(displayId, placeholderId)), this.renderToggleButton(), /*#__PURE__*/_react.default.createElement("span", {
-        "aria-atomic": "true",
-        "aria-live": "assertive",
-        "aria-relevant": "additions text",
+        "aria-live": _SharedUtil.default.isSafari() ? 'polite' : 'off',
         className: cx('visually-hidden-component'),
@@ -617,0 +625,0 @@ ref: this.visuallyHiddenComponent

lib/single/Menu.js

@@ -441,2 +441,10 @@ "use strict";
             variant: 'default',
+            totalOptions: object.length,
+            index: object.indexOf(option) + 1,
+            expandedStateText: _this5.props.intl.formatMessage({
+              id: 'Terra.form.select.expanded'
+            }),
+            ofText: _this5.props.intl.formatMessage({
+              id: 'Terra.form.select.of'
+            }),
             onMouseDown: function onMouseDown() {
@@ -443,0 +451,0 @@ _this5.downOption = option;

lib/SingleSelectField.js

@@ -48,2 +48,3 @@ "use strict";
   /**
+   * @private
    * Whether to hide the required indicator on the label.
@@ -65,2 +66,3 @@ */
   /**
+   * @private
    * Whether the label is hidden. Allows hiding the label while meeting accessibility guidelines.
@@ -84,2 +86,3 @@ */
   /**
+   * @private
    * Callback function triggered when the select value changes. function(value)
@@ -86,0 +89,0 @@ */

package.json

 {
   "name": "terra-form-select",
   "main": "lib/Select.js",
-  "version": "6.39.0",
+  "version": "6.40.0",
   "description": "Provides a drop down of selectable options.",
@@ -37,3 +37,3 @@ "repository": {
     "react-lifecycles-compat": "^3.0.2",
-    "terra-form-field": "^4.24.0",
+    "terra-form-field": "^4.25.0",
     "terra-hookshot": "^5.0.0",
@@ -57,3 +57,3 @@ "terra-mixins": "^1.40.0",
   },
-  "gitHead": "632d9cecc4c480d250ddef2ee6999349eda97641"
+  "gitHead": "78e099e7db5bee2cff914c34c00278faffd86d44"
 }

src/shared/_Option.jsx

@@ -49,2 +49,22 @@ import React from 'react';
   variant: PropTypes.string,
+  /**
+   * @private
+   * The index of the option.
+   */
+  index: PropTypes.number,
+  /**
+   * @private
+   * Number of options in the list.
+   */
+  totalOptions: PropTypes.number,
+  /**
+   * @private
+   * The i18n value of the text "OF".
+   */
+  ofText: PropTypes.string,
+  /**
+   * @private
+   * The i18n value of the text "Expanded combobox".
+   */
+  expandedStateText: PropTypes.string,
 };
@@ -66,2 +86,6 @@
   isAddOption,
+  index,
+  totalOptions,
+  ofText,
+  expandedStateText,
   ...customProps
@@ -99,2 +123,9 @@ }) => {
 
+  let label = display;
+  // Allows VO to announce index of items
+  if (SharedUtil.isMac() && index && totalOptions) {
+    label = `${display} (${index} ${ofText} ${totalOptions})`;
+  }
+  const itemLabel = isSelected || index === 1 ? `${expandedStateText} ${label}` : label;
+
   return (
@@ -111,2 +142,3 @@ <li
       data-terra-select-option
+      aria-label={itemLabel}
     >
@@ -113,0 +145,0 @@ {(isCheckable || isAddOption) && <span className={cx('icon')} />}

src/shared/_SharedUtil.js

@@ -13,4 +13,11 @@ class SharedUtil {
   }
+
+  /**
+   * Util to determine if the user agent indicates that it is macOS
+   * @return {boolean}
+   */
+
+  static isMac = () => navigator.userAgent.indexOf('Mac') !== -1 && navigator.userAgent.indexOf('Win') === -1;
 }
 
 export default SharedUtil;

src/single/Frame.jsx

@@ -116,16 +116,2 @@ import React from 'react';
 
-/**
-   * Determines compatible aria-labelledby IDs based on active variant
-   * Used with default, multiple, and tag variants to provide information about the label, displayed
-   * value and or the placeholder value.
-   */
-function ariaLabelledByIds(labelId, displayId, placeholderId) {
-  // Safari is able to read the display/placeholder text, other browsers need help to provide that info to
-  // the accessibility tree used by screen readers
-  if (SharedUtil.isSafari()) {
-    return `${labelId}`;
-  }
-  return `${labelId} ${displayId} ${placeholderId}`;
-}
-
 /* This rule can be removed when eslint-plugin-jsx-a11y is updated to ~> 6.0.0 */
@@ -262,3 +248,3 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */
       this.openDropdown();
-    } else if (keyCode === KeyCode.KEY_ESCAPE) {
+    } else if (keyCode === KeyCode.KEY_ESCAPE || (this.state.isOpen && keyCode === KeyCode.KEY_TAB)) {
       this.select.focus();
@@ -318,4 +304,4 @@ this.closeDropdown();
     return (display
-      ? <span id={displayId}>{display}</span>
-      : <div id={placeholderId} className={cx('placeholder')}>{placeholder || '\xa0'}</div>
+      ? <span id={displayId} aria-hidden="true">{display}</span>
+      : <div id={placeholderId} className={cx('placeholder')} aria-hidden="true">{placeholder || '\xa0'}</div>
     );
@@ -403,2 +389,17 @@ }
   /**
+   * Generates the main label for the field.
+   */
+  mainLabel() {
+    const selectedText = this.props.intl.formatMessage({ id: 'Terra.form.select.selected' });
+    let label;
+    if (this.props.display) {
+      label = `${this.props.display} ${selectedText}, ${this.ariaLabel()}`;
+    } else if (this.props.placeholder) {
+      label = `${this.props.placeholder}, ${this.ariaLabel()}`;
+    }
+
+    return label || this.ariaLabel();
+  }
+
+  /**
    * Determines compatible role attribute to apply to select based on active variant and disabled prop
@@ -408,3 +409,5 @@ */
     const { disabled } = this.props;
-    return disabled ? undefined : 'combobox';
+    const role = SharedUtil.isSafari() ? 'group' : 'button';
+
+    return disabled ? undefined : role;
   }
@@ -418,2 +421,4 @@
 
+    const comboboxState = this.state.isOpen ? intl.formatMessage({ id: 'Terra.form.select.expanded' })
+      : intl.formatMessage({ id: 'Terra.form.select.collapsed' });
     const listOfOptionsTxt = intl.formatMessage({ id: 'Terra.form.select.listOfTotalOptions' });
@@ -426,3 +431,3 @@ const defaultUsageGuidanceTxt = intl.formatMessage({ id: 'Terra.form.select.defaultUsageGuidance' });
 
-    return `${listOfOptionsTxt} ${defaultUsageGuidanceTxt}`;
+    return `${comboboxState} ${listOfOptionsTxt} ${defaultUsageGuidanceTxt}`;
   }
@@ -512,9 +517,8 @@
         role={this.role()}
-        aria-required={required}
         data-terra-select-combobox
         aria-controls={!disabled && this.state.isOpen ? selectMenuId : undefined}
         aria-disabled={!!disabled}
-        aria-expanded={!!disabled && !!this.state.isOpen}
+        aria-expanded={!disabled && this.state.isOpen}
+        aria-label={this.mainLabel()}
         aria-haspopup={!disabled ? 'true' : undefined}
-        aria-labelledby={ariaLabelledByIds(labelId, displayId, placeholderId)}
         aria-describedby={ariaDescribedBy}
@@ -535,3 +539,3 @@ aria-owns={this.state.isOpen ? selectMenuId : undefined}
         </div>
-        <div className={cx('display')} aria-label={this.ariaLabel()} role="textbox">
+        <div className={cx('display')} aria-label={this.ariaLabel()}>
           {this.getDisplay(displayId, placeholderId)}
@@ -541,5 +545,3 @@ </div>
         <span
-          aria-atomic="true"
-          aria-live="assertive"
-          aria-relevant="additions text"
+          aria-live={SharedUtil.isSafari() ? 'polite' : 'off'}
           className={cx('visually-hidden-component')}
@@ -546,0 +548,0 @@ ref={this.visuallyHiddenComponent}

src/single/Menu.jsx

@@ -396,2 +396,6 @@ import React from 'react';
           variant: 'default',
+          totalOptions: object.length,
+          index: object.indexOf(option) + 1,
+          expandedStateText: this.props.intl.formatMessage({ id: 'Terra.form.select.expanded' }),
+          ofText: this.props.intl.formatMessage({ id: 'Terra.form.select.of' }),
           onMouseDown: () => { this.downOption = option; },
@@ -398,0 +402,0 @@ onMouseUp: event => this.handleOptionClick(event, option),

src/SingleSelectField.jsx

@@ -38,2 +38,3 @@ import React from 'react';
   /**
+   * @private
    * Whether to hide the required indicator on the label.
@@ -55,2 +56,3 @@ */
   /**
+   * @private
    * Whether the label is hidden. Allows hiding the label while meeting accessibility guidelines.
@@ -74,2 +76,3 @@ */
   /**
+   * @private
    * Callback function triggered when the select value changes. function(value)
@@ -76,0 +79,0 @@ */

translations/de.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} von {totalOptions}).",
+  "Terra.form.select.of": "von",
   "Terra.form.select.unselectedText": "{text} nicht ausgewählt",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Ausgewählt",
   "Terra.form.select.dimmed": "Gedimmt",
+  "Terra.form.select.expanded": "Eingeblendetes Kombinationsfeld.",
+  "Terra.form.select.collapsed": "Ausgeblendetes Kombinationsfeld.",
   "Terra.form.select.listOfTotalOptions": "Liste von Optionen",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Verwenden Sie die Pfeiltasten, um durch die Optionen zu navigieren. Drücken Sie die Eingabetaste, um eine Option auszuwählen.",

translations/en-AU.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} of {totalOptions}).",
+  "Terra.form.select.of": "of",
   "Terra.form.select.unselectedText": "{text} Unselected.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selected.",
   "Terra.form.select.dimmed": "Dimmed.",
+  "Terra.form.select.expanded": "Expanded combobox.",
+  "Terra.form.select.collapsed": "Collapsed combobox.",
   "Terra.form.select.listOfTotalOptions": "List of options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use up and down arrow keys to navigate through options. Press enter to select an option.",

translations/en-CA.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} of {totalOptions}).",
+  "Terra.form.select.of": "of",
   "Terra.form.select.unselectedText": "{text} Unselected.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selected.",
   "Terra.form.select.dimmed": "Dimmed.",
+  "Terra.form.select.expanded": "Expanded combobox.",
+  "Terra.form.select.collapsed": "Collapsed combobox.",
   "Terra.form.select.listOfTotalOptions": "List of options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use up and down arrow keys to navigate through options. Press enter to select an option.",

translations/en-GB.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} of {totalOptions}).",
+  "Terra.form.select.of": "of",
   "Terra.form.select.unselectedText": "{text} Unselected",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selected.",
   "Terra.form.select.dimmed": "Dimmed.",
+  "Terra.form.select.expanded": "Expanded combobox.",
+  "Terra.form.select.collapsed": "Collapsed combobox.",
   "Terra.form.select.listOfTotalOptions": "List of options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use up and down arrow keys to navigate through options. Press enter to select an option.",

translations/en-US.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} of {totalOptions}).",
+  "Terra.form.select.of": "of",
   "Terra.form.select.unselectedText": "{text} Unselected.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selected.",
   "Terra.form.select.dimmed": "Dimmed.",
+  "Terra.form.select.expanded": "Expanded combobox.",
+  "Terra.form.select.collapsed": "Collapsed combobox.",
   "Terra.form.select.listOfTotalOptions": "List of options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use up and down arrow keys to navigate through options. Press enter to select an option.",

translations/en.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} of {totalOptions}).",
+  "Terra.form.select.of": "of",
   "Terra.form.select.unselectedText": "{text} Unselected.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selected.",
   "Terra.form.select.dimmed": "Dimmed.",
+  "Terra.form.select.expanded": "Expanded combobox.",
+  "Terra.form.select.collapsed": "Collapsed combobox.",
   "Terra.form.select.listOfTotalOptions": "List of options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use up and down arrow keys to navigate through options. Press enter to select an option.",

translations/es-ES.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} de {totalOptions}).",
+  "Terra.form.select.of": "de",
   "Terra.form.select.unselectedText": "{text} sin seleccionar.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Seleccionado.",
   "Terra.form.select.dimmed": "Atenuado.",
+  "Terra.form.select.expanded": "Cuadro combinado expandido.",
+  "Terra.form.select.collapsed": "Cuadro combinado contraído.",
   "Terra.form.select.listOfTotalOptions": "Lista de opciones.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use las flechas arriba y abajo para desplazarse por las opciones. Presione entrar para seleccionar una opción.",

translations/es-US.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} de {totalOptions}).",
+  "Terra.form.select.of": "de",
   "Terra.form.select.unselectedText": "{text} sin seleccionar.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Seleccionado.",
   "Terra.form.select.dimmed": "Atenuado.",
+  "Terra.form.select.expanded": "Cuadro combinado expandido.",
+  "Terra.form.select.collapsed": "Cuadro combinado contraído.",
   "Terra.form.select.listOfTotalOptions": "Lista de opciones.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use las flechas arriba y abajo para desplazarse por las opciones. Presione entrar para seleccionar una opción.",

translations/es.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} {index} de {totalOptions}.",
+  "Terra.form.select.of": "de",
   "Terra.form.select.unselectedText": "{text} sin seleccionar.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Seleccionado.",
   "Terra.form.select.dimmed": "Atenuado.",
+  "Terra.form.select.expanded": "Cuadro combinado expandido.",
+  "Terra.form.select.collapsed": "Cuadro combinado contraído.",
   "Terra.form.select.listOfTotalOptions": "Lista de opciones.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use las flechas arriba y abajo para desplazarse por las opciones. Presione entrar para seleccionar una opción.",

translations/fi-FI.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} / {totalOptions}).",
+  "Terra.form.select.of": "/",
   "Terra.form.select.unselectedText": "{text} Valitsematon.",
@@ -12,0 +13,0 @@ "Terra.form.select.selected": "Valittu.",

translations/fr-FR.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} sur {totalOptions}).",
+  "Terra.form.select.of": "sur",
   "Terra.form.select.unselectedText": "{text} désélectionné.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Sélectionné.",
   "Terra.form.select.dimmed": "Grisé.",
+  "Terra.form.select.expanded": "Zone combinée développée",
+  "Terra.form.select.collapsed": "Zone combinée réduite",
   "Terra.form.select.listOfTotalOptions": "Liste de options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Utilisez les touches fléchées haut et bas pour parcourir les options. Appuyez sur Entrée pour sélectionner une option.",

translations/fr.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} sur {totalOptions}).",
+  "Terra.form.select.of": "sur",
   "Terra.form.select.unselectedText": "{text} désélectionné.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Sélectionné.",
   "Terra.form.select.dimmed": "Grisé.",
+  "Terra.form.select.expanded": "Zone combinée développée",
+  "Terra.form.select.collapsed": "Zone combinée réduite",
   "Terra.form.select.listOfTotalOptions": "Liste de options.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Utilisez les touches fléchées haut et bas pour parcourir les options. Appuyez sur Entrée pour sélectionner une option.",

translations/nl-BE.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} van {totalOptions}).",
+  "Terra.form.select.of": "van",
   "Terra.form.select.unselectedText": "{text} niet geselecteerd.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Geselecteerd.",
   "Terra.form.select.dimmed": "Gedimd.",
+  "Terra.form.select.expanded": "Uitgevouwen keuzelijst.",
+  "Terra.form.select.collapsed": "Samengevouwen keuzelijst.",
   "Terra.form.select.listOfTotalOptions": "Lijst van opties.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Gebruik de knoppen Pijl-omhoog en Pijl-omlaag om de opties te bekijken. Druk op Enter om een optie te selecteren.",

translations/nl.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} van {totalOptions}).",
+  "Terra.form.select.of": "van",
   "Terra.form.select.unselectedText": "{text} niet geselecteerd.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Geselecteerd.",
   "Terra.form.select.dimmed": "Gedimd.",
+  "Terra.form.select.expanded": "Uitgevouwen keuzelijst.",
+  "Terra.form.select.collapsed": "Samengevouwen keuzelijst.",
   "Terra.form.select.listOfTotalOptions": "Lijst van opties.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Gebruik de knoppen Pijl-omhoog en Pijl-omlaag om de opties te bekijken. Druk op Enter om een optie te selecteren.",

translations/pt-BR.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} de {totalOptions}).",
+  "Terra.form.select.of": "de",
   "Terra.form.select.unselectedText": "{text} não selecionado.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selecionado.",
   "Terra.form.select.dimmed": "Esmaecido.",
+  "Terra.form.select.expanded": "Caixa de combinação expandida.",
+  "Terra.form.select.collapsed": "Caixa de combinação recolhida.",
   "Terra.form.select.listOfTotalOptions": "Lista de opções.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use as teclas de seta para cima e para baixo para navegar pelas opções. Pressione Enter para selecionar uma opção.",

translations/pt.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} de {totalOptions}).",
+  "Terra.form.select.of": "de",
   "Terra.form.select.unselectedText": "{text} não selecionado.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Selecionado.",
   "Terra.form.select.dimmed": "Esmaecido.",
+  "Terra.form.select.expanded": "Caixa de combinação expandida.",
+  "Terra.form.select.collapsed": "Caixa de combinação recolhida.",
   "Terra.form.select.listOfTotalOptions": "Lista de opções.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Use as teclas de seta para cima e para baixo para navegar pelas opções. Pressione Enter para selecionar uma opção.",

translations/sv-SE.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} av {totalOptions}).",
+  "Terra.form.select.of": "av",
   "Terra.form.select.unselectedText": "{text} avmarkerad.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Vald.",
   "Terra.form.select.dimmed": "Inaktiverad.",
+  "Terra.form.select.expanded": "Visad kombinationsruta.",
+  "Terra.form.select.collapsed": "Dold kombinationsruta.",
   "Terra.form.select.listOfTotalOptions": "Lista med alternativ.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Använd upp- och nedpilarna för att navigera mellan alternativen. Tryck på Enter för att väklja ett alternativ.",

translations/sv.json

@@ -10,2 +10,3 @@ {
   "Terra.form.select.activeOption": "{text} ({index} av {totalOptions}).",
+  "Terra.form.select.of": "av",
   "Terra.form.select.unselectedText": "{text} avmarkerad.",
@@ -16,2 +17,4 @@ "Terra.form.select.selected": "Vald.",
   "Terra.form.select.dimmed": "Inaktiverad.",
+  "Terra.form.select.expanded": "Visad kombinationsruta.",
+  "Terra.form.select.collapsed": "Dold kombinationsruta.",
   "Terra.form.select.listOfTotalOptions": "Lista med alternativ.",
@@ -18,0 +21,0 @@ "Terra.form.select.defaultUsageGuidance": "Använd upp- och nedpilarna för att navigera mellan alternativen. Tryck på Enter för att väklja ett alternativ.",

No alert changes

Improved metrics

Total package byte prevSize

1227327

increased by0.52%

Lines of code

26411

increased by0.58%

Dependency changes

• Updatedterra-form-field@^4.25.0