[Fix] no-invalid-html-attribute: allow link rel to have `apple-…

…touch-icon`, `mask-icon`

Fixes #3132

CHANGELOG.md

@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ## Unreleased
 
+### Fixed
+* [`no-invalid-html-attribute`]: allow `link` `rel` to have `apple-touch-icon`, `mask-icon` ([#3132][] @ljharb)
+
+[#3132]: https://github.com/yannickcr/eslint-plugin-react/issue/3132
+
 ## [7.27.0] - 2021.11.09
 
 ### Added

lib/rules/no-invalid-html-attribute.js

@@ -15,6 +15,7 @@ const report = require('../util/report');
 
 const rel = new Map([
   ['alternate', new Set(['link', 'area', 'a'])],
+  ['apple-touch-icon', new Set(['link'])],
   ['author', new Set(['link', 'area', 'a'])],
   ['bookmark', new Set(['area', 'a'])],
   ['canonical', new Set(['link'])],
@@ -24,6 +25,7 @@ const rel = new Map([
   ['icon', new Set(['link'])],
   ['license', new Set(['link', 'area', 'a', 'form'])],
   ['manifest', new Set(['link'])],
+  ['mask-icon', new Set(['link'])],
   ['modulepreload', new Set(['link'])],
   ['next', new Set(['link', 'area', 'a', 'form'])],
   ['nofollow', new Set(['area', 'a', 'form'])],

tests/lib/rules/no-invalid-html-attribute.js

@@ -211,6 +211,24 @@ ruleTester.run('no-invalid-html-attribute', rule, {
         })
       `,
     },
+    {
+      code: '<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />',
+    },
+    {
+      code: '<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />',
+    },
+    {
+      code: '<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />',
+    },
+    {
+      code: '<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />',
+    },
+    {
+      code: '<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />',
+    },
+    {
+      code: '<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff" />',
+    },
   ],
   invalid: [
     {