UHF-10909 & UHF-9717: Contact card design change, accessibility improvements

src/scss/06_components/messages/_announcement.scss

@@ -1,3 +1,5 @@
+$-announcement_link_padding: $spacing-three-quarters;
+
 .announcement {
   @include font('small');
   height: var(--js-announcement-height, auto); // Allow overriding height for triggering css animation with js
@@ -53,7 +55,7 @@
   }
 }
 
-.announcenemnt__content-body {
+.announcement__content-body {
   & *:first-child {
     margin-top: 0;
   }
@@ -66,6 +68,15 @@
     margin-top: 0;
   }
 
+  a {
+    padding-block: $-announcement_link_padding; // This sets the link clickable area to be big enough for a11y.
+  }
+
+  a:focus,
+  a:active {
+    outline: solid var(--color-black) 3px;
+  }
+
   a::after {
     @include pseudo-icon('arrow-right', calc(var(--line-height) * 1em));
     @include hover-link-arrow-transition;
@@ -90,19 +101,25 @@
   background: transparent;
   border: 0 none;
   cursor: pointer;
-  height: $spacing-double;
+  height: $spacing-triple;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: -$spacing-half;
   margin-top: -$spacing-half;
   padding: 0;
-  width: $spacing-double;
+  width: $spacing-triple;
 
   &::after {
     --icon-size: #{$spacing-double};
 
     @include pseudo-icon('cross');
   }
+
+  &:focus,
+  &:active {
+    outline: solid var(--color-black) 3px;
+    outline-offset: -3px;
+  }
 }
 
 .js-announcement__close--disabled {

src/scss/06_components/paragraphs/__index.scss

@@ -3,7 +3,6 @@
 @import 'chart';
 @import 'columns';
 @import 'contact-card';
-@import 'contact-card-listing';
 @import 'content-cards';
 @import 'curated-event-list';
 @import 'district-and-project-search';

src/scss/06_components/paragraphs/_contact-card.scss

@@ -1,76 +1,126 @@
-$contact-card-image-size: 200px;
-$contact-card-color-line-width: 4px;
-$contact-card-max-width: $contact-card-image-size;
+$-contact-card-font: body;
+$-contact-card-padding: $spacing-and-half;
+$-contact-card-max-width: calc(250px + $-contact-card-padding * 2);
+$-contact-card-link-padding: calc((44px - get-line-height($-contact-card-font, true)) / 2);
 
-.contact-card {
+$-contact-card-gap: $spacing-and-half;
+$-contact-card-two-columns: calc(100% / 2);
+$-contact-card-two-columns-spacing: calc($-contact-card-gap / 2);
+$-contact-card-three-columns: calc(100% / 3);
+$-contact-card-three-columns-spacing: calc(($-contact-card-gap / 3) * 2);
+$-contact-card-four-columns: calc(100% / 4);
+$-contact-card-four-columns-spacing: calc(($-contact-card-gap / 4) * 3);
+
+.contact-card-listing--container {
   display: flex;
+  flex-direction: column;
+  gap: $-contact-card-gap;
+
+  @include breakpoint($breakpoint-s) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
 
-.contact-card--with-image {
+.contact-card {
+  background-color: $color-black-5;
+  display: flex;
   flex-direction: column;
+  max-width: $-contact-card-max-width;
+  padding: $-contact-card-padding;
+  width: 100%;
+
+  @include breakpoint($breakpoint-s) {
+    width: calc($-contact-card-two-columns - $-contact-card-two-columns-spacing);
+  }
+
+  @include breakpoint($breakpoint-m) {
+    width: calc($-contact-card-three-columns - $-contact-card-three-columns-spacing);
+  }
+
+  @include breakpoint($breakpoint-xl) {
+    width: calc($-contact-card-four-columns - $-contact-card-four-columns-spacing);
+  }
+}
+
+// Column rules when the contact card listing is in the components upper region.
+.components--upper .contact-card-listing--container {
+  .contact-card {
+    @include breakpoint($breakpoint-xl) {
+      width: calc($-contact-card-three-columns - $-contact-card-three-columns-spacing);
+    }
+  }
+}
+
+// Column rules when the contact card listing is in the components upper region
+// AND there is sidebar visible.
+.has-sidebar--first .components--upper .contact-card-listing--container {
+  .contact-card {
+    @include breakpoint($breakpoint-l) {
+      width: calc($-contact-card-two-columns - $-contact-card-two-columns-spacing);
+    }
+
+    @include breakpoint($breakpoint-xl) {
+      width: calc($-contact-card-three-columns - $-contact-card-three-columns-spacing);
+    }
+  }
 }
 
 .contact-card__image-container {
-  margin-bottom: $spacing;
+  margin-bottom: $spacing-and-half;
   margin-right: 0;
 
+  picture,
   img {
-    height: $contact-card-image-size;
-    width: $contact-card-image-size;
+    @include image-defaults;
+    height: auto;
+    width: 100%;
   }
 }
 
-.contact-card__person-phone-number a:not(:last-of-type)::after {
-  content: ',';
-  margin-right: 2px;
+.contact-card__person-name {
+  @include font('h4');
+  margin-top: 0;
+}
+
+.contact-card__person-title {
+  @include font($-contact-card-font);
+}
+
+.contact-card__person-links {
+  margin-top: $-contact-card-gap;
 }
 
-.contact-card__person-information {
-  @include font(small);
+.contact-card__person-link {
+  @include font($-contact-card-font);
   word-wrap: break-word;
   hyphens: auto;
-  margin-bottom: $spacing-half;
   overflow-wrap: break-word;
 
-  @include breakpoint($breakpoint-s) {
-    min-width: $contact-card-max-width;
+  a {
+    // This is not very nice but it gets us the phone numbers to remain
+    // inline and each on a new line.
+    display: table;
+    padding-block: $-contact-card-link-padding;
   }
 }
-.contact-card--color-line .contact-card__person-information {
-  min-width: calc($contact-card-image-size - $spacing-and-half - $spacing-quarter);
-}
 
-.contact-card__person-name {
-  @include font('h5');
-  margin-top: 0;
-}
-
-.contact-card__person-email {
+.contact-card__person-link--email {
+  // This is because there are sometimes long emails and limited space.
+  // We don't want the email to break out of the box.
   word-break: break-all;
 }
 
-.contact-card__person-social-media {
+.contact-card__person-link--social-media {
   display: flex;
-  margin-bottom: $spacing;
-  margin-top: $spacing;
+  flex-direction: column;
 
   .hel-icon {
-    height: $spacing-and-half;
-    margin-right: $spacing-half;
-    width: $spacing-and-half;
+    margin-inline-end: $spacing-quarter;
+    vertical-align: middle;
   }
 }
 
-* + .contact-card__person-description {
-  margin-top: $spacing;
-}
-
-.contact-card__color-line {
-  background-color: var(--hdbt-color-palette--primary);
-  margin-right: $spacing-and-half;
-  min-width: $contact-card-color-line-width;
-}
-
 .contact-card__person-description {
-  color: #{$color-black-60};
+  margin-top: $-contact-card-gap;
 }

src/scss/06_components/paragraphs/_district-and-project-search.scss

@@ -37,11 +37,12 @@
       font-weight: 500;
     }
 
-    div[role='button'] {
-      width: auto;
+    button {
+      padding-block: $spacing-half; // This sets the link clickable area to be big enough for a11y.
 
-      svg {
-        margin-left: $spacing-half;
+      &:focus,
+      &:active {
+        outline: solid var(--color-black) 3px;
       }
     }
 

templates/content/node--announcement--default.html.twig

@@ -33,7 +33,7 @@
     </button>
     <div class="announcement__content">
       {% if content.body|render != null %}
-        <div class="announcenemnt__content-body">
+        <div class="announcement__content-body">
           {{ content.body }}
         </div>
       {% endif %}

templates/misc/icon.twig

@@ -1,7 +1,9 @@
 {% set icon_labelled_by = "hdbt-icon--" ~ random() %}
-
-<span class="hel-icon hel-icon--{{ icon }} {{ class }}" role="img" {% if label %} aria-labelledby="{{ icon_labelled_by }}" {% else %} aria-hidden="true" {% endif %}>
+{%- set icon_no_whitespace -%}
+  <span class="hel-icon hel-icon--{{ icon }} {{ class }}" role="img" {% if label %} aria-labelledby="{{ icon_labelled_by }}" {% else %} aria-hidden="true" {% endif %}>
   {% if label %}
     <span class="is-hidden" id="{{ icon_labelled_by }}">{{ label }}</span>
   {% endif %}
-</span>
+  </span>
+{%- endset -%}
+{{- icon_no_whitespace -}}