Fix visually-hidden content

joshwcomeau · joshwcomeau · commit 225c5aa04bcf · 2021-10-17T17:18:00.000-04:00
The ToggleButton had a visually-hidden child which was _meant_ to
hold the label, so that folks using screen-readers could understand
what each option is. Unfortunately, I had left the "hello world"
string in there! This commit addresses this oversight.
diff --git a/src/components/ToggleButton/ToggleButton.js b/src/components/ToggleButton/ToggleButton.js
@@ -16,7 +16,7 @@ const ToggleButton = ({
       className={styles.toggleButton}
       style={{ backgroundColor: color }}
     >
-      <span className="visually-hidden">hello</span>
+      <span className="visually-hidden">{label}</span>
       {children}
     </button>
   );

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ const ToggleButton = ({`
`16`	`16`	`className={styles.toggleButton}`
`17`	`17`	`style={{ backgroundColor: color }}`
`18`	`18`	`>`
`19`		`- <span className="visually-hidden">hello</span>`
	`19`	`+ <span className="visually-hidden">{label}</span>`
`20`	`20`	`{children}`
`21`	`21`	`</button>`
`22`	`22`	`);`