Repository: jsx-eslint/eslint-plugin-react
Pull request #3638 (2023-10-03 18:19:53)

[New] `no-invalid-html-attribute`: add support for `apple-touch-startup-image` `rel` attributes in `link` tags
Currently this attribute fails on the latest version:

```
“apple-touch-startup-image” is never a valid “rel” attribute value  react/no-invalid-html-attribute
```

According to [the docs](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md) the accepted values for this rule come from MDN, and MDN states that this value is [non-standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel) but not disallowed, the same as `apple-touch-icon`.

If I am incorrect here please let me know.

To test this I've added a generic example as seen in [Apple's own documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6) as well as a longer example more like something that a [PWA asset generator](https://github.com/elegantapp/pwa-asset-generator) would give you (which is recommended by [web.dev](https://web.dev/learn/pwa/enhancements/)).



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2dfc22d3..1b692324 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,12 +7,14 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Added
 * [`sort-prop-types`]: give errors on TS types ([#3615][] @akulsr0)
+* [`no-invalid-html-attribute`]: add support for `apple-touch-startup-image` `rel` attributes in `link` tags ([#3638][] @thomashockaday)
 
 ### Fixed
 * [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)
 * [`jsx-key`]: detect conditional returns ([#3630][] @yialo)
 * [`jsx-newline`]: prevent a crash when `allowMultilines ([#3633][] @ljharb)
 
+[#3638]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3638
 [#3633]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3633
 [#3630]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3630
 [#3623]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3623
diff --git a/lib/rules/no-invalid-html-attribute.js b/lib/rules/no-invalid-html-attribute.js
index 01d4927d..1dd4d0f4 100644
--- a/lib/rules/no-invalid-html-attribute.js
+++ b/lib/rules/no-invalid-html-attribute.js
@@ -17,6 +17,7 @@ const getMessageData = require('../util/message');
 const rel = new Map([
   ['alternate', new Set(['link', 'area', 'a'])],
   ['apple-touch-icon', new Set(['link'])],
+  ['apple-touch-startup-image', new Set(['link'])],
   ['author', new Set(['link', 'area', 'a'])],
   ['bookmark', new Set(['area', 'a'])],
   ['canonical', new Set(['link'])],


Test patch:
diff --git a/tests/lib/rules/no-invalid-html-attribute.js b/tests/lib/rules/no-invalid-html-attribute.js
index aae4c392..f1e20aa9 100644
--- a/tests/lib/rules/no-invalid-html-attribute.js
+++ b/tests/lib/rules/no-invalid-html-attribute.js
@@ -230,6 +230,12 @@ ruleTester.run('no-invalid-html-attribute', rule, {
     {
       code: '<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />',
     },
+    {
+      code: '<link rel="apple-touch-startup-image" href="launch.png" />',
+    },
+    {
+      code: '<link rel="apple-touch-startup-image" href="iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />',
+    },
     {
       code: '<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" />',
     },