Develop Reference

Add accessibility and validation to a search form

I have been given some feedback on some code.
The feedback: "no accessibility or validation has been considered for the search form"
Heres the code:
export const Search = () => {
const [searchTerm, setSearchTerm] = useState('');
return (
<form className={styles.search} onSubmit={handleSubmit}>
<input
type='text'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
/>
<button className='btn' type='submit' onClick={handleSubmit}>
Search
</button>
</form>
);
};
After searching I cannot find anything else extra to add. I thought that forms and buttons have default accessibility.
I'm trying to learn how to add extra accessibility and validation to this form as I believe it is important to encourage use good accessibility practise. Any guidance would be great.
P.S the code is in React treat it like html and JavaScript if your'e unfamiliar.

First, you can identify this form as a search landmark for assistive technology with the use of role="search". Using the search landmark will help assistive technology to "read" the user that this is a search option and screen readers also have an option to navigate to this section directly instead of navigating through all the elements on the page.
Search role landmark info on MDN
Secondly, all modern browsers support the input type="search", that works exactly as type="text" but helps with autocomplete option across domains, helping users with dyslexia not making mistakes when they need to use this option.
Input type search info on MDN
Third, like TJ answered, labels for user control elements like inputs are important for blind people. Screen readers "read" the values of these fields, if there is no label it can be confusing what should they fill there. You can use the element with the for="someID" attribute, or you can use aria-label="labelText" attribute to add label for assistive technology. Although some of the screen readers will use the placeholder as the label when the value is empty, you can't use it as a label.
Labeling controls info on W3C-WAI
Fourth, consider the validation, if it is not the default HTML5 validation, you need to let the user know about any errors so he can correct the mistakes. You can use an element like span with role="alert" or role="status" or use some tooltip open (just to cover more disabilities) to inform the user about errors and suggestions on how to correct them.
Accessible form validation article on WebAIM
In matter of form validation, you can use the HTML5 validation like TJ answered using the input attributes required/pattern/etc. or use your own business logic to validate the form in the handleSubmit function you write.
My code suggestion:
export const Search = () => {
const [searchTerm, setSearchTerm] = useState('');
return (
<form role='search' className={styles.search} onSubmit={handleSubmit}>
<input
type='search'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
aria-label='Enter your search term'
required={true}
/>
<span className='errMsg' role='status'>Error message here</span> {/*use CSS to show and hide msg*/}
<button className='btn' type='submit' onClick={handleSubmit}>
Search
</button>
</form>
);
};

Only accessibility issue I can notice is placeholder='search'. You should always use a <label for="">, placeholder is just a complimentary feature for normal people.
For validation you prob need required since it is the only <input>. You might also need min/max/pattern etc but that's up to you.
<label for="search">Search<label>
<input
type='text'
id='search'
name='search'
onChange={handleChange}
value={searchTerm || ''}
placeholder='search'
required
/>

Yup with Formik doesn't Datepicker value

