Merge pull request #138 from unicef/fix/accessibility-select

Fixed accessibility issues in select box and retain issue in search box

example/src/components/FormValidator.js

@@ -143,6 +143,7 @@ export default function FormValidator() {
             }}
             onError={errors => console.log(errors)}
             instantValidate={true}
+            noValidate
           >
             <UPositiveInteger
               name="PositiveNumber"
@@ -170,6 +171,7 @@ export default function FormValidator() {
             }}
             onError={errors => console.log(errors)}
             instantValidate={true}
+            noValidate
           >
             <UCurrencyField
               name="CurrencyInput"
@@ -190,6 +192,7 @@ export default function FormValidator() {
         ref={form}
         onError={errors => console.log(errors)}
         instantValidate={true}
+        noValidate
       >
         <Grid container>
           <Grid item xs={12}>
@@ -239,6 +242,7 @@ export default function FormValidator() {
         onSubmit={handleSubmit}
         onError={errors => console.log(errors)}
         instantValidate={true}
+        noValidate
       >
         <Grid container>
           <Grid item xs={12}>
@@ -348,8 +352,8 @@ export default function FormValidator() {
       <UValidatorForm
         onSubmit={handleItemValueSubmit}
         onError={errors => console.log(errors)}
-        // debounceTime={1000}
         instantValidate={true}
+        noValidate
       >
         <Typography variant="h5" style={{ margin: '16px 0px' }}>
           TextField with counter
@@ -372,8 +376,8 @@ export default function FormValidator() {
       <UValidatorForm
         onSubmit={handleItemValueSubmit}
         onError={errors => console.log(errors)}
-        // debounceTime={1000}
         instantValidate={true}
+        noValidate
       >
         <Typography variant="h5" style={{ margin: '16px 0px' }}>
           Reset form
@@ -409,8 +413,8 @@ export default function FormValidator() {
         onBlur={handleSubmit}
         onSubmit={handleSubmit}
         onError={errors => console.log(errors)}
-        // debounceTime={1000}
         instantValidate={true}
+        noValidate
       >
         <Box display="flex" mb={2} flexDirection="column" alignItems="baseline">
           <UValidatorComponent
@@ -537,8 +541,8 @@ export default function FormValidator() {
       <UValidatorForm
         onSubmit={handleItemValueSubmit}
         onError={errors => console.log(errors)}
-        // debounceTime={1000}
         instantValidate={true}
+        noValidate
       >
         <Grid container spacing={1}>
           <Grid item xs={12}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

src/components/USearchBox/USearchBox.js

@@ -47,6 +47,10 @@ export default function USearchBox({
   const [searchValue, setSearch] = useState(value)
   const classes = useStyles()
 
+  useEffect(() => {
+    setSearch(value)
+  }, [value])
+
   const handleChange = event => {
     setSearch(event.target.value)
   }

src/components/UTextField/UTextField.js

@@ -67,6 +67,18 @@ class UTextField extends ValidatorComponent {
     }
   }
 
+  handleSelectOpen = () => {
+    this.setState({
+      isSelectOpen: true,
+    })
+  }
+
+  handleSelectClose = () => {
+    this.setState({
+      isSelectOpen: false,
+    })
+  }
+
   render() {
     /* eslint-disable no-unused-vars */
     const {
@@ -88,9 +100,12 @@ class UTextField extends ValidatorComponent {
       InputLabelProps,
       showLabelHelp,
       InputLabelHelpProps,
+      select,
+      id,
+      SelectProps,
       ...rest
     } = this.props
-    const { isValid } = this.state
+    const { isValid, isSelectOpen } = this.state
     const length = this.props.value ? this.props.value.length : 0
     const counterError = maxLength && maxLength < length
 
@@ -117,6 +132,35 @@ class UTextField extends ValidatorComponent {
               label
             )
           }
+          select={select}
+          id={id}
+          /** Accessibility fixes for select field */
+          {...(select
+            ? {
+                inputProps: {
+                  ...(this.props.inputProps ? this.props.inputProps : {}),
+                  'aria-describedby': null,
+                },
+                SelectProps: {
+                  ...(SelectProps ? SelectProps : {}),
+                  open: isSelectOpen ? true : false,
+                  onClose: this.handleSelectClose,
+                  onOpen: this.handleSelectOpen,
+                  MenuProps: {
+                    MenuListProps: {
+                      id: `${id}-select-menu`,
+                      'aria-labelledby': null,
+                    },
+                  },
+                  SelectDisplayProps: {
+                    role: 'combobox',
+                    'aria-controls': `${id}-select-menu`,
+                    'aria-expanded': isSelectOpen ? true : false,
+                    'aria-describedby': `${id}-helper-text`,
+                  },
+                },
+              }
+            : {})}
         />
         {counter && (
           <Box display="block">
@@ -170,6 +214,10 @@ UTextField.propTypes = {
   showLabelHelp: PropTypes.bool,
   /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object,
+  /** Id of the field */
+  id: PropTypes.string,
+  /** Props applied to the Select element. */
+  SelectProps: PropTypes.object,
 }
 
 UTextField.defaultProps = {
@@ -178,6 +226,8 @@ UTextField.defaultProps = {
   validatorListener: () => {},
   showLabelHelp: false,
   InputLabelHelpProps: {},
+  select: false,
+  SelectProps: {},
 }
 
 export default UTextField