From d9c1e9c33d5ecf0c6ccfa041008d54e234ee5258 Mon Sep 17 00:00:00 2001
From: Kate Higa <khiga8@github.com>
Date: Thu, 27 Jan 2022 17:09:20 -0800
Subject: [PATCH 1/2] Migrate iframe title rule

---
 README.md                                     |  3 ++
 docs/rules/accessibility/iframe-has-title.md  | 25 ++++++++++++
 .../github/accessibility/iframe_has_title.rb  | 38 +++++++++++++++++++
 .../accessibility/iframe_has_title_test.rb    | 30 +++++++++++++++
 4 files changed, 96 insertions(+)
 create mode 100644 docs/rules/accessibility/iframe-has-title.md
 create mode 100644 lib/erblint-github/linters/github/accessibility/iframe_has_title.rb
 create mode 100644 test/linters/accessibility/iframe_has_title_test.rb

diff --git a/README.md b/README.md
index ce4909d..d09f8b9 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,8 @@ require "erblint-github/linters"
 linters:
   GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled:
     enabled: true
+  GitHub::Accessibility::IframeHasTitle:
+    enabled: true
   GitHub::Accessibility::ImageHasAlt:
     enabled: true
   GitHub::Accessibility::NoAriaLabelMisuse:
@@ -36,6 +38,7 @@ linters:
 ## Rules
 
 - [GitHub::Accessibility::AvoidBothDisabledAndAriaDisabled](./docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md)
+- [GitHub::Accessibility::IframeHasTitle](./docs/rules/accessibility/iframe-has-title.md)
 - [GitHub::Accessibility::ImageHasAlt](./docs/rules/accessibility/image-has-alt.md)
 - [GitHub::Accessibility::NoAriaLabelMisuse](./docs/rules/accessibility/no-aria-label-misuse.md)
 - [GitHub::Accessibility::NoRedundantImageAlt](./docs/rules/accessibility/no-redundant-image-alt.md)
diff --git a/docs/rules/accessibility/iframe-has-title.md b/docs/rules/accessibility/iframe-has-title.md
new file mode 100644
index 0000000..bf17712
--- /dev/null
+++ b/docs/rules/accessibility/iframe-has-title.md
@@ -0,0 +1,25 @@
+# Iframe has title
+
+## Rule Details
+
+`<iframe>` should have a unique title attribute that identifies the content. The title will help screen reader users determine whether to explore the frame in detail. If an `<iframe>` contains no meaningful content, hide it by setting `aria-hidden="true"`.
+
+👎 Examples of **incorrect** code for this rule:
+
+```erb
+<iframe src="../welcome-video"></iframe>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```erb
+<!-- good -->
+<iframe  src="../welcome-video" title="Welcome to GitHub Video" ></iframe>
+```
+
+```erb
+<!-- also good -->
+<iframe aria-hidden="true">
+    <!-- Meaningless JavaScript code -->
+</iframe>
+```
diff --git a/lib/erblint-github/linters/github/accessibility/iframe_has_title.rb b/lib/erblint-github/linters/github/accessibility/iframe_has_title.rb
new file mode 100644
index 0000000..6f83b1f
--- /dev/null
+++ b/lib/erblint-github/linters/github/accessibility/iframe_has_title.rb
@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class IframeHasTitle < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+
+          MESSAGE = "<iframe> with meaningful content should have a title attribute that identifies the content."\
+          " If <iframe> has no meaningful content, hide it from assistive technology with `aria-hidden='true'`."\
+
+          def run(processed_source)
+            tags(processed_source).each do |tag|
+              next if tag.name != "iframe"
+              next if tag.closing?
+
+              title = possible_attribute_values(tag, "title")
+
+              generate_offense(self.class, processed_source, tag) if title.empty? && !aria_hidden?(tag)
+            end
+
+            rule_disabled?(processed_source)
+          end
+
+          private
+
+          def aria_hidden?(tag)
+            tag.attributes["aria-hidden"]&.value&.present?
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/test/linters/accessibility/iframe_has_title_test.rb b/test/linters/accessibility/iframe_has_title_test.rb
new file mode 100644
index 0000000..980f2d6
--- /dev/null
+++ b/test/linters/accessibility/iframe_has_title_test.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class IframeHasTitle < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::IframeHasTitle
+  end
+
+  def test_warns_if_iframe_has_no_title
+    @file = "<iframe alt='image of an octopus'></iframe>"
+    @linter.run(processed_source)
+
+    refute_empty @linter.offenses
+  end
+
+  def test_does_not_warn_if_iframe_has_aria_hidden_to_true
+    @file = "<iframe aria-hidden='true'></iframe>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_warn_if_iframe_has_title_set_to_string
+    @file = "<iframe title='Video tutorial of GitHub Actions'></iframe>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+end

From 4482f188756a72a5005f2640b4791a0912311466 Mon Sep 17 00:00:00 2001
From: Kate Higa <khiga8@github.com>
Date: Thu, 27 Jan 2022 17:12:10 -0800
Subject: [PATCH 2/2] use heading tag for examples header

---
 .../accessibility/avoid-both-disabled-and-aria-disabled.md    | 4 ++--
 docs/rules/accessibility/iframe-has-title.md                  | 4 ++--
 docs/rules/accessibility/image-has-alt.md                     | 4 ++--
 docs/rules/accessibility/no-aria-label-misuse.md              | 4 ++--
 docs/rules/accessibility/no-redundant-image-alt.md            | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md b/docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md
index 124d7cb..02bf361 100644
--- a/docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md
+++ b/docs/rules/accessibility/avoid-both-disabled-and-aria-disabled.md
@@ -9,14 +9,14 @@ HTML elements with `disabled` are ignored when a screen reader uses tab navigati
 
 This linter will raise when both `aria-disabled` and `disabled` are set on HTML elements that natively support `disabled` including `button`, `fieldset`, `input`, `optgroup`, `option`, `select`, and `textarea`.
 
-👎 Examples of **incorrect** code for this rule:
+### 👎 Examples of **incorrect** code for this rule:
 
 ```erb
 <button aria-disabled="true" disabled="true">
 <input aria-disabled="true" disabled="true">
 ```
 
-👍 Examples of **correct** code for this rule:
+### 👍 Examples of **correct** code for this rule:
 
 ```erb
 <button disabled="true">
