Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
teroelonen merged 10 commits into from
Mar 11, 2025
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a5aa9e
Fix typo in announcement body class
teroelonen Mar 5, 2025
bccd0e6
Fix button and link sizes to comply with the a11y regulation minimun …
teroelonen Mar 5, 2025
d103d2d
Add a bit spacing for the accordion button on district and project se…
teroelonen Mar 5, 2025
09a536f
Contact card adjustments to make clickable area large enough
teroelonen Mar 6, 2025
90b86ae
Restyle the contact cards
teroelonen Mar 6, 2025
e0264c6
Added functionality that compares social media domains against list o…
teroelonen Mar 7, 2025
331ebd8
Fixed whitespace issue with links that have icons in front.
teroelonen Mar 10, 2025
de6078e
Moved preprocess function to bundle class in Social Media Link, style…
teroelonen Mar 10, 2025
642f2b1
Add both new and old social media links visible
teroelonen Mar 10, 2025
3d84689
Change pixel value to variable
teroelonen Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/css/styles.min.css
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

23 changes: 20 additions & 3 deletions src/scss/06_components/messages/_announcement.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
$-announcement_link_padding: 12px;
Copy link
Contributor

@annadruid annadruid Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this 12px be a variable? We seem to have $spacing-three-quarters available

Copy link
Contributor Author

@teroelonen teroelonen Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed 🫡


.announcement {
@include font('small');
height: var(--js-announcement-height, auto); // Allow overriding height for triggering css animation with js
Expand Down Expand Up @@ -53,7 +55,7 @@
}
}

.announcenemnt__content-body {
.announcement__content-body {
& *:first-child {
margin-top: 0;
}
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion src/scss/06_components/paragraphs/__index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
40 changes: 0 additions & 40 deletions src/scss/06_components/paragraphs/_contact-card-listing.scss
View file
Open in desktop

This file was deleted.

134 changes: 92 additions & 42 deletions src/scss/06_components/paragraphs/_contact-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
9 changes: 5 additions & 4 deletions src/scss/06_components/paragraphs/_district-and-project-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion templates/content/node--announcement--default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
8 changes: 5 additions & 3 deletions templates/misc/icon.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -}}
Loading
Loading