Merge pull request #134 from unicef/fix/accessibility

Fix accessibility and update docs

package.json

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

src/components/ActiveAutoComplete/ActiveAutoComplete.js

@@ -29,6 +29,7 @@ const useStyles = makeStyles(theme => ({
 }))
 /**
  * ActiveAutoComplete is an editable dropdown component with interactive.
+ * The cool feature with ActiveAutoComplete is you can read and write at the same place.
  * User can enter the text in order to find the value from the list of values
  * User can also add new value to the list as well.
  */

src/components/ActiveCurrencyField/ActiveCurrencyField.js

@@ -2,6 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ActiveFormPositiveInteger from '../ActiveFormPositiveInteger'
 
+/**
+ * The ActiveCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc. The cool feature with ActiveCurrencyField is you can read and write at the same place.
+ */
 export default function ActiveCurrencyField({
   inputPrefix,
   decimalScale,
@@ -39,7 +42,7 @@ ActiveCurrencyField.propTypes = {
   /**
    * Array of validators.See list of default validators above.
    *
-   * Ex: `validators={['required', 'isEmail']}`
+   * Ex: `validators={['required']}`
    */
   validators: PropTypes.array,
   /** Attributes applied to the input element. */

src/components/ActiveFormCoordinateField/ActiveFormCoordinateField.js

@@ -93,6 +93,8 @@ ActiveFormCoordinateField.propTypes = {
   decimalScale: PropTypes.number,
   /** Coordinate type */
   coordinateType: PropTypes.oneOf(['latitude', 'longitude']).isRequired,
+  /** Change to write mode by hiding textfield border and displays border on Hover */
+  interactiveMode: PropTypes.bool,
 }
 
 ActiveFormCoordinateField.defaultProps = {

src/components/ActiveFormPositiveInteger/ActiveFormPositiveInteger.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'
 import ActiveFormTextField from '../ActiveFormTextField'
 import { PositiveNumberFormat } from '../Shared'
 
+/**
+ * ActiveFormPositiveInteger form input field that accepts positive integer values. The cool feature with ActiveFormPositiveInteger is you can read and write at the same place.
+ */
 export default function ActiveFormPositiveInteger({ InputProps, ...props }) {
   return (
     <ActiveFormTextField
@@ -49,4 +52,6 @@ ActiveFormPositiveInteger.propTypes = {
   validatorListener: PropTypes.func,
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes.bool,
+  /** Change to write mode by hiding textfield border and displays border on Hover */
+  interactiveMode: PropTypes.bool,
 }

src/components/ActiveFormPositiveInteger/ActiveFormPositiveInteger.md

@@ -0,0 +1,43 @@
+```jsx
+import React, { useState, useRef } from 'react'
+import { Grid } from '@material-ui/core'
+import { UValidatorForm, UButton, ActiveFormPositiveInteger } from '../../index.js'
+
+// export default function ActiveFormPositiveInteger() {
+
+const form = useRef('form')
+const [value, setValue] = useState()
+
+function handleChange(event) {
+  const { value } = event.target
+  setValue(value)
+}
+
+function handleSubmit() {
+  // Submit the changes from here
+}
+
+// return (
+;<UValidatorForm
+  ref={form}
+  onSubmit={handleSubmit}
+  onError={errors => console.log(errors)}
+  // instantValidate={true}
+>
+  <Grid container spacing={1}>
+    <Grid item xs={12} lg={4}>
+      <ActiveFormPositiveInteger
+        label="Number"
+        value={value}
+        onChange={handleChange}
+        name="number"
+      />
+    </Grid>
+    <Grid item xs={12}>
+      <UButton type="submit">Submit</UButton>
+    </Grid>
+  </Grid>
+</UValidatorForm>
+//   )
+// }
+```

src/components/ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js

@@ -148,7 +148,7 @@ ActiveKeyboardDatePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** Date format */
   format: PropTypes.string,

src/components/UAsyncBadge/UAsyncBadge.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { CircularProgress, Chip } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import HighlightOffIcon from '@material-ui/icons/HighlightOff'
@@ -31,6 +31,7 @@ const useStyles = makeStyles(theme => ({
  */
 export default function UAsyncBadge({ variant, text, visible, onReset }) {
   const classes = useStyles()
+  const chipRef = useRef()
 
   /**  If variant is success or error, after few seconds, it will set asyncResponse visible to false */
   useEffect(() => {
@@ -43,10 +44,20 @@ export default function UAsyncBadge({ variant, text, visible, onReset }) {
     }
   }, [variant])
 
+  useEffect(() => {
+    // When the badge becomes visible, set focus to it.
+    if (visible && variant) {
+      chipRef.current.focus()
+    }
+  }, [visible, variant])
+
   return (
     <span className={classes.root}>
       {visible && (
         <Chip
+          ref={chipRef}
+          tabIndex={0}
+          aria-live="assertive" // Announce changes to screen readers
           className={`${classes.chip} ${classes[variant]}`}
           avatar={
             variant === 'loading' ? (

src/components/UCurrencyField/UCurrencyField.js

@@ -1,6 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import UPositiveInteger from '../UPositiveInteger'
+
+/**
+ * The UCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc
+ */
 export default function UCurrencyField({
   inputPrefix,
   decimalScale,
@@ -32,7 +36,7 @@ UCurrencyField.propTypes = {
   /**
    * Array of validators.See list of default validators above.
    *
-   * Ex: `validators={['required', 'isEmail']}`
+   * Ex: `validators={['required']}`
    */
   validators: PropTypes.array,
   /** Attributes applied to the input element. */

src/components/UDatePicker/UDatePicker.js

@@ -15,8 +15,10 @@ const styles = {
 
 /**
  * UDatePicker is a customized material ui Date picker.
+ *
  * This component let's you access the calender to select particular dates.
- * Plese have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/DatePicker') for more details
+ *
+ * Please have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/DatePicker') for more details
  */
 export default function UDatePicker(props) {
   const {
@@ -58,7 +60,7 @@ UDatePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** date format */
   format: PropTypes.string,

src/components/UDateTimePicker/UDateTimePicker.js

@@ -15,8 +15,10 @@ const styles = {
 
 /**
  * UDateTimePicker is a customized material ui DateTimePicker.
+ *
  * This component let's you access the calender and clock to select date and time.
- * Plese have look at [Material Ui DateTimePicker]('https://material-ui-pickers.dev/api/DateTimePicker') for more details
+ *
+ * Please have look at [Material Ui DateTimePicker]('https://material-ui-pickers.dev/api/DateTimePicker') for more details
  */
 export default function UDateTimePicker(props) {
   const {
@@ -58,7 +60,7 @@ UDateTimePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** date format */
   format: PropTypes.string,

src/components/UInfiniteScroll/UInfiniteScroll.js

@@ -1,6 +1,8 @@
 import React, { useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
-
+/**
+ * UInfiniteScroll component is for implementing infinite scrolling in a page. It monitors the user's scrolling position and triggers a specified function when the user scrolls to a certain point on the page:
+ */
 export default function UInfiniteScroll({ offset = 100, onEndOfScroll }) {
   const divElement = useRef()
   useEffect(() => {

src/components/UKeyboardDatePicker/UKeyboardDatePicker.js

@@ -17,7 +17,11 @@ const styles = {
 }
 
 /**
- * UDatePicker is a customized [Material Ui KeyboardDatePicker]('https://material-ui-pickers.dev/api/KeyboardDatePicker') for more details
+ * UKeyboardDatePicker is a customized material ui Date picker.
+ *
+ * This component let's you access the calender to select particular dates.
+ *
+ * Please have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/KeyboardDatePicker') for more details
  */
 export default function UKeyboardDatePicker(props) {
   const {
@@ -59,7 +63,7 @@ UKeyboardDatePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** date format */
   format: PropTypes.string,

src/components/UKeyboardDateTimePicker/UKeyboardDateTimePicker.js

@@ -59,7 +59,7 @@ UKeyboardDateTimePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** date format */
   format: PropTypes.string,

src/components/UKeyboardTimePicker/UKeyboardTimePicker.js

@@ -56,7 +56,7 @@ UKeyboardTimePicker.propTypes = {
   autoOk: PropTypes.bool,
   /** Picker container option variant : 'dialog' | 'inline' | 'static' */
   variant: PropTypes.string,
-  /** Material ui textfiled variant */
+  /** Material ui textfield variant */
   inputVariant: PropTypes.string,
   /** Label text */
   label: PropTypes.string,

src/components/UPositiveInteger/UPositiveInteger.js

@@ -2,7 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { PositiveNumberFormat } from '../Shared'
 import UTextField from '../UTextField'
-
+/**
+ * UPositiveInteger form input field that accepts positive integer values. It is a extended version of UTextField.
+ */
 export default function UPositiveInteger({ readOnly, InputProps, ...props }) {
   return (
     <UTextField
@@ -25,7 +27,7 @@ UPositiveInteger.propTypes = {
   /**
    * Array of validators.See list of default validators above.
    *
-   * Ex: `validators={['required', 'isEmail']}`
+   * Ex: `validators={['required']}`
    */
   validators: PropTypes.array,
   /**

src/components/UPositiveInteger/UPositiveInteger.md

@@ -0,0 +1,45 @@
+```jsx
+import React, { useState, useEffect, useRef } from 'react'
+import { Grid } from '@material-ui/core'
+import { UValidatorForm, UButton } from '../../index.js' // change it to '@unicef/material-ui'
+
+
+// export default function UPositiveIntegerExample() {
+
+const form = useRef('form')
+const [value, setValue] = useState()
+
+function handleValue(event) {
+  const { value } = event.target
+  setValue(value)
+}
+
+function handleSubmit() {
+  // Submit the changes from here
+}
+
+// return (
+;<UValidatorForm
+  ref={form}
+  onSubmit={handleSubmit}
+  onError={errors => console.log(errors)}
+  // instantValidate={true}
+>
+  <Grid container spacing={1}>
+    <Grid item xs={12} lg={4}>
+      <UPositiveInteger
+        label="Number"
+        value={value}
+        onChange={handleValue}
+        name="number"
+        validators={['required']}
+      />
+    </Grid>
+    <Grid item xs={12}>
+      <UButton type="submit">Submit</UButton>
+    </Grid>
+  </Grid>
+</UValidatorForm>
+//   )
+// }
+```

src/components/USelectPicker/Control.js

@@ -29,6 +29,14 @@ export default function Control({
   InputLabelProps,
 }) {
   const readOnly = TextFieldProps && TextFieldProps.readOnly
+  //In order to prevent the addition of these custom attributes to the DOM, we are separating them from TextFieldProps
+  const {
+    showLabelHelp = false,
+    InputLabelHelpProps = {},
+    lineByLineOption = '',
+    hideAvatar = false,
+    ...otherTextFieldProps
+  } = TextFieldProps || {}
   return (
     <TextField
       fullWidth
@@ -52,12 +60,12 @@ export default function Control({
         ...InputLabelProps,
         style: { ...styles.labelRoot },
       }}
-      {...TextFieldProps}
+      {...otherTextFieldProps}
       label={
-        TextFieldProps.showLabelHelp ? (
+        showLabelHelp ? (
           <InputLabelHelp
             inputLabel={TextFieldProps.label}
-            {...TextFieldProps.InputLabelHelpProps}
+            {...InputLabelHelpProps}
           />
         ) : (
           TextFieldProps.label

src/components/USelectPicker/USelectPicker.js

@@ -75,10 +75,10 @@ const defaultComponents = {
 }
 
 /**
- * USelectPicker is a control for selecting people from a list. Has the features below:
+ * USelectPicker is a control for selecting a option from a list. Has the features below:
  *
- * * Select a single person from a list.
- * * Select multiple people from a list.
+ * * Select a single option from a list.
+ * * Select multiple option from a list.
  * * Autocomplete.
  * * Clear current selection.
  *