Bubble UI - Teaser footer

Background / User story

As ABP I would like to inform users about interesting topics so they can be more engaged to the product

What to change

• Design:
  • https://webreflection.github.io/eyeo/bubbleui/#
  • footer CTA button hover: demo video
• Research:
  • Part 1
  • Part 2
  • Prototype
• Spec: eyeo/specs/spec!336
• Legal: N/A
• Development: None

Hints for testers

• The displayed message should move to the consecutive one every 3 seconds and restart when reaches the end.
• The initial active message should be a random one every time the popup is been opened.
• All message links should work properly.
• The message transition animation should pause when the user hovers over the footer and resume when the cursor gets out of the footer. The animation won't resume if the user has clicked over the navigation tabs and it will resume only after reopening the popup.
• Hovering over each navigation tabs (bottom indicators) should make such tab highlighted, but the message shouldn't be displayed until the user clicks on them.
• Accessibility:
  • Using "tab" keys, the user should be able to reach navigation tabs first (bottom indicators) and the message area afterwards (inverse to the visual order).
  • When the user has reached the navigation tabs (focus), using arrow keys ("left"/"right") would allow them to switch between messages.
  • Screen readers should announce the displayed message when switching between tabs using keyboard navigation and should announce the links properly when focused.
• Internationalization:
  • On locales with direction right-to-left, like arabic (ar), the message transition animation and the tab's progress bar animation should be right to left.

Hints for translators

Removed Strings:

• promote_abp_module

New strings:

• footer_mobile_description
• footer_donate_description
• footer_donate_button
• footer_rate_description
• footer_rate_button
• footer_social_description
• footer_get_help_description
• footer_get_help_button
• browser_store_android
• browser_store_ios
• connect_on_twitter
• connect_on_facebook

Character limits

The messages in the teaser footer have the following character limitations:

Message string: Max. 32 Characters (spaces included)

Call to action (CTA): Max. 10 Characters (spaces included)

Integration notes

None.