I have been trying everything to make this form work with yup, but when using the date-picker, the value doesn't register either within the field or with yup.
My relevant imports are formik, yup, useForm and yupResolver.
I have removed non-relevant code to save space. The other fields i have are first name, last name, email and phone number, and they all work as they should, with values registering and errors showing up when they don't fill the criteria.
I have a console log withing the formik element which logs all the values, and all the values get logged properly except the dates, which stand empty.
const Form = () => {
const [fromDate, setFromDate] = useState(new Date());
return (
<>
<div>
<Formik validationSchema={formVal}>
{({ values,
errors) => (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<DatePicker
id="fromDate"
onChange={(date) => {
setFieldValue(date);
}}
/>
</div>
<Button type="submit" ></Button>
</form>
)}
</Formik>
</div>
</>
)}

It seems like you're not using 'setFieldValue' correctly;
The 1st argument should be the form's field name.
Should be something like this: setFieldValue('fromDate', date);
See https://formik.org/docs/api/formik for reference.
Also, make sure that variable 'date' is of type Date and not an object, containing the actual date value.

React: How does one access a phone's actual camera app (not load feed in browser)?

I've come across quite a few packages and APIs for opening a stream and capturing images, but all of these solutions entail loading the feed in a component, so the 'camera' is an in-browser utility. Is there a way to open the phone's actual camera app outside the DOM?

Short answer:
<input type="file" accept="image/*" capture="environment">
Modern phone browsers can opt to use the camera app as input for <input type="file"> input, in lieu of a file-selection dialog, when you use the property accept="image/*". This will allow users to select their preferred input, but if you use the property capture on the input element, the browser sees a hint to automatically use the camera without giving a choice at all. capture can have a value as well, to hint which camera should be used:
Adding the capture attribute without a value let's the browser decide which camera to use, while the "user" and "environment" values tell the browser to prefer the front and rear cameras, respectively.
The capture attribute works on Android and iOS, but is ignored on desktop. Be aware, however, that on Android this means that the user will no longer have the option of choosing an existing picture. The system camera app will be started directly, instead.
Once you have an input image, you can read it as you would any input file, e.g., with FileReader.

Thanks to #apsillers for the answer. Here's a React-specific implementation for those who are trying to create a button that prompts actual camera load for photo-taking and not a video feed capture in-browser:
The button:
<div >
<label>
<input
style={{display: 'none'}}
type='file'
accept="image/*"
capture="environment"
onChange={this.handleImageChange}
/>
<YourCustomButton/>
</label>
</div>
Handler:
handleImageChange = (event) => {
this.setState({
image: URL.createObjectURL(event.target.files[0])
})
}

Thank you #apsillers and #struensee for the answers, I managed to do what I was looking for with both answers. However, there was something missing on #struensee answer, and I would like to contribute with my React solution:
import React, { useState, useRef } from "react";
const UploadImageComponent = () => {
const [imageObject, setImageObject] = useState(null);
const handleFileInput = useRef(null);
const handleClick = () => {
handleFileInput.current.click();
};
const handleImageChange = (event) => {
setImageObject({
imagePreview: URL.createObjectURL(event.target.files[0]),
imageFile: event.target.files[0],
});
};
return (
<div>
<button onClick={handleClick}>Upload Photo</button>
<label>
<input
style={{ display: "none" }}
type="file"
accept="image/*"
capture="environment"
ref={handleFileInput}
onChange={handleImageChange}
/>
</label>
{imageObject && <img src={imageObject.imagePreview} />}
</div>
);
};
export default UploadImageComponent;
The use of ref will ensure clicking on the button will trigger the onChange in the hidden input. The <img> tag is there to display the image currently being uploaded.

how to getvalue of textarea in react?

I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize

Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.

You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`

React form's defaultValue updates on page reload when a unique key is assigned to it but it doesn't when key is not there

I am currently working on edit functionality using react form and want the data in the form fields to be pre-populated with the props value and for that I have assigned it to defaultValue in the form fields.
But the problem I came across while doing this is my defaultValues flush out on page reload. I tried finding a solution for it and came across few hacks to make the dom in sync with defaultValue. One of which was assigning a key to the wrapper component of the input field.
What is the reason for this behaviour of defaultValue?
Could anyone please help me figure out why the form field behaves like that? Here's the related snippet:
var title = this.props.post.title;
return (
<form
onSubmit={
postId ? this.handleUpdate.bind(this) :
this.handleSubmit.bind(this)
}
>
<h3>
{postId ? "Edit post" : "Create a New Post"}
</h3>
<FormGroup key={title} controlId="formControlsText">
<ControlLabel>Title</ControlLabel>
<FormControl
type="text"
inputRef={ref => {
this.title = ref;
}}
placeholder="Enter title"
defaultValue={title}
/>
</FormGroup>
</form>
)