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

[teroelonen]

UHF-10909 & UHF-9717

What was done

• Fixed issues with too small clickable area on announcement.
• Restyled the person card (contact card) paragraph.
• Fixed accessibility issues at the same time.

How to install

• Make sure your instance is up and running on latest dev branch. Use for example ELO instance.
  • git pull origin dev
  • make fresh
• Update the HDBT theme and the Helfi Platform config
  • composer require drupal/hdbt:dev-UHF-10909 && composer require drupal/helfi_platform_config:dev-UHF-10909
• Run make drush-updb drush-cr
• Run make shell
  • In the shell, run drush helfi:platform-config:update helfi_image_styles
  • Then run drush helfi:platform-config:update helfi_paragraphs_contact_card_listing

How to test

• Log in to the site and go to https://helfi-elo.docker.so/fi/yritykset-ja-tyo/business-helsinki-accelerator page.
• On the bottom of the page there is Contact Cards. They should look similar to this layout: https://www.figma.com/design/ZKi4C7RaTaNk991EL1whE3/branch/j7Q1m5nLLfkiEYcdUEKe18/Hel.fi-Komponentit?m=auto&node-id=2930-1674&t=nTbzm0XOz6fbXL5C-1
• Check that there is now the name of the social media link written next to the icon. In this example its LinkedIn.
• The paragraph on the page is reusable paragraph so you need to edit it from here: https://helfi-elo.docker.so/en/business-and-work/admin/content/paragraphs/92/edit
• For one of the Move from the "DEPRECATED Social media" fields "Social media link" field written under the selected LinkedIn icon to the new field "URL" under the new field "Social media link" below. Also add one new url to a real social media service like for example facebook.com and one more link to for example google.com. Like this:

• Save and go back to https://helfi-elo.docker.so/fi/yritykset-ja-tyo/business-helsinki-accelerator and the card where you moved the old one and added two new ones should have the social media links visible under the email. Check that all services have correct icons before them and the Google link has the link icon before it.
• Check that all the links on the card are minimum 44px x 44px size.
• Create an announcement https://helfi-elo.docker.so/fi/yritykset-ja-tyo/node/add/announcement and publish it.
• Save and inspect the announcement closing button. Its clickable area should be 48px x 48px. Also the link on the announcement should be at least 44px tall.
• Check that code follows our standards.

Continuous documentation

• This feature has been documented/the documentation has been updated
• This change doesn't require updates to the documentation

Other PRs

• UHF-10909 & UHF-9717: Contact card design change, accessibility improvements #1212
• UHF-10909 & UHF-9717: Contact card design change, accessibility improvements drupal-helfi-platform-config#918

[github-actions]

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt-visual-regression/pull/1212/html_report/

[annadruid]

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

[teroelonen]

Fixed 🫡

[github-actions]

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt-visual-regression/pull/1212/html_report/