modify aria-label with instructive text

Author: borntofrappe

src/lib/index.jsx

@@ -84,6 +84,7 @@ class SingleOtpInput extends PureComponent<*> {
       disabledStyle,
       shouldAutoFocus,
       isInputNum,
+      index,
       value,
       className,
       ...rest
@@ -95,7 +96,7 @@ class SingleOtpInput extends PureComponent<*> {
         style={{ display: 'flex', alignItems: 'center' }}
       >
         <input
-          aria-label={`Verification code ${isInputNum ? 'digit' : 'character'}`}
+          aria-label={`${(index === 0) ? 'Please enter verification code. ' : ''}${isInputNum ? 'Digit' : 'Character'} n° ${index + 1}`}
           autoComplete="off"
           style={Object.assign(
             { width: '1em', textAlign: 'center' },
@@ -298,6 +299,7 @@ class OtpInput extends Component<Props, State> {
         <SingleOtpInput
           placeholder={placeholder && placeholder[i]}
           key={i}
+          index={i}
           focus={activeInput === i}
           value={otp && otp[i]}
           onChange={this.handleOnChange}