<details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Label this issue](https://contributors.gitlab.com/manage-issue?action=label&projectId=278964&issueIid=607550) </details> ## Summary https://gitlab.com/gitlab-org/gitlab/-/merge_requests/246440 replaced the `New` `GlBadge` on the super sidebar "More features" nav item with a CSS shimmer effect. Users who prefer reduced motion were left with no cue at all, because the static outline was gated behind the same media query as the animation. The visual design intent of the shimmer is preserved in full. No change is proposed to the animated shimmer for users who have not opted out of motion. ## Problem In `app/assets/stylesheets/framework/super_sidebar.scss`, the **entire** `&::before` rule sat inside `@media (prefers-reduced-motion: no-preference)`, including the static `box-shadow: inset 0 0 0 2px var(--super-sidebar-shimmer-border-color)` outline rather than only the gradient and animation. Under `prefers-reduced-motion: reduce`, all that remained on `.feature-library-shimmer` was `position: relative` plus three CSS custom properties that nothing consumed, so the item rendered identically to any other tertiary nav item. Because the gating required a positive `no-preference` match, browsers that do not support the query also fell through to no cue. Honoring `prefers-reduced-motion` should mean removing the motion, not removing the affordance. ## Fix Move the `&::before` rule out of `@media (prefers-reduced-motion: no-preference)` so the static accent outline is the unconditional baseline, and keep only the motion gated: ```scss .feature-library-shimmer { // custom properties unchanged position: relative; .gl-nav-item-slot, .gl-nav-item-label { position: relative; z-index: 1; } // Baseline cue: no motion, and renders even where the media query is unsupported. &::before { content: ''; position: absolute; inset: 0; border-radius: var(--gl-border-radius-lg); pointer-events: none; box-shadow: inset 0 0 0 2px var(--super-sidebar-shimmer-border-color); } @media (prefers-reduced-motion: no-preference) { &::before { background-image: linear-gradient(90deg, /* unchanged */); background-size: 200% 100%; background-position: 50% 0; animation: super-sidebar-shimmer 2s linear 4, super-sidebar-shimmer-fade-out 1s ease-out 8s forwards; } } } ``` ## Verification Verified against the merged code on `master` and against the `@gitlab/ui` sources in [agent session 5910569](https://gitlab.com/gitlab-org/gitlab/-/automate/agent-sessions/5910569). 1. **The restructure is mechanically valid.** The browser merges the two `&::before` blocks because they target the same pseudo-element. Motion-enabled users get `content`, `position`, `inset`, `border-radius`, `pointer-events`, and `box-shadow` from the outer block plus `background-image`, `background-size`, `background-position`, and `animation` from the inner block, which is identical to current behaviour. Reduced-motion users get the outer block only: outline, no gradient, no animation. 2. **Hover and active states are not blocked.** `pointer-events: none` lets all pointer events reach the `<button>`. The `::before` has no `background-color`, and an inset `box-shadow` renders inside the element's border without covering the button's own background. The `--gl-nav-item-background-color-hover` and `--gl-nav-item-background-color-active` changes defined in `nav_item.scss` remain fully visible. For motion-enabled users the gradient is semi-transparent at 32% and 8%, so the background change stays perceptible underneath, which was already true before this change. 3. **The fade-out still works.** `animation` is declared on `&::before` inside the media query and `box-shadow` on `&::before` outside it, and both apply to the same pseudo-element. The fade-out animates `opacity` to 0 with `forwards`, so the outline fades away together with the gradient after roughly nine seconds. Unchanged in effect. 4. **The reduced-motion persistence difference is acceptable.** With no animation running, the outline persists at full opacity until `shimmerActive` becomes `false`, meaning until the user opens the modal and the `feature_library_shimmer_seen` callout is recorded. This is an improvement rather than a regression: the cue disappears when the user takes the intended action, which is the correct interaction model. A JS timer would only be needed if strict parity with the motion fade-out were a hard requirement, and there is no accessibility or UX reason to impose that. 5. **The z-index overrides are still needed for motion-enabled users.** Without `z-index: 1`, the absolutely positioned gradient would paint over the icon and label spans. The fragile coupling to the Pajamas-internal `.gl-nav-item-slot` and `.gl-nav-item-label` class names is a real concern flagged during review of https://gitlab.com/gitlab-org/gitlab/-/merge_requests/246440: a rename would silently break content layering. `isolation: isolate` on `.feature-library-shimmer` with `z-index: 0` on `::before` would be more robust. This is pre-existing in merged code and not introduced by this fix, so it is out of scope here. ## Status Addressed by https://gitlab.com/gitlab-org/gitlab/-/merge_requests/247917. Remaining: confirm with a Product Designer that a persistent static outline for reduced-motion users, lasting until the modal is opened, is the intended behaviour. ## Out of scope - **Adding a non-visual "new" signal for screen readers.** Removed from this issue's scope, see the comment below for the reasoning. Worth its own issue if the team wants to revisit it. - Replacing the Pajamas-internal `.gl-nav-item-slot` and `.gl-nav-item-label` z-index overrides with an `isolation: isolate` stacking context. Pre-existing in merged code. - Any change to the animated shimmer itself for users who have not opted out of reduced motion. ## References - Introduced by https://gitlab.com/gitlab-org/gitlab/-/merge_requests/246440 - Reverted badge from https://gitlab.com/gitlab-org/gitlab/-/merge_requests/243508 - Fixed by https://gitlab.com/gitlab-org/gitlab/-/merge_requests/247917 - Verification: [agent session 5910569](https://gitlab.com/gitlab-org/gitlab/-/automate/agent-sessions/5910569) - Behind the `feature_library_modal` feature flag