expect(received).toMatchSnapshot() Snapshot name: `Guidance Content pages test/focus/focusNotObscured/infoAndExamples matches the snapshot 1` New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. Received: <DocumentFragment> <div class="content-container" > <div class="content-left" /> <div class="content" > <p> For elements receiving keyboard focus, its focus indicator must be at least partially visible and not obscured by author-created content which overlays it, unless the focused element can be revealed without requiring the user to advance focus in the UI. </p> <h2> Why it matters </h2> <p> Keyboard users need to know which component currently has the input focus so they can predict the results of their key presses. If this failure occurs, users cannot see where the indicator is due to other authored content. Any 'sticky' content that moves with the viewport can potentially obscure other elements on the page, including controls the user may tab to. </p> <h3> From a user's perspective </h3> <p> <em> “I’m a reporter with repetitive stress injury who uses speech recognition software. This page has a big content area that's always displayed across the bottom of the screen (a sticky footer). When I move focus to items, some are hidden behind the footer, and I can't see them. This page also uses a persistent header (also called a “sticky" header or banner), where the header remains in the same place as I scroll down the screen. This header is obscuring elements that have focus — which is extremely annoying and blocking for me!” </em> </p> <h2> How to fix </h2> <p> Ensure interactive components that receive focus indicator are at least partially visible and not obscured by author-created content which overlays it, unless the focused element can be revealed without requiring the user to advance focus in the UI. </p> <h2> Example </h2> <div class="pass-fail-grid" > <div class="fail-section" > <div class="fail-header" > <span class="check-container" > <svg aria-hidden="true" fill="none" height="16" role="img" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" > <circle cx="8" cy="8" fill="#E81123" r="8" /> <path d="M10.9837 6.27639C11.3352 5.92491 11.3352 5.35507 10.9837 5.00359C10.6322 4.65212 10.0624 4.65212 9.7109 5.00359L7.99722 6.71728L6.28375 5.00381C5.93227 4.65234 5.36242 4.65234 5.01095 5.00381C4.65948 5.35528 4.65948 5.92513 5.01095 6.2766L6.72443 7.99007L4.9837 9.7308C4.63222 10.0823 4.63222 10.6521 4.9837 11.0036C5.33517 11.3551 5.90502 11.3551 6.25649 11.0036L7.99722 9.26287L9.73816 11.0038C10.0896 11.3553 10.6595 11.3553 11.011 11.0038C11.3624 10.6523 11.3624 10.0825 11.011 9.73101L9.27001 7.99007L10.9837 6.27639Z" fill="var(--neutral-0)" /> </svg> </span> <h3> Fail </h3> </div> <p> A non-movable panel such as a sticky footer, cookie banner or chat widget can overlay content on the screen. These elements fail this rule if focus can be moved to an element where content would fully obscure to the point of being illegible and could not be scrolled into view (e.g., by attempting to manipulate the content in the visible viewport by use of arrow keys). </p> </div>