fix: support <label> for select and textarea (#143)

* fix: support <label> for select and textarea * Create clean-hounds-shop.md
eps1lon · Mar 15, 2020 · bd41c2d · bd41c2d
1 parent 0dde2a1
commit bd41c2d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/.changeset/clean-hounds-shop.md b/.changeset/clean-hounds-shop.md
@@ -0,0 +1,5 @@
+---
+"@fake-scope/fake-pkg": patch
+---
+
+fix: support `<label for>` for `<select>` and `<textarea>`
diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js
@@ -272,7 +272,15 @@ test.each([
 	// this would require a custom matcher
 	[`<button data-test>Click <em>me</em></option>`, "Click me"],
 	// byTitle('Hello, Dave!') => byRole('textbox', {name: 'Hello, Dave!'})
-	[`<input data-test title="Hello, Dave!" />`, "Hello, Dave!"]
+	[`<input data-test title="Hello, Dave!" />`, "Hello, Dave!"],
+	[
+		`<label for="select">A Select</label><select data-test id="select" />`,
+		"A Select"
+	],
+	[
+		`<label for="textarea">A TextArea</label><textarea data-test id="textarea" />`,
+		"A TextArea"
+	]
 ])(`test #%#`, testMarkup);
 
 describe("prohibited naming", () => {

diff --git a/sources/accessible-name.ts b/sources/accessible-name.ts
@@ -362,7 +362,13 @@ export function computeAccessibleName(
 	}
 
 	function computeElementTextAlternative(node: Node): string | null {
-		if (!isHTMLInputElement(node)) {
+		if (
+			!(
+				isHTMLInputElement(node) ||
+				isHTMLSelectElement(node) ||
+				isHTMLTextAreaElement(node)
+			)
+		) {
 			return null;
 		}
 		const input = node;