Context Keeper¶
The context-keeper helps users keep their focus on a page after a reload or navigation. This is important for accessibility in certain specific situations to meet WCAG 2.4.3 Focus Order (Level A). It makes sure users do not lose focus, so they do not lose context while using the site.
context-keeper is actually not a webcomponent in the traditional sense. It does not render any visible UI. Instead, it works by adding specific attributes to existing links.
Usage¶
Add the context-keeper attribute to any link. Also, add a unique context-target-id attribute to a focusable element. This should match the id of the element you want to focus after the page reloads.
When a user clicks or presses Enter on a context keeper element, the context-target-id is temporarily saved. After the page reloads, the Context Keeper will focus the element with that id.
Keep in mind that Context Keeper only works on interactive elements (not hidden, disabled, or inert). This helps users who rely on keyboard navigation or screen readers.
Attributes¶
| Attribute name | Type | Required | Description |
|---|---|---|---|
context-keeper |
- | Yes | Marks the element as a context keeper trigger. |
context-target-id |
string | Yes | The id of the element to focus after reload. |
Example¶
An example of usage could be a link element that reloads a page despite the same context. In Shoper, those elements are filters or list sort methods. Because of the reload, the focus would be lost without Context Keeper.
<!-- Element to restore focus to after page reload -->
<h2 id="products-heading">Products</h2>
<!-- Link that keeps context -->
<a href="/filtered-list" context-keeper context-target-id="products-heading">Apply filters</a>
Example¶
It is also possible to use Context Keeper to focus on the same element that triggered the reload.