Repository: sveltejs/svelte (JavaScript)
Date: 2019-08-02 16:24:35+00:00
Task type: Bug Fix

Issue:
Not accepting PayPal input image statement with an alt message.
**Describe the bug**
I have a component that uses an input type image and it has an alt message also. But the svelte compiler is constantly warning that it needs an alt message. 
 
**Logs**
```
(!) Plugin svelte: A11y: <input type="image"> element should have an alt, aria-label or aria-labelledby attribute
src/components/Donate.svelte
<input type="image" alt="PayPal: A safe way to make donations." src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit">
```

**To Reproduce**
Have a component with the the html for a PayPal donate button. It will always generate the error when you compile. But, since it's a warning, I still get the processed files okay.

* If you can demonstrate the bug using https://svelte.dev/repl, please do.
* If that's not possible, we recommend creating a small repo that illustrates the problem.
* Reproductions should be small, self-contained, correct examples – http://sscce.org.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

**Expected behavior**
It should compile without errors since the input image element has an alt message.

**Information about your Svelte project:**
- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
NW.js version 40
- Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
Macos Mogave
- Svelte version (Please check you can reproduce the issue with the latest release!)
3.6.8
- Whether your project uses Webpack or Rollup
Rollup 1.17
**Severity**
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

It's just very annoying. I hate to have error messages/warnings.
Note: the more honest and specific you are here the more we will take you seriously.

**Additional context**
Add any other context about the problem here.



Issue discussion:
This is reproducible in the REPL.

```svelte
<input type="image" alt="PayPal: A safe way to make donations." src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit">
```

Svelte returns an incorrect warning about this element needing `alt`, `aria-label`, or `aria-labelledby`.
https://github.com/sveltejs/svelte/blob/abcdc740b1a244b66afc9f66d32fbb0d93f684f1/src/compiler/compile/nodes/Element.ts#L453

We're not actually checking whether one of the expected attributes is present before calling the function that emits the warning.

Solution patch:
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -451,11 +451,12 @@ export default class Element extends Node {
 			if (this.name === 'input') {
 				const type = attribute_map.get('type');
 				if (type && type.get_static_value() === 'image') {
-					should_have_attribute(
-						this,
-						['alt', 'aria-label', 'aria-labelledby'],
-						'input type="image"'
-					);
+					const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
+					const has_attribute = required_attributes.some(name => attribute_map.has(name));
+
+					if (!has_attribute) {
+						should_have_attribute(this, required_attributes, 'input type="image"');
+					}
 				}
 			}
 		}


Test patch:
diff --git a/test/validator/samples/a11y-alt-text/input.svelte b/test/validator/samples/a11y-alt-text/input.svelte
--- a/test/validator/samples/a11y-alt-text/input.svelte
+++ b/test/validator/samples/a11y-alt-text/input.svelte
@@ -6,4 +6,6 @@
 
 <object></object>
 
-<input type='image'>
\ No newline at end of file
+<input type='image'>
+
+<input type='image' alt='hey'>