[Announcement Bar] Auto-rotate fixes

[kjellr]

PR Summary:

• Rotates by default on mobile, undoing changes in Follow ups for accessibility of announcements slider #2580.
• Removes "on desktop" in the settings label, which reverts part of [Announcement bar] Change auto rotate announcements copy and min value #2787.
• Adds a visibility: hidden rule to slides that are hidden, so that they may be hidden from the preview inspector.
• Auto-rotates to the appropriate message when its block is selected in the editor.

Why are these changes introduced?

• We received feedback that it's unexpected that slides won't rotate on mobile automatically. This was originally done for accessibility reasons, but due to the relatively small footprint of the animation we're turning this animation back on for small screens. prefers-reduced-motion will still work for visitors who have that option set.
• The visibility rule was added to help prevent the outlines of hidden blocks from showing up in power preview. This will require a change in the editor to be fully realized. (cc @clauderic)
• Finally, the PR fixes a bug where the selected announcement bar message would not always be shown in the preview while it was being edited.

Visual impact on existing themes

On mobile, the announcement bar will auto-rotate if the merchant has set it to do so.

Testing steps/scenarios

• Check to make sure that when "Auto-rotate announcements" is checked, the announcements rotate on mobile too.
• Make sure that non-active messages in the announcement bar receive the visibility: hidden; rule.
• Verify that when you select a non-active message block from the sidebar, that message becomes the active message in the preview panel.

Demo: https://os2-demo.myshopify.com/admin/themes/140250742806/editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[clauderic]

This is the counterpart PR in online-store-web to update the preview inspector https://github.com/Shopify/online-store-web/pull/17287

[lougoncharenko]

PR looks good to me! I tested it doing the following

auto rotate

• Checked and unchecked auto rotate
• Tested auto rotate in mobile and desktop
• Increased the speed to 5s, 7s, 10s to ensure the speeds are still working
• removed and added social icons and locales to ensure nothing is broken
• tested auto rotate in safari and chrome

Other tests:

• Color schemes
• Color gradient
• Screen reader accessibility- turned voiceover on and navigated screen

*** In terms of accessibility, when I was using the voiceover screen reader, I noticed that when the announcement bars rotated, nothing was said to indicate the announcement bar slide was switching, nor was the text on the announcement bar read unless you hovered on it. Is there a reason why the announcement bars aren't announced via the screen reader?

[kjellr]

*** In terms of accessibility, when I was using the voiceover screen reader, I noticed that when the announcement bars rotated, nothing was said to indicate the announcement bar slide was switching, nor was the text on the announcement bar read unless you hovered on it. Is there a reason why the announcement bars aren't announced via the screen reader?

Good callout. I did some keyboard + Voiceover testing, and it did announce the messages for me when I cycled through them. It didn't announce them when they cycled automatically, but I think that's probably fine — that area of the screen is relatively ambient, so I think it would be distracting to announce changes there while the user isn't directly interacting with it. It might be worth some investigation later, but I think we can handle it separate from this PR.

[kimberlyoleiro]

Alongside This is the counterpart PR in online-store-web to update the preview inspector https://github.com/Shopify/online-store-web/pull/17287 this issue fixes #2612