[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.