VF Footer update as per Intranet implementation

[bhushan-ebi]

VF Footer component needs to be reviewed and changes need to be made as per the recent implementation in Intranet Possible changes :

• Spacing between links needs to be increased
• Bottom text (containing EMBL-EBI.... Contact details etc) also needs to be reviewed for spacing, styling and structure
• Styling changes
• Responsive changes (Open seperate ticket if needed)

[Adedoyinebi]

From the review done on the footer during the intranet redesign, the following changes should be made to improve the design of the vf-footer.

Component changes

• Discoverability & Consistent styling of links
  • The texts ““Maybe an address too, 5555, Somewhere, Earth.” and “Tel: +49 00 000 000.” at the bottom of the vf-footer should be updated to a links and styled in similar way as “Another entry”(Neutral 0 #FFFFFF - default link state) as the phone number and address are usually links.
• Target size. (Desktop)
  • In order to achieve the AA accessibility requirement for Target Size the vf-footer links should be at least 24px by 24px. Update all the texts at the bottom of the vf-footer (“Copyright © Your Organisation.” , “Maybe an address too, 5555, Somewhere, Earth.”, “Tel: +49 00 000 000.” and “Another entry” ) by adding a padding of 4px above and below each item to have a total height of 31px.

Responsive updates

• Breaking point

  • The columns in the footer should wrap at breaking points for tablets and mobile devices. For the example we are showing in the vf it should wrap as follows:
    • Breaking point for Width below 768px - 3 columns above and 2 columns below
      • Design in figma for breaking point below 768px
    • Breaking point for Width below 600px(Mobile) - Single column stack
      • Design in figma for breaking point below 600px

• Target size. (Responsive - Below 768px)

  • On responsive devices where there is no mouse base interaction, it is important to aim for the AAA accessibility requirement for Target Size. The footer links should be at least 44px by 44px.
    • Update the links in the columns in the footer by adding a padding of 10px above and below each item to have a total height of 47px.
    • Update the texts at the bottom of the footer by adding a padding of 12px above and below each item to have a total height of 47px.

Next steps

• Update the design of the live component in the html site
• Implement the responsive vf-footer in html
• Update design of vf-footer in figma] and add the responsive variant
• Create documentation for vf-footer

These tasks will be added subsequently

Useful links

• Design of the vf-footer in figma
• Intranet project
  • Feedback from the usability test of the responsive footer - Slides
  • Intranet footer design

@stefangutnick Kindly review this task

[stefangutnick]

@Adedoyinebi Have reviewed and it all looks really good to me. Good work, this adds a lot of accessibility benefits and standardizes the footer design

[Adedoyinebi]

Assigning this task to @bhushan-ebi for the development phase