[modification request] Add pause button to Logobar

[nsolerieu]

Problem

• Accessibility recommend to allow user to stop and animated element on the page
• It's has been noted that the marquee effect is particularly distracting

Solution

Bake in the component a (subtle) pause button

See @jesussandreas design suggestion here

Urgency

@stamat already fixed this where it was a flagged by a11y as a critical issue - now it's time to update our system. SEV-2 a11y issue: https://github.com/github/accessibility-audits/issues/7881

[rezrah]

👋 @nsolerieu thanks for opening this request. A few quick questions / clarifications:

• The image shows a static logobar, not the marquee variant. Presumably we want to add this to marquee only, and not allow static variants to turn into marquees?
  • related to above: would a play/pause button positioned on the fade out gradient not defeat the purpose of the fade / interfere with it?
• Are you using an Octicon to represent play/pause or a custom icon?

@stamat already fixed this where it was a flagged by a11y as a critical issue

It seems like the issue on that page was resolved by turning the marquee animation off. Do you have any examples of this feature having been implemented on a production page? No worries if not, just curious to see it in action.

[stamat]

@rezrah legend ✨ I'll try to respond to these, but @nsolerieu can fill in if I missed something!

• We intend to do this on marquee variants and not static variants ofc. The design is a just a sketch.
  • Yes it will be positioned on the fade out to the right.
• There is no pause octicon, and the play octicon, looking at the design won't do, so I believe these icons are custom. We could file a request for an additional play icon and a new pause icon, regardless. Since we have the Video player component, and the old audio player component

Here are the three production pages where the quick play/pause solution was implemented to work with Logo Suite component with marquee option:

• https://github.com/enterprise
• https://github.com/enterprise/advanced-security
• https://github.com/features/copilot - This is where it gets ugly, when we have two buttons one above the other.

This new play/pause button should present a standard way to play/pause moving content across our pages. Much like Apple does.

[stamat]

Also here is the play/pause button I believe they want implemented https://githubnext.com/projects/copilot-workspace ✨

[nsolerieu]

+1 to all of @stamat points:

• We dont have standard play/pause icon and I'm in favor of using @jesussandreas version for now as they have been adopted on a few pages already
• Placing the button over the fade is working for me as it allows to keep the component contained in a horizontal bar and avoid the awkward bump under the bar like on Copilot
• Indeed this pause is only for the marquee version

[jesussandreas]

@rezrah

Figma link to Mockup.

[joshfarrant]

@jesussandreas I'm just working on this at the moment. Do you have any suggestions of how to implement this on a light-mode LogoSuite?

Eg this kind of thing (but better 😅)

[jesussandreas]

Yes, let me come back to you on this.

[jesussandreas]

@joshfarrant could it be something like this?

[joshfarrant]

Thanks @jesussandreas! That's definitely an improvement over my solution ✨

I'll loop in @danielguillan too as, following a chat we had, he spotted a few other things we could do along with just adding the button.

[danielguillan]

I think we can leverage the styles of the updated subtle Button variant:

We also need a 40px offset at the end of the logobar/mask when the button is present:

[rfearing]

@danielguillan I was looking into an accessibility audit issue for marketing engineering and curious ~~if we already meet the accessibility criteria for this. If you look at the Mechanism definition of the WCAG requirement, I believe we're covered because we already honor the Reduced Motion preference. See definition:~~

The mechanism may be explicitly provided in the content, or may be relied upon to be provided by either the platform or by user agents, including assistive technologies.

Here is a video of me toggling "Reduce motion" and the LogoSuite acting accordingly.

https://github.com/user-attachments/assets/cb0c6cc7-edf8-41a3-bee5-c1c8602ae128

Update: Sorry for the noise. I think we do need it after re-reading it.

[joshfarrant]

This has been added and will be included in the next release of Primer Brand