diff --git a/docs/rules/accessibility/iframe-has-title.md b/docs/rules/accessibility/iframe-has-title.md
index bf17712..c3fec82 100644
--- a/docs/rules/accessibility/iframe-has-title.md
+++ b/docs/rules/accessibility/iframe-has-title.md
@@ -4,13 +4,13 @@
 
 `<iframe>` should have a unique title attribute that identifies the content. The title will help screen reader users determine whether to explore the frame in detail. If an `<iframe>` contains no meaningful content, hide it by setting `aria-hidden="true"`.
 
-👎 Examples of **incorrect** code for this rule:
+### 👎 Examples of **incorrect** code for this rule:
 
 ```erb
 <iframe src="../welcome-video"></iframe>
 ```
 
-👍 Examples of **correct** code for this rule:
+### 👍 Examples of **correct** code for this rule:
 
 ```erb
 <!-- good -->
diff --git a/docs/rules/accessibility/image-has-alt.md b/docs/rules/accessibility/image-has-alt.md
index e78c8dc..ecaa42f 100644
--- a/docs/rules/accessibility/image-has-alt.md
+++ b/docs/rules/accessibility/image-has-alt.md
@@ -6,13 +6,13 @@
 
 Learn more at [W3C WAI Images Tutorial](https://www.w3.org/WAI/tutorials/images/).
 
-👎 Examples of **incorrect** code for this rule:
+### 👎 Examples of **incorrect** code for this rule:
 
 ```erb
 <img src="logo.png">
 ```
 
-👍 Examples of **correct** code for this rule:
+### 👍 Examples of **correct** code for this rule:
 
 ```erb
 <!-- good -->
diff --git a/docs/rules/accessibility/no-aria-label-misuse.md b/docs/rules/accessibility/no-aria-label-misuse.md
index a74224c..69f9f70 100644
--- a/docs/rules/accessibility/no-aria-label-misuse.md
+++ b/docs/rules/accessibility/no-aria-label-misuse.md
@@ -12,7 +12,7 @@ Also check out the following resources:
 - [w3c/aria Consider prohibiting author naming certain roles #833](https://github.com/w3c/aria/issues/833)
 - [Not so short note on aria-label usage - Big Table Edition](https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/)
 
-👎 Examples of **incorrect** code for this rule:
+### 👎 Examples of **incorrect** code for this rule:
 
 ```erb
 <span aria-label="This does something">Hello</span>
@@ -26,7 +26,7 @@ Also check out the following resources:
 <h1 aria-label="This will override the content">Page title</h1>
 ```
 
-👍 Examples of **correct** code for this rule:
+### 👍 Examples of **correct** code for this rule:
 
 ```erb
 <span>Hello</span>
diff --git a/docs/rules/accessibility/no-redundant-image-alt.md b/docs/rules/accessibility/no-redundant-image-alt.md
index ee6f245..10a34c3 100644
--- a/docs/rules/accessibility/no-redundant-image-alt.md
+++ b/docs/rules/accessibility/no-redundant-image-alt.md
@@ -6,13 +6,13 @@
 
 Learn more at [W3C WAI Images Tutorial](https://www.w3.org/WAI/tutorials/images/).
 
-👎 Examples of **incorrect** code for this rule:
+### 👎 Examples of **incorrect** code for this rule:
 
 ```erb
 <img alt="picture of Mona Lisa" src="monalisa.png">
 ```
 
-👍 Examples of **correct** code for this rule:
+### 👍 Examples of **correct** code for this rule:
 
 ```erb
 <!-- good -->