Simplify print style for links with URL text

Currently the site print style marks up links with their URL, for
example, given a link with text "Example" that points to example.com,
the link will render like

Example (example.com)

This is overly verbose in cases where the link text is actually the
same as the URL, in which case you get duplication, like

example.com/foo (https://example.com/foo)

This commit attempts to modify this markup logic to avoid this
duplication, while keeping existing behavior for all other links.

This is implemented by adding a new class on the backend to links
with URL link text, and having our frontend CSS hide the URL markup
if that class exists. It isn't possible to implement this logic in
CSS alone.

The backend logic attempts to be smart; for example, a link to
https://www.consumerfinance.gov/foo that has link text of
"consumerfinance.gov/foo" will still get the simplified styling.

See internal DeCo#641 for context.

Author: chosak

cfgov/core/tests/test_utils.py

@@ -13,6 +13,7 @@
     get_body_html,
     get_link_tags,
     make_safe,
+    text_matches_href,
 )
 
 
@@ -29,8 +30,8 @@ def test_make_safe(self):
         self.assertEqual(term, make_safe(unsafe_term))
 
     def test_make_safe_max_length(self):
-        term = """We're the Consumer Financial Protection Bureau (CFPB), 
-            a U.S. government agency that makes sure banks, 
+        term = """We're the Consumer Financial Protection Bureau (CFPB),
+            a U.S. government agency that makes sure banks,
             lenders, and other financial companies treat you fairly."""
         self.assertEqual(75, len(make_safe(term)))
 
@@ -323,3 +324,65 @@ def test_non_cfpb_links(self):
         for url in non_cfpb_urls:
             with self.subTest(url=url):
                 self.assertTrue(NON_CFPB_LINKS.match(url))
+
+
+class TextMatchesHrefTests(SimpleTestCase):
+    def test_text_matchs_href(self):
+        self.assertTrue(
+            text_matches_href("http://example.com", "https://example.com")
+        )
+        self.assertTrue(
+            text_matches_href("https://example.com/", "http://example.com")
+        )
+
+    def test_trailing_slash(self):
+        self.assertTrue(
+            text_matches_href("https://example.com", "https://example.com/")
+        )
+        self.assertTrue(text_matches_href("/foo/bar/", "/foo/bar"))
+        self.assertTrue(text_matches_href("/foo/bar", "/foo/bar/"))
+
+    def test_relative_urls(self):
+        self.assertTrue(text_matches_href("/about", "/about/"))
+        self.assertTrue(text_matches_href("/about/", "/about"))
+
+    def test_domains_and_paths(self):
+        for text, href in [
+            (
+                "https://consumerfinance.gov/foo",
+                "http://www.consumerfinance.gov/foo",
+            ),
+            (
+                "consumerfinance.gov/bar/baz",
+                "https://www.consumerfinance.gov/bar/baz/",
+            ),
+            (
+                "consumerfinance.gov/bar/baz",
+                "/bar/baz/",
+            ),
+            ("https://example.com/about", "https://example.com/about"),
+        ]:
+            with self.subTest(text=text, href=href):
+                self.assertTrue(text_matches_href(text, href))
+
+        for text, href in [
+            (
+                "https://www.consumerfinance.gov/foo",
+                "https://example.com/foo",
+            ),
+            ("https://example.com/about", "https://example.com/contact"),
+        ]:
+            with self.subTest(text=text, href=href):
+                self.assertFalse(text_matches_href(text, href))
+
+    def test_whitespace(self):
+        self.assertTrue(
+            text_matches_href(
+                "  https://example.com  ", "https://example.com/"
+            )
+        )
+
+    def test_case_sensitivity(self):
+        self.assertFalse(
+            text_matches_href("https://Example.com", "https://example.com")
+        )

cfgov/core/utils.py

@@ -1,4 +1,5 @@
 import re
+from urllib.parse import urlparse
 
 from django.template.defaultfilters import slugify
 
@@ -130,6 +131,37 @@ def get_link_tags(html):
     return A_TAG_RE.findall(html)
 
 
+def text_matches_href(text, href):
+    """Compare link text with link URL.
+
+    Returns true if link text is functionally equivalent to the link href.
+    """
+    internal_domains = [
+        "consumerfinance.gov",
+        "www.consumerfinance.gov",
+    ]
+
+    def parse_potential_url(url):
+        if "://" not in url and "." in url.split("/")[0]:
+            url = "https://" + url
+        elif "://" not in url:
+            url = "https://RELATIVE/" + url.lstrip("/")
+
+        return urlparse(url)
+
+    def normalize(url):
+        parsed = parse_potential_url(url)
+        netloc = parsed.netloc or "RELATIVE"
+        path = parsed.path.rstrip("/")
+
+        if netloc in internal_domains or netloc == "RELATIVE":
+            netloc = "INTERNAL"
+
+        return f"{netloc}{path}"
+
+    return normalize((text or "").strip()) == normalize((href or "").strip())
+
+
 def add_link_markup(tag, request_path):
     """Add necessary markup to the given link and return if modified.
 
@@ -149,9 +181,13 @@ def add_link_markup(tag, request_path):
     if tag is None:
         return None
 
+    original_tag = str(tag)
     href = tag["href"]
     class_attrs = tag.attrs.setdefault("class", [])
 
+    if text_matches_href(tag.get_text(), href):
+        tag["class"].append("u-link-text-url")
+
     if request_path is not None:
         # Strips the path of the current page from hrefs that are internal page
         # anchor links.
@@ -193,8 +229,10 @@ def add_link_markup(tag, request_path):
         # be an external link and modified accordingly above.
         return str(tag)
 
+    # If we're not adding an icon, there's nothing more to do.
     if not icon:
-        return
+        str_tag = str(tag)
+        return str_tag if str_tag != original_tag else None
 
     icon_classes = {"class": LINK_ICON_TEXT_CLASSES}
     spans = tag.findAll("span", icon_classes)

cfgov/unprocessed/css/print.scss

@@ -13,19 +13,19 @@
     white-space: normal;
   }
 
-  a[href*="://"]:after
+  a[href*="://"]:not(.u-link-text-url)::after
   {
     // Output href in parentheses for links with a protocol already there.
     content: ' (' attr(href) ')';
   }
 
-  a[href^='/']::after {
+  a[href^='/']:not(.u-link-text-url)::after {
     // Output root-relative hrefs in parentheses with our domain prepended.
     content: ' (cfpb.gov' attr(href) ')';
   }
 
-  a[href^='/ask-cfpb/']::after,
-  a[href*='consumerfinance.gov/ask-cfpb']::after {
+  a[href^='/ask-cfpb/']:not(.u-link-text-url)::after,
+  a[href*='consumerfinance.gov/ask-cfpb']:not(.u-link-text-url)::after {
     // Use short URL when printing Ask CFPB links.
     content: ' (' attr(data-pretty-href) ')';
   }
@@ -34,7 +34,7 @@
   a.m-info-unit__heading-link::after,
   .m-info-unit__content h4 a::after {
     // Do not append hrefs to the logo or info unit headings.
-    content: none;
+    content: none !important;
   }
 
   a[href^='#'] {