fix: missing title warning for buttons and anchor tags (#16872)

* fix(a11y): title warning for buttons and anchor tags

* chore(changeset): added changeset

* Update playgrounds/sandbox/index.html

* Update .changeset/shiny-chicken-occur.md

---------

Co-authored-by: 7nik <[email protected]>
Co-authored-by: Simon H <[email protected]>

Author: 3 people

.changeset/shiny-chicken-occur.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: silence label warning for buttons and anchor tags with title attributes

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -81,7 +81,7 @@ Coding for the keyboard is important for users with physical disabilities who ca
 ### a11y_consider_explicit_label
 
 ```
-Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
 ```
 
 ### a11y_distracting_elements

packages/svelte/messages/compile-warnings/a11y.md

@@ -66,7 +66,7 @@ Coding for the keyboard is important for users with physical disabilities who ca
 
 ## a11y_consider_explicit_label
 
-> Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+> Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
 
 ## a11y_distracting_elements
 

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js

@@ -382,7 +382,10 @@ export function check_element(node, context) {
 	}
 
 	// element-specific checks
-	const is_labelled = attribute_map.has('aria-label') || attribute_map.has('aria-labelledby');
+	const is_labelled =
+		attribute_map.has('aria-label') ||
+		attribute_map.has('aria-labelledby') ||
+		attribute_map.has('title');
 
 	switch (node.name) {
 		case 'a':

packages/svelte/src/compiler/warnings.js

@@ -174,11 +174,11 @@ export function a11y_click_events_have_key_events(node) {
 }
 
 /**
- * Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+ * Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
  * @param {null | NodeLike} node
  */
 export function a11y_consider_explicit_label(node) {
-	w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\` or \`aria-labelledby\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
+	w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\`, \`aria-labelledby\` or \`title\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
 }
 
 /**

packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 1,
 			"column": 0

packages/svelte/tests/validator/samples/a11y-consider-explicit-label/input.svelte

@@ -4,6 +4,9 @@
 <button aria-label="Valid empty button"></button>
 <a href="/#" aria-label="Valid empty link"></a>
 
+<button title="Valid empty button"></button>
+<a href="/#" title="Valid empty link"></a>
+
 <button aria-hidden='true'></button>
 <button inert></button>
 <a href="/#" aria-hidden='true'><b></b></a>

packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 1,
 			"column": 0
@@ -13,7 +13,7 @@
 	},
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 2,
 			"column": 0