Merge pull request #8675 from cfpb/tccp-itap

TCCP: ITAP Changes

cfgov/tccp/jinja2/tccp/includes/card_list.html

@@ -67,6 +67,7 @@
                 data-js-hook="behavior_ignore-link-targets"
                 data-ignore-link-targets="[data-tooltip]"
                 aria-label="{{ card.product_name }} from {{ card.institution_name }} with {{ card_purchase_apr }} purchase APR, {{ card_account_fee }} account fee, {{ card_rewards(card) }} card rewards{%- if card.requirements_for_opening or card.issued_by_credit_union -%}, eligibility requirements{%- endif -%}"
+                {% if loop.index == 11 %}data-js-hook="behavior_faded-card" tabindex="-1"{% endif %}
             >
                 <div class="m-card__heading-group">
                     <h2 class="h3 m-card__heading">{{ card.institution_name }}</h2>
@@ -102,8 +103,9 @@ <h2 class="h3 m-card__heading">{{ card.institution_name }}</h2>
                                         body=(
                                             'APRs change over time and are '
                                             ~ 'specific to the applicant. '
-                                            ~ 'Check rates before applying.'
-                                        )
+                                            ~ 'Check rates before applying.',
+                                        ),
+                                        tabindex=( loop.index == 11 )
                                     ) }}
                                 </span>
                             </div>
@@ -171,15 +173,16 @@ <h2 class="h3 m-card__heading">{{ card.institution_name }}</h2>
                                         ~ oxfordize(requirement_types)
                                         ~ ('. ' if card.geographic_restrictions or card.professional_affiliation)
                                         ~ 'See card details for more information.'
-                                    )
+                                    ),
+                                    tabindex=( loop.index == 11 )
                                 ) }}
                             </span>
                         </dd>
                     </div>
                     {%- endif -%}
                 </dl>
                 <div class="m-card__footer">
-                    <p class="m-card__subtitle">See card details</p>
+                    <p class="m-card__link" data-js-hook="behavior_card-link-proxy" tabindex="{% if loop.index == 11 %}-1{% else %}0{% endif %}">See card details</p>
                 </div>
             </a>
         </article>

cfgov/tccp/jinja2/tccp/includes/tooltip.html

@@ -1,6 +1,6 @@
-{% macro tooltip(name, heading=none, body=none, icon="help-round") -%}
+{% macro tooltip(name, heading=none, body=none, icon="help-round", tabindex="0") -%}
 
-<span tabindex="0" data-tooltip>
+<span tabindex="{% if tabindex == False %}0{% else %}-1{% endif %}" data-tooltip>
     {{ svg_icon(icon) }}
 </span>
 <template>

cfgov/unprocessed/apps/tccp/css/main.scss

@@ -160,9 +160,9 @@
     // Disable iOS link highlighting for our large cards
     -webkit-tap-highlight-color: transparent;
 
-    &:visited .m-card__subtitle {
-      border-color: $link-underline-visited;
-      color: $link-text-visited;
+    &:visited .m-card__link {
+      border-bottom: 1px dotted $link-underline;
+      color: $link-text;
     }
 
     @include respond-to-min($bp-sm-min) {
@@ -182,11 +182,6 @@
         -2px 0 0 0 inset var(--gray-20);
     }
 
-    .m-card__subtitle {
-      border-bottom: 1px solid $link-underline-hover;
-      color: $link-text-hover;
-    }
-
     &::after {
       content: '';
       position: absolute;
@@ -204,14 +199,18 @@
 
   .m-card__heading {
     margin-bottom: 0;
-    color: var(--gray);
+    color: var(--black);
     font-size: math.div(16px, $base-font-size-px) + rem;
     font-weight: 400;
     text-transform: uppercase;
   }
 
   .m-card__subtitle {
     display: inline;
+  }
+
+  .m-card__link {
+    display: inline;
     border-bottom: 1px dotted $link-underline;
     color: $link-text;
   }

cfgov/unprocessed/apps/tccp/js/index.js

@@ -21,6 +21,8 @@ function init() {
   behaviorAttach('submit-situations', 'click', handleFormValidation);
   // Attach handler for conditional link targets
   behaviorAttach('ignore-link-targets', 'click', handleIgnoreLinkTargets);
+  // Attach handler for "Enter" on card details link proxy
+  behaviorAttach('card-link-proxy', 'keydown', handleCardLinkProxies);
   // Make the breadcrumb on the details page go back to a filtered list
   updateBreadcrumb();
   // Move the card ordering dropdown below the expandable
@@ -38,6 +40,8 @@ function init() {
 function initializeAndReport(event) {
   initializeTooltips();
   reportFilter(event);
+  // Attach handler for "Enter" on card details link proxy
+  behaviorAttach('card-link-proxy', 'keydown', handleCardLinkProxies);
 }
 
 /**
@@ -134,7 +138,11 @@ function handleShowMore(event) {
   }
   const results = document.querySelector('.o-filterable-list-results');
   const showMoreFade = document.querySelector('#u-show-more-fade');
-  const nextResult = document.querySelector('.u-show-more > a');
+  const nextResult = document.querySelector('[data-js-hook="behavior_faded-card"]');
+  nextResult.setAttribute('tabIndex', '0');
+  nextResult.querySelectorAll('[tabindex="-1"]').forEach( elem => {
+    elem.setAttribute('tabIndex', '0');
+  });
   results.classList.remove('o-filterable-list-results--partial');
   showMoreFade.classList.add('u-hidden');
   nextResult.focus();
@@ -175,6 +183,18 @@ function handleFormValidation(event) {
   }
 }
 
+/**
+ * Handles "Enter" key on focusable p elements ("card link proxies"). These
+ * proxies are p elements masquerading as anchor tags.
+ * @param {Event} event - Keydown event
+ */
+function handleCardLinkProxies(event) {
+  if (event.key && event.key === 'Enter') {
+    const parentAnchor = event.target.closest('a');
+    parentAnchor.click();
+  }
+}
+
 /**
  * Update the breadcrumb on the card details page to point back to the filtered
  * list of cards the user came from. We have to do this client-side to prevent