Main Content
Test link to a paragraph in the footer.
Notes
- There is a CSS-only version of this technique that uses the new
:has
selector. That selector currently (October 2022) isn't supported by Firefox, so this version uses JavaScript instead. - This also uses the HTML
dialog
element, with that being opened using theshow()
function, which makes it non-modal. The HTML living standard describes adialog
element like this:The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.
A cookie banner feels like a suitable use case for this. There is a bonus to using this element: most modern browsers automatically focus managedialog
elements when they open. - When the cookie banner is visible, bottom margin is added to the page's
body
element. CSSscroll-margin
is then used to force the focused content into view. - When the cookie banner is closed, the margin and scroll padding are removed.
- This supports the Reflow Criterion: the cookie panel becomes un-fixed when the screen is zoomed in (thanks to my colleague, and ARIA Working Group member, Adam Page for help with this).
- Interesting discovery: if you use a class of
.cookie-banner
in your HTML, CodePen won't display that; you'll need to use a different class name.