@swisspost/internet-header 1.7.2 → 1.7.3-beta.0

package/dist/collection/components/post-internet-footer/post-internet-footer.css

@@ -43,6 +43,16 @@
  * will be available as sass-variables
  * but should not be used.
 */
+:root {
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 400px;
+  --bs-breakpoint-rg: 600px;
+  --bs-breakpoint-md: 780px;
+  --bs-breakpoint-lg: 1024px;
+  --bs-breakpoint-xl: 1280px;
+  --bs-breakpoint-xxl: 1441px;
+}
+
 .row {
   --bs-gutter-x: 30px;
   --bs-gutter-y: 0;
@@ -1910,39 +1920,15 @@
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -1953,11 +1939,13 @@ svg {
 }
 
 .nav-link {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -1965,9 +1953,16 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
 .nav-link:hover, .nav-link:focus {
   color: black;
 }
+.nav-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
 .nav-link > svg {
   width: 1.4em;
   height: 1.4em;
@@ -1977,6 +1972,56 @@ svg {
   flex-shrink: 1;
 }
 
+.no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -2038,17 +2083,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;

package/dist/collection/components/post-internet-header/post-internet-header.css

@@ -23,39 +23,15 @@
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -66,11 +42,13 @@ svg {
 }
 
 .nav-link {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -78,9 +56,16 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
 .nav-link:hover, .nav-link:focus {
   color: black;
 }
+.nav-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
 .nav-link > svg {
   width: 1.4em;
   height: 1.4em;
@@ -90,6 +75,56 @@ svg {
   flex-shrink: 1;
 }
 
+.no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -151,17 +186,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;

package/dist/collection/components/post-klp-login-widget/post-klp-login-widget.css

@@ -412,39 +412,15 @@
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden, .klp-widget-anonymous__text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -455,11 +431,13 @@ svg {
 }
 
 .nav-link {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -467,9 +445,16 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
 .nav-link:hover, .nav-link:focus {
   color: black;
 }
+.nav-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
 .nav-link > svg {
   width: 1.4em;
   height: 1.4em;
@@ -479,6 +464,56 @@ svg {
   flex-shrink: 1;
 }
 
+.no-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -540,17 +575,6 @@ svg {
   }
 }
 
-.klp-widget-anonymous__text, .visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;
@@ -696,7 +720,6 @@ svg {
 
 .klp-widget-anonymous {
   height: 100%;
-  overflow: hidden;
   color: rgba(0, 0, 0, 0.6);
 }
 
@@ -715,7 +738,6 @@ svg {
   font-size: 1rem;
   text-decoration: none;
   background-color: white;
-  outline-offset: -2px;
 }
 
 .klp-widget-anonymous a:hover {

package/dist/collection/components/post-language-switch/components/post-language-switch-list.js

@@ -9,7 +9,7 @@ export const PostLanguageSwitchList = (props) => {
   return (h("nav", { class: "language-switch-dropdown", ref: e => props.dropdownRef(e), "aria-label": config.translations.navLangAriaLabel }, h("ul", { "aria-label": translate('Change language') }, props.navLang
     .filter(lang => !lang.isCurrent)
     .map(lang => {
-    const TagName = lang.url === null ? 'button' : 'a';
+    const TagName = lang.url ? 'a' : 'button';
     return (h("li", { key: lang.lang }, h(TagName, { onClick: () => props.switchLanguage(lang), href: lang.url, lang: lang.lang, title: lang.title }, h("span", { class: "visually-hidden" }, lang.title), h("span", { "aria-hidden": "true" }, lang.text))));
   }))));
 };

package/dist/collection/components/post-language-switch/components/post-language-switch-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-language-switch-list.js","sourceRoot":"","sources":["../../../../../src/components/post-language-switch/components/post-language-switch-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAItC,EAAE,EAAE;;EACH,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,MAAK,SAAS;IAAE,OAAO;EACxD,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;EAE5C,OAAO,CACL,WACE,KAAK,EAAC,0BAA0B,EAChC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,gBAClB,MAAM,CAAC,YAAY,CAAC,gBAAgB;IAEhD,wBAAgB,SAAS,CAAC,iBAAiB,CAAC,IACzC,KAAK,CAAC,OAAO;OACX,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;OAC/B,GAAG,CAAC,IAAI,CAAC,EAAE;MACV,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;MACnD,OAAO,CACL,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;QAChB,EAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;UAEjB,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ;UACjD,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACnC,CACP,CACN,CAAC;IACJ,CAAC,CAAC,CACD,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n  navLang: NavLangEntity[];\n  switchLanguage: (lang: NavLangEntity) => void;\n  dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n  if (state.localizedConfig?.header === undefined) return;\n  const config = state.localizedConfig.header;\n\n  return (\n    <nav\n      class=\"language-switch-dropdown\"\n      ref={e => props.dropdownRef(e)}\n      aria-label={config.translations.navLangAriaLabel}\n    >\n      <ul aria-label={translate('Change language')}>\n        {props.navLang\n          .filter(lang => !lang.isCurrent)\n          .map(lang => {\n            const TagName = lang.url === null ? 'button' : 'a';\n            return (\n              <li key={lang.lang}>\n                <TagName\n                  onClick={() => props.switchLanguage(lang)}\n                  href={lang.url}\n                  lang={lang.lang}\n                  title={lang.title}\n                >\n                  <span class=\"visually-hidden\">{lang.title}</span>\n                  <span aria-hidden=\"true\">{lang.text}</span>\n                </TagName>\n              </li>\n            );\n          })}\n      </ul>\n    </nav>\n  );\n};\n"]}
+{"version":3,"file":"post-language-switch-list.js","sourceRoot":"","sources":["../../../../../src/components/post-language-switch/components/post-language-switch-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAItC,EAAE,EAAE;;EACH,IAAI,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,MAAK,SAAS;IAAE,OAAO;EACxD,MAAM,MAAM,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC;EAE5C,OAAO,CACL,WACE,KAAK,EAAC,0BAA0B,EAChC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,gBAClB,MAAM,CAAC,YAAY,CAAC,gBAAgB;IAEhD,wBAAgB,SAAS,CAAC,iBAAiB,CAAC,IACzC,KAAK,CAAC,OAAO;OACX,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;OAC/B,GAAG,CAAC,IAAI,CAAC,EAAE;MACV,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;MAC1C,OAAO,CACL,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;QAChB,EAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EACzC,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;UAEjB,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ;UACjD,2BAAkB,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CACnC,CACP,CACN,CAAC;IACJ,CAAC,CAAC,CACD,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { NavLangEntity } from '../../../models/header.model';\nimport { translate } from '../../../services/language.service';\nimport { state } from '../../../data/store';\n\nexport const PostLanguageSwitchList = (props: {\n  navLang: NavLangEntity[];\n  switchLanguage: (lang: NavLangEntity) => void;\n  dropdownRef: (element: HTMLElement | undefined) => void;\n}) => {\n  if (state.localizedConfig?.header === undefined) return;\n  const config = state.localizedConfig.header;\n\n  return (\n    <nav\n      class=\"language-switch-dropdown\"\n      ref={e => props.dropdownRef(e)}\n      aria-label={config.translations.navLangAriaLabel}\n    >\n      <ul aria-label={translate('Change language')}>\n        {props.navLang\n          .filter(lang => !lang.isCurrent)\n          .map(lang => {\n            const TagName = lang.url ? 'a' : 'button';\n            return (\n              <li key={lang.lang}>\n                <TagName\n                  onClick={() => props.switchLanguage(lang)}\n                  href={lang.url}\n                  lang={lang.lang}\n                  title={lang.title}\n                >\n                  <span class=\"visually-hidden\">{lang.title}</span>\n                  <span aria-hidden=\"true\">{lang.text}</span>\n                </TagName>\n              </li>\n            );\n          })}\n      </ul>\n    </nav>\n  );\n};\n"]}

package/dist/collection/components/post-language-switch/post-language-switch.css

@@ -23,39 +23,15 @@
   font-weight: 300;
   src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.language-switch-dropdown ul, .no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -65,13 +41,15 @@ svg {
   padding: 0;
 }
 
-.language-switch-dropdown a,
-.language-switch-dropdown button, .nav-link {
+.nav-link, .language-switch-dropdown a,
+.language-switch-dropdown button {
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
   text-decoration: none;
   color: rgba(0, 0, 0, 0.8);
   transition: color 200ms;
   background-color: transparent;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -79,22 +57,81 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
-.language-switch-dropdown a:hover,
-.language-switch-dropdown button:hover, .nav-link:hover, .language-switch-dropdown a:focus,
-.language-switch-dropdown button:focus, .nav-link:focus {
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .language-switch-dropdown a:is(:focus-visible, :focus-within, .pretend-focus),
+.language-switch-dropdown button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.nav-link:hover, .language-switch-dropdown a:hover,
+.language-switch-dropdown button:hover, .nav-link:focus, .language-switch-dropdown a:focus,
+.language-switch-dropdown button:focus {
   color: black;
 }
-.language-switch-dropdown a > svg,
-.language-switch-dropdown button > svg, .nav-link > svg {
+.nav-link:focus-visible, .language-switch-dropdown a:focus-visible,
+.language-switch-dropdown button:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+.nav-link > svg, .language-switch-dropdown a > svg,
+.language-switch-dropdown button > svg {
   width: 1.4em;
   height: 1.4em;
   flex-shrink: 0;
 }
-.language-switch-dropdown a > span,
-.language-switch-dropdown button > span, .nav-link > span {
+.nav-link > span, .language-switch-dropdown a > span,
+.language-switch-dropdown button > span {
   flex-shrink: 1;
 }
 
+.no-list, .language-switch-dropdown ul {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+*,
+:host,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
+}
+
+button {
+  font: inherit;
+  padding: 0;
+}
+
+a,
+button {
+  border-radius: 3px;
+  outline: none;
+  outline-offset: 2px;
+  /* Compatibility with button-group */
+}
+a:is(:focus-visible, :focus-within, .pretend-focus),
+button:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -156,17 +193,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;