From ea9d80d89aa8de9f3d3ee32a38067efa3beb7dd4 Mon Sep 17 00:00:00 2001
From: Kate Higa <khiga8@github.com>
Date: Thu, 17 Feb 2022 16:34:41 -0800
Subject: [PATCH 1/5] add counter support and title counter

---
 README.md                                     |  3 ++
 .../no-title-attribute-counter.md             | 39 ++++++++++++++
 lib/erblint-github/linters/custom_helpers.rb  | 35 +++++++++++++
 .../no_title_attribute_counter.rb             | 51 +++++++++++++++++++
 4 files changed, 128 insertions(+)
 create mode 100644 docs/rules/accessibility/no-title-attribute-counter.md
 create mode 100644 lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb

diff --git a/README.md b/README.md
index 2679eca..486d788 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,8 @@ linters:
     enabled: true
   GitHub::Accessibility::NoRedundantImageAlt:
     enabled: true
+  GitHub::Accessibility::NoTitleAttributeCounter:
+    enabled: true
 ```
 
 ## Rules
@@ -45,6 +47,7 @@ linters:
 - [GitHub::Accessibility::NoAriaLabelMisuse](./docs/rules/accessibility/no-aria-label-misuse.md)
 - [GitHub::Accessibility::NoPositiveTabIndex](./docs/rules/accessibility/no-positive-tab-index.md)
 - [GitHub::Accessibility::NoRedundantImageAlt](./docs/rules/accessibility/no-redundant-image-alt.md)
+- [GitHub::Accessibility::NoTitleAttributeCounter](./docs/rules/accessibility/no-title-attribute-counter.md)
 
 ## Testing
 
diff --git a/docs/rules/accessibility/no-title-attribute-counter.md b/docs/rules/accessibility/no-title-attribute-counter.md
new file mode 100644
index 0000000..c787688
--- /dev/null
+++ b/docs/rules/accessibility/no-title-attribute-counter.md
@@ -0,0 +1,39 @@
+# No title attribute counter
+
+## Rule Details
+
+The `title` attribute is strongly discouraged. The only exception is on an `<iframe>` element. It is hardly useful and cannot be accessed by multiple groups of users including keyboard-only users and mobile users.
+
+The `title` attribute is commonly seen set on links, matching the link text. This is redundant and unnecessary so it can be simply be removed.
+
+If you are considering `title` attribute to provide supplementary description, consider whether the text in question can be persisted in the design. Alternatively, if it's important to display supplementary text that is hidden by default, consider using an **accessible** tooltip implementation that uses the `aria-labelledby` or `aria-describedby` semantics. Even so, proceed with caution: tooltips should only be used on interactive elements like links or buttons.
+
+### Should I use `title` attribute to provide accessible name for `<svg>`?
+
+Use a `<title>` element instead of the `title` attribute, or an `aria-label`.
+
+### Resources
+
+- [TPGI: Using the HTML title attribute ](https://www.tpgi.com/using-the-html-title-attribute/)
+- [The Trials and Tribulations of the Title Attribute](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/)
+
+### 👎 Examples of **incorrect** code for this rule:
+
+```erb
+<a title="A home for all developers" href="github.com">GitHub</a>
+```
+
+```
+<a href="/" title="github.com">GitHub</a>
+```
+
+### 👍 Examples of **correct** code for this rule:
+
+```erb
+<a href="github.com" aria-describedby="description">GitHub</a>
+<p id="description" class="tooltip js-tooltip">A home for all developers</p>
+```
+
+```
+<a href="github.com">GitHub</a>
+```
diff --git a/lib/erblint-github/linters/custom_helpers.rb b/lib/erblint-github/linters/custom_helpers.rb
index 0330015..6266286 100644
--- a/lib/erblint-github/linters/custom_helpers.rb
+++ b/lib/erblint-github/linters/custom_helpers.rb
@@ -24,6 +24,41 @@ def rule_disabled?(processed_source)
         end
       end
 
+      def counter_correct?(processed_source)
+        comment_node = nil
+        expected_count = 0
+        rule_name = self.class.name.match(/:?:?(\w+)\Z/)[1]
+        offenses_count = @offenses.length
+
+        processed_source.parser.ast.descendants(:erb).each do |node|
+          indicator_node, _, code_node, _ = *node
+          indicator = indicator_node&.loc&.source
+          comment = code_node&.loc&.source&.strip
+
+          if indicator == "#" && comment.start_with?("erblint:count") && comment.match(rule_name)
+            comment_node = node
+            expected_count = comment.match(/\s(\d+)\s?$/)[1].to_i
+          end
+        end
+
+        if offenses_count == 0
+          # have to adjust to get `\n` so we delete the whole line
+          add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:count comment for #{rule_name}", "") if comment_node
+          return
+        end
+
+        first_offense = @offenses[0]
+
+        if comment_node.nil?
+          add_offense(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{offenses_count} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{offenses_count} %>")
+        else
+          clear_offenses
+          if expected_count != offenses_count
+            add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", "<%#  erblint:counter #{rule_name} #{offenses_count} %>")
+          end
+        end
+      end
+
       def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
         message ||= klass::MESSAGE
         message += "\nLearn more at https://github.com/github/erblint-github#rules.\n"
diff --git a/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb b/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb
new file mode 100644
index 0000000..6a067c8
--- /dev/null
+++ b/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+require_relative "../../custom_helpers"
+
+module ERBLint
+  module Linters
+    module GitHub
+      module Accessibility
+        class NoTitleAttributeCounter < Linter
+          include ERBLint::Linters::CustomHelpers
+          include LinterRegistry
+
+          MESSAGE = "The title attribute is inaccesible to several groups of users. Please avoid setting unless for an `<iframe>`."
+
+          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.present?
+            end
+
+            counter_correct?(processed_source)
+          end
+
+          private
+
+          def correct_counter(corrector, processed_source, offense)
+            if processed_source.file_content.include?("erblint:counter DeprecatedInPrimerCounter")
+              corrector.replace(offense.source_range, offense.context)
+            else
+              corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
+            end
+          end
+
+          def autocorrect(processed_source, offense)
+            return unless offense.context
+    
+            lambda do |corrector|
+              if offense.context.include?("erblint:counter DeprecatedInPrimerCounter")
+                correct_counter(corrector, processed_source, offense)
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

From 17dd622086ab7cb2751fa010cc357a7c2ef485f6 Mon Sep 17 00:00:00 2001
From: Kate Higa <khiga8@github.com>
Date: Thu, 17 Feb 2022 16:58:24 -0800
Subject: [PATCH 2/5] introduce counter test

---
 lib/erblint-github/linters/custom_helpers.rb |  2 +-
 test/custom_helpers_test.rb                  | 32 ++++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/lib/erblint-github/linters/custom_helpers.rb b/lib/erblint-github/linters/custom_helpers.rb
index 6266286..a5c13c0 100644
--- a/lib/erblint-github/linters/custom_helpers.rb
+++ b/lib/erblint-github/linters/custom_helpers.rb
@@ -27,7 +27,7 @@ def rule_disabled?(processed_source)
       def counter_correct?(processed_source)
         comment_node = nil
         expected_count = 0
-        rule_name = self.class.name.match(/:?:?(\w+)\Z/)[1]
+        rule_name = simple_class_name
         offenses_count = @offenses.length
 
         processed_source.parser.ast.descendants(:erb).each do |node|
diff --git a/test/custom_helpers_test.rb b/test/custom_helpers_test.rb
index 4dfc1d5..0ae8be9 100644
--- a/test/custom_helpers_test.rb
+++ b/test/custom_helpers_test.rb
@@ -11,7 +11,7 @@ class FakeLinter < ERBLint::Linter
 
     MESSAGE = "Please fix your code."
   end
-
+  
   def linter_class
     CustomHelpersTest::FakeLinter
   end
@@ -38,8 +38,36 @@ def test_rule_disabled_adds_offense_if_disable_comment_is_present_but_no_offense
     assert_empty @linter.offenses
 
     extended_linter.rule_disabled?(processed_source)
+    assert_equal "Unused erblint:disable comment for CustomHelpersTest::FakeLinter", @linter.offenses.first.message
+  end
 
-    assert_equal @linter.offenses.length, 1
+  def test_counter_correct_does_not_add_offense_if_counter_matches_offense_count
+    @file = <<~HTML
+      <%# erblint:count CustomHelpersTest::FakeLinter 1 %>
+    HTML
+    @linter.offenses = ["fake offense"]
+    
+    extended_linter.counter_correct?(processed_source)
+    assert_empty @linter.offenses
+  end
+
+  def test_counter_correct_add_offense_if_counter_comment_is_unused
+    @file = <<~HTML
+      <%# erblint:count CustomHelpersTest::FakeLinter 1 %>
+    HTML
+
+    extended_linter.counter_correct?(processed_source)
+    assert_equal "Unused erblint:count comment for CustomHelpersTest::FakeLinter", @linter.offenses.first.message
+  end
+
+  def test_counter_correct_add_offense_if_counter_comment_count_is_incorrect
+    @file = <<~HTML
+      <%# erblint:count CustomHelpersTest::FakeLinter 2 %>
+    HTML
+    @linter.offenses = ["fake offense"]
+
+    extended_linter.counter_correct?(processed_source)
+    assert_equal "Incorrect erblint:counter number for CustomHelpersTest::FakeLinter. Expected: 2, actual: 1.", @linter.offenses.first.message
   end
 
   def test_generate_offense_with_message_defined_in_linter_class

From fa7ddfe84d88c66019085e0cba005d530cc235e4 Mon Sep 17 00:00:00 2001
From: Kate Higa <khiga8@github.com>
Date: Thu, 17 Feb 2022 17:48:15 -0800
Subject: [PATCH 3/5] introduce rule tests

---
 .../no-title-attribute-counter.md             |  4 +-
 lib/erblint-github/linters/custom_helpers.rb  | 12 ++--
 .../no_title_attribute_counter.rb             | 25 +++-----
 test/custom_helpers_test.rb                   | 12 ++--
 test/linter_test_case.rb                      | 11 ++++
 .../no_title_attribute_counter_test.rb        | 59 +++++++++++++++++++
 6 files changed, 92 insertions(+), 31 deletions(-)
 create mode 100644 test/linters/accessibility/no_title_attribute_counter_test.rb

diff --git a/docs/rules/accessibility/no-title-attribute-counter.md b/docs/rules/accessibility/no-title-attribute-counter.md
index c787688..767b22a 100644
--- a/docs/rules/accessibility/no-title-attribute-counter.md
+++ b/docs/rules/accessibility/no-title-attribute-counter.md
@@ -23,7 +23,7 @@ Use a `<title>` element instead of the `title` attribute, or an `aria-label`.
 <a title="A home for all developers" href="github.com">GitHub</a>
 ```
 
