react-select - npm Package Compare versions

Comparing version 2.4.1 to 2.4.2

lib/accessibility/index.js

@@ -12,7 +12,8 @@ "use strict";
       isMulti = context.isMulti,
-      label = context.label;
+      label = context.label,
+      isDisabled = context.isDisabled;
 
   switch (event) {
     case 'menu':
-      return 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
+      return "Use Up and Down to choose options".concat(isDisabled ? '' : ', press Enter to select the currently focused option', ", press Escape to exit the menu, press Tab to select the option and exit the menu.");
 
@@ -30,3 +31,4 @@ case 'input':
 var valueEventAriaMessage = function valueEventAriaMessage(event, context) {
-  var value = context.value;
+  var value = context.value,
+      isDisabled = context.isDisabled;
   if (!value) return;
@@ -41,3 +43,3 @@
     case 'select-option':
-      return "option ".concat(value, ", selected.");
+      return isDisabled ? "option ".concat(value, " is disabled. Select another option.") : "option ".concat(value, ", selected.");
   }
@@ -61,3 +63,3 @@ };
       options = _ref2.options;
-  return "option ".concat(getOptionLabel(focusedOption), " focused, ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, ".");
+  return "option ".concat(getOptionLabel(focusedOption), " focused").concat(focusedOption.isDisabled ? ' disabled' : '', ", ").concat(options.indexOf(focusedOption) + 1, " of ").concat(options.length, ".");
 };
@@ -64,0 +66,0 @@

package.json

 {
   "name": "react-select",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "A Select control built with and for ReactJS",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/__tests__/constants.js

@@ -23,2 +23,22 @@ // @flow
 
+export const OPTIONS_DISABLED = [
+  { label: '0', value: 'zero' },
+  { label: '1', value: 'one', isDisabled: true },
+  { label: '2', value: 'two' },
+  { label: '3', value: 'three' },
+  { label: '4', value: 'four' },
+  { label: '5', value: 'five' },
+  { label: '6', value: 'six' },
+  { label: '7', value: 'seven' },
+  { label: '8', value: 'eight' },
+  { label: '9', value: 'nine' },
+  { label: '10', value: 'ten' },
+  { label: '11', value: 'eleven' },
+  { label: '12', value: 'twelve' },
+  { label: '13', value: 'thirteen' },
+  { label: '14', value: 'fourteen' },
+  { label: '15', value: 'fifteen' },
+  { label: '16', value: 'sixteen' },
+];
+
 export const OPTIONS_NUMBER_VALUE = [
@@ -25,0 +45,0 @@ { label: '0', value: 0 },

src/accessibility/index.js

@@ -9,4 +9,5 @@ // @flow
   label?: string,
+  isDisabled?: boolean
 };
-export type ValueEventContext = { value: string };
+export type ValueEventContext = { value: string, isDisabled?: boolean };
 
@@ -17,12 +18,12 @@ export const instructionsAriaMessage = (
 ) => {
-  const { isSearchable, isMulti, label } = context;
+  const { isSearchable, isMulti, label, isDisabled } = context;
   switch (event) {
     case 'menu':
-      return 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
+      return `Use Up and Down to choose options${isDisabled ? '' : ', press Enter to select the currently focused option'}, press Escape to exit the menu, press Tab to select the option and exit the menu.`;
     case 'input':
       return `${label ? label : 'Select'} is focused ${
         isSearchable ? ',type to refine list' : ''
-      }, press Down to open the menu, ${
+        }, press Down to open the menu, ${
         isMulti ? ' press left to focus selected values' : ''
-      }`;
+        }`;
     case 'value':
@@ -37,3 +38,3 @@ return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
 ) => {
-  const { value } = context;
+  const { value, isDisabled } = context;
   if (!value) return;
@@ -46,3 +47,3 @@ switch (event) {
     case 'select-option':
-      return `option ${value}, selected.`;
+      return isDisabled ? `option ${value} is disabled. Select another option.` : `option ${value}, selected.`;
   }
@@ -73,3 +74,3 @@ };
 }) =>
-  `option ${getOptionLabel(focusedOption)} focused, ${options.indexOf(
+  `option ${getOptionLabel(focusedOption)} focused${focusedOption.isDisabled ? ' disabled' : ''}, ${options.indexOf(
     focusedOption
@@ -86,3 +87,3 @@ ) + 1} of ${options.length}.`;
   `${screenReaderMessage}${
-    inputValue ? ' for search term ' + inputValue : ''
+  inputValue ? ' for search term ' + inputValue : ''
   }.`;

src/Select.js

@@ -591,2 +591,3 @@ // @flow
     });
+    this.announceAriaLiveContext({ event: 'menu', context: { isDisabled: isOptionDisabled(options[nextFocus]) } });
   }
@@ -614,5 +615,5 @@ onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
     const { blurInputOnSelect, isMulti } = this.props;
+    const { selectValue } = this.state;
 
     if (isMulti) {
-      const { selectValue } = this.state;
       if (this.isOptionSelected(newValue, selectValue)) {
@@ -630,3 +631,19 @@ const candidate = this.getOptionValue(newValue);
       } else {
-        this.setValue([...selectValue, newValue], 'select-option', newValue);
+        if (!this.isOptionDisabled(newValue, selectValue)) {
+          this.setValue([...selectValue, newValue], 'select-option', newValue);
+          this.announceAriaLiveSelection({
+            event: 'select-option',
+            context: { value: this.getOptionLabel(newValue) },
+          });
+        } else {
+          // announce that option is disabled
+          this.announceAriaLiveSelection({
+            event: 'select-option',
+            context: { value: this.getOptionLabel(newValue), isDisabled: true },
+          });
+        }
+      }
+    } else {
+      if (!this.isOptionDisabled(newValue, selectValue)) {
+        this.setValue(newValue, 'select-option');
         this.announceAriaLiveSelection({
@@ -636,9 +653,9 @@ event: 'select-option',
         });
+      } else {
+        // announce that option is disabled
+        this.announceAriaLiveSelection({
+          event: 'select-option',
+          context: { value: this.getOptionLabel(newValue), isDisabled: true },
+        });
       }
-    } else {
-      this.setValue(newValue, 'select-option');
-      this.announceAriaLiveSelection({
-        event: 'select-option',
-        context: { value: this.getOptionLabel(newValue) },
-      });
     }
@@ -901,7 +918,9 @@
     } else {
-      if (event.currentTarget.tagName !== 'INPUT') {
+      //$FlowFixMe
+      if (event.target.tagName !== 'INPUT') {
         this.onMenuClose();
       }
     }
-    if (event.currentTarget.tagName !== 'INPUT') {
+    //$FlowFixMe
+    if (event.target.tagName !== 'INPUT') {
       event.preventDefault();
@@ -1302,3 +1321,3 @@ }
               const option = toOption(child, `${itemIndex}-${i}`);
-              if (option && !option.isDisabled) acc.focusable.push(child);
+              if (option) acc.focusable.push(child);
               return option;
@@ -1320,3 +1339,3 @@ })
             acc.render.push(option);
-            if (!option.isDisabled) acc.focusable.push(item);
+            acc.focusable.push(item);
           }
@@ -1323,0 +1342,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1114726

increased by0.43%

Lines of code

22731

increased by0.4%

No dependency changes