From 87fe152af72761810b5e337fb8e07464cd0fc586 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 13 Nov 2021 08:38:54 -0800
Subject: [PATCH] [Fix] `no-invalid-html-attribute`: allow `link` `rel` to have
 `apple-touch-icon`, `mask-icon`

Fixes #3132
---
 CHANGELOG.md                                 |  5 +++++
 lib/rules/no-invalid-html-attribute.js       |  2 ++
 tests/lib/rules/no-invalid-html-attribute.js | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce76987a34..f8395d6613 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/rules/no-invalid-html-attribute.js b/lib/rules/no-invalid-html-attribute.js
index 06eeb5b53c..1a5b255f4e 100644
--- a/lib/rules/no-invalid-html-attribute.js
+++ b/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'])],
diff --git a/tests/lib/rules/no-invalid-html-attribute.js b/tests/lib/rules/no-invalid-html-attribute.js
index 6920ba7239..7c63453037 100644
--- a/tests/lib/rules/no-invalid-html-attribute.js
+++ b/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: [
     {