-```
+```erb
 <a href="/" title="github.com">GitHub</a>
 ```
 
@@ -34,6 +34,6 @@ Use a `<title>` element instead of the `title` attribute, or an `aria-label`.
 <p id="description" class="tooltip js-tooltip">A home for all developers</p>
 ```
 
-```
+```erb
 <a href="github.com">GitHub</a>
 ```
diff --git a/lib/erblint-github/linters/custom_helpers.rb b/lib/erblint-github/linters/custom_helpers.rb
index a5c13c0..3dd711b 100644
--- a/lib/erblint-github/linters/custom_helpers.rb
+++ b/lib/erblint-github/linters/custom_helpers.rb
@@ -31,19 +31,19 @@ def counter_correct?(processed_source)
         offenses_count = @offenses.length
 
         processed_source.parser.ast.descendants(:erb).each do |node|
-          indicator_node, _, code_node, _ = *node
+          indicator_node, _, code_node, = *node
           indicator = indicator_node&.loc&.source
           comment = code_node&.loc&.source&.strip
 
-          if indicator == "#" && comment.start_with?("erblint:count") && comment.match(rule_name)
+          if indicator == "#" && comment.start_with?("erblint:counter") && comment.match(rule_name)
             comment_node = node
             expected_count = comment.match(/\s(\d+)\s?$/)[1].to_i
           end
         end
 
-        if offenses_count == 0
+        if offenses_count.zero?
           # have to adjust to get `\n` so we delete the whole line
-          add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:count comment for #{rule_name}", "") if comment_node
+          add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:counter comment for #{rule_name}", "") if comment_node
           return
         end
 
@@ -53,9 +53,7 @@ def counter_correct?(processed_source)
           add_offense(processed_source.to_source_range(first_offense.source_range), "#{rule_name}: If you must, add <%# erblint:counter #{rule_name} #{offenses_count} %> to bypass this check.", "<%# erblint:counter #{rule_name} #{offenses_count} %>")
         else
           clear_offenses
-          if expected_count != offenses_count
-            add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", "<%#  erblint:counter #{rule_name} #{offenses_count} %>")
-          end
+          add_offense(processed_source.to_source_range(comment_node.loc), "Incorrect erblint:counter number for #{rule_name}. Expected: #{expected_count}, actual: #{offenses_count}.", "<%# erblint:counter #{rule_name} #{offenses_count} %>") if expected_count != offenses_count
         end
       end
 
diff --git a/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb b/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb
index 6a067c8..e855201 100644
--- a/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb
+++ b/lib/erblint-github/linters/github/accessibility/no_title_attribute_counter.rb
@@ -10,37 +10,30 @@ class NoTitleAttributeCounter < Linter
           include ERBLint::Linters::CustomHelpers
           include LinterRegistry
 
-          MESSAGE = "The title attribute is inaccesible to several groups of users. Please avoid setting unless for an `<iframe>`."
+          MESSAGE = "The title attribute should never be used unless for an `<iframe>` as it is inaccessible for several groups of users."
 
           def run(processed_source)
             tags(processed_source).each do |tag|
-              next if tag.name != "iframe"
+              next if tag.name == "iframe"
               next if tag.closing?
 
               title = possible_attribute_values(tag, "title")
-
               generate_offense(self.class, processed_source, tag) if title.present?
             end
 
             counter_correct?(processed_source)
           end
 
-          private
-
-          def correct_counter(corrector, processed_source, offense)
-            if processed_source.file_content.include?("erblint:counter DeprecatedInPrimerCounter")
-              corrector.replace(offense.source_range, offense.context)
-            else
-              corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
-            end
-          end
-
           def autocorrect(processed_source, offense)
             return unless offense.context
-    
+
             lambda do |corrector|
-              if offense.context.include?("erblint:counter DeprecatedInPrimerCounter")
-                correct_counter(corrector, processed_source, offense)
+              if processed_source.file_content.include?("erblint:counter #{simple_class_name}")
+                # update the counter if exists
+                corrector.replace(offense.source_range, offense.context)
+              else
+                # add comment with counter if none
+                corrector.insert_before(processed_source.source_buffer.source_range, "#{offense.context}\n")
               end
             end
           end
diff --git a/test/custom_helpers_test.rb b/test/custom_helpers_test.rb
index 0ae8be9..0926e50 100644
--- a/test/custom_helpers_test.rb
+++ b/test/custom_helpers_test.rb
@@ -11,7 +11,7 @@ class FakeLinter < ERBLint::Linter
 
     MESSAGE = "Please fix your code."
   end
-  
+
   def linter_class
     CustomHelpersTest::FakeLinter
   end
@@ -43,26 +43,26 @@ def test_rule_disabled_adds_offense_if_disable_comment_is_present_but_no_offense
 
   def test_counter_correct_does_not_add_offense_if_counter_matches_offense_count
     @file = <<~HTML
-      <%# erblint:count CustomHelpersTest::FakeLinter 1 %>
+      <%# erblint:counter CustomHelpersTest::FakeLinter 1 %>
     HTML
     @linter.offenses = ["fake offense"]
-    
+
     extended_linter.counter_correct?(processed_source)
     assert_empty @linter.offenses
   end
 
   def test_counter_correct_add_offense_if_counter_comment_is_unused
     @file = <<~HTML
-      <%# erblint:count CustomHelpersTest::FakeLinter 1 %>
+      <%# erblint:counter CustomHelpersTest::FakeLinter 1 %>
     HTML
 
     extended_linter.counter_correct?(processed_source)
-    assert_equal "Unused erblint:count comment for CustomHelpersTest::FakeLinter", @linter.offenses.first.message
+    assert_equal "Unused erblint:counter comment for CustomHelpersTest::FakeLinter", @linter.offenses.first.message
   end
 
   def test_counter_correct_add_offense_if_counter_comment_count_is_incorrect
     @file = <<~HTML
-      <%# erblint:count CustomHelpersTest::FakeLinter 2 %>
+      <%# erblint:counter CustomHelpersTest::FakeLinter 2 %>
     HTML
     @linter.offenses = ["fake offense"]
 
diff --git a/test/linter_test_case.rb b/test/linter_test_case.rb
index b025d13..b3351ec 100644
--- a/test/linter_test_case.rb
+++ b/test/linter_test_case.rb
@@ -24,4 +24,15 @@ def processed_source
   def tags
     processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
   end
+
+  def corrected_content
+    @corrected_content ||= begin
+      source = processed_source
+
+      @linter.run(source)
+      corrector = ERBLint::Corrector.new(source, offenses)
+
+      corrector.corrected_content
+    end
+  end
 end
diff --git a/test/linters/accessibility/no_title_attribute_counter_test.rb b/test/linters/accessibility/no_title_attribute_counter_test.rb
new file mode 100644
index 0000000..551f4ed
--- /dev/null
+++ b/test/linters/accessibility/no_title_attribute_counter_test.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class NoTitleAttributeCounterTest < LinterTestCase
+  def linter_class
+    ERBLint::Linters::GitHub::Accessibility::NoTitleAttributeCounter
+  end
+
+  def test_warns_if_element_sets_title_and_has_no_counter_comment
+    @file = "<img title='octopus'></img>"
+    @linter.run(processed_source)
+
+    assert_equal(2, @linter.offenses.count)
+    error_messages = @linter.offenses.map(&:message).sort
+    assert_match(/If you must, add <%# erblint:counter GitHub::Accessibility::NoTitleAttributeCounter 1 %> to bypass this check./, error_messages.first)
+    assert_match(/The title attribute should never be used unless for an `<iframe>` as it is inaccessible for several groups of users./, error_messages.last)
+  end
+
+  def test_does_not_warns_if_element_sets_title_and_has_correct_counter_comment
+    @file = <<~ERB
+      <%# erblint:counter GitHub::Accessibility::NoTitleAttributeCounter 1 %>
+      <a href="/" title="bad">some website</a>
+    ERB
+    @linter.run(processed_source)
+
+    assert_equal 0, @linter.offenses.count
+  end
+
+  def test_does_not_warn_if_iframe_sets_title
+    @file = "<iframe title='Introduction video'></iframe>"
+    @linter.run(processed_source)
+
+    assert_empty @linter.offenses
+  end
+
+  def test_does_not_autocorrect_when_ignores_are_correct
+    @file = <<~ERB
+      <%# erblint:counter GitHub::Accessibility::NoTitleAttributeCounter 1 %>
+      <a href="/" title="bad">some website</a>
+    ERB
+
+    assert_equal @file, corrected_content
+  end
+
+  def test_does_autocorrect_when_ignores_are_not_correct
+    @file = <<~ERB
+      <%# erblint:counter GitHub::Accessibility::NoTitleAttributeCounter 3 %>
+      <a href="/" title="bad">some website</a>
+    ERB
+    refute_equal @file, corrected_content
+
+    expected_content = <<~ERB
+      <%# erblint:counter GitHub::Accessibility::NoTitleAttributeCounter 1 %>
+      <a href="/" title="bad">some website</a>
+    ERB
+    assert_equal expected_content, corrected_content
+  end
+end

From e4e8c85a6fd456268a0fc1846491031bd2424148 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Tue, 22 Feb 2022 11:31:16 -0800
Subject: [PATCH 4/5] Update
 docs/rules/accessibility/no-title-attribute-counter.md

Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
---
 docs/rules/accessibility/no-title-attribute-counter.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/accessibility/no-title-attribute-counter.md b/docs/rules/accessibility/no-title-attribute-counter.md
index 767b22a..dabd98a 100644
--- a/docs/rules/accessibility/no-title-attribute-counter.md
+++ b/docs/rules/accessibility/no-title-attribute-counter.md
@@ -8,7 +8,7 @@ The `title` attribute is commonly seen set on links, matching the link text. Thi
 
 If you are considering `title` attribute to provide supplementary description, consider whether the text in question can be persisted in the design. Alternatively, if it's important to display supplementary text that is hidden by default, consider using an **accessible** tooltip implementation that uses the `aria-labelledby` or `aria-describedby` semantics. Even so, proceed with caution: tooltips should only be used on interactive elements like links or buttons.
 
-### Should I use `title` attribute to provide accessible name for `<svg>`?
+### Should I use the `title` attribute to provide an accessible name for an `<svg>`?
 
 Use a `<title>` element instead of the `title` attribute, or an `aria-label`.
 

From 7591c1b64faf15135ce0305d629119c86304ba1e Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Tue, 22 Feb 2022 11:31:21 -0800
Subject: [PATCH 5/5] Update
 docs/rules/accessibility/no-title-attribute-counter.md

Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
---
 docs/rules/accessibility/no-title-attribute-counter.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/accessibility/no-title-attribute-counter.md b/docs/rules/accessibility/no-title-attribute-counter.md
index dabd98a..0da86fd 100644
--- a/docs/rules/accessibility/no-title-attribute-counter.md
+++ b/docs/rules/accessibility/no-title-attribute-counter.md
@@ -6,7 +6,7 @@ The `title` attribute is strongly discouraged. The only exception is on an `<ifr
 
 The `title` attribute is commonly seen set on links, matching the link text. This is redundant and unnecessary so it can be simply be removed.
 
-If you are considering `title` attribute to provide supplementary description, consider whether the text in question can be persisted in the design. Alternatively, if it's important to display supplementary text that is hidden by default, consider using an **accessible** tooltip implementation that uses the `aria-labelledby` or `aria-describedby` semantics. Even so, proceed with caution: tooltips should only be used on interactive elements like links or buttons.
+If you are considering the`title` attribute to provide supplementary description, consider whether the text in question can be persisted in the design. Alternatively, if it's important to display supplementary text that is hidden by default, consider using an **accessible** tooltip implementation that uses the `aria-labelledby` or `aria-describedby` semantics. Even so, proceed with caution: tooltips should only be used on interactive elements like links or buttons.
 
 ### Should I use the `title` attribute to provide an accessible name for an `<svg>`?