NewTaskList - Add a11y label

This commit is contained in:
2020-03-30 22:44:34 +05:30
parent 982cb60d3e
commit 88bb2dca68
2 changed files with 16 additions and 1 deletions
@@ -11,7 +11,9 @@ export function NewTaskListPrompt() {
return ( return (
<div className={styles.listContainer}> <div className={styles.listContainer}>
<label className="sr-only" for="createNewList">Create new list</label>
<input <input
id="createNewList"
className={styles.newListInput} className={styles.newListInput}
type="text" type="text"
placeholder="+ Create list" placeholder="+ Create list"
+13
View File
@@ -21,3 +21,16 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
/* Only show for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; /* added line */
border: 0;
}