diff --git a/.changeset/nice-cycles-provide.md b/.changeset/nice-cycles-provide.md new file mode 100644 index 0000000000..a87368195c --- /dev/null +++ b/.changeset/nice-cycles-provide.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles. diff --git a/packages/components/src/animations/slide.ts b/packages/components/src/animations/slide.ts index 2bd21d7cd4..7ab26f7392 100644 --- a/packages/components/src/animations/slide.ts +++ b/packages/components/src/animations/slide.ts @@ -2,10 +2,10 @@ const easing: string = 'ease'; const duration: number = 500; const fill: FillMode = 'forwards'; -export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animation => { +export const slideUp = (el: HTMLElement, translateSize: string = '100%'): Animation => { return el.animate( [ - { transform: `translateY(-${translateSize})` }, // Starting position (no translation) + { transform: `translateY(${translateSize})` }, // Starting position (no translation) { transform: 'translateY(0)' }, // End position ], { @@ -16,11 +16,11 @@ export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animat ); }; -export const slideDown = (el: HTMLElement, translateSize: string = '8rem'): Animation => { +export const slideDown = (el: HTMLElement, translateSize: string = '100%'): Animation => { return el.animate( [ { transform: 'translateY(0)' }, // Starting position (no translation) - { transform: `translateY(-${translateSize})` }, // End position + { transform: `translateY(${translateSize})` }, // End position ], { duration: duration, diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.scss b/packages/components/src/components/post-back-to-top/post-back-to-top.scss index 38cd94b925..1f9231ddde 100644 --- a/packages/components/src/components/post-back-to-top/post-back-to-top.scss +++ b/packages/components/src/components/post-back-to-top/post-back-to-top.scss @@ -8,7 +8,7 @@ tokens.$default-map: components.$post-floating-button; :host { - --post-floating-button-translate-y: #{tokens.get('post-floating-button-translate-y')}; + --post-floating-button-translate-y: calc(-1 * #{tokens.get('post-floating-button-translate-y')}); position: fixed; top: tokens.get('post-floating-button-position-top'); right: tokens.get('post-floating-button-position-right'); diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx index f94dcf32a9..114de86b96 100644 --- a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx +++ b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx @@ -21,11 +21,11 @@ export class PostBackToTop { private translateY: string; - isBelowFold(): boolean { + private isBelowFold(): boolean { return window.scrollY > window.innerHeight; } - handleScroll = () => { + private handleScroll = () => { this.belowFold = this.isBelowFold(); }; @@ -39,7 +39,7 @@ export class PostBackToTop { } } - scrollToTop() { + private scrollToTop() { window.scrollTo({ top: 0, }); @@ -72,7 +72,7 @@ export class PostBackToTop { .getPropertyValue('--post-floating-button-translate-y'); if (!this.belowFold) { - this.el.style.transform = `translateY(-${this.translateY})`; + this.el.style.transform = `translateY(${this.translateY})`; } // Initial load diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.scss b/packages/components/src/components/post-togglebutton/post-togglebutton.scss index b73f35a5b6..88ee2219af 100644 --- a/packages/components/src/components/post-togglebutton/post-togglebutton.scss +++ b/packages/components/src/components/post-togglebutton/post-togglebutton.scss @@ -1,5 +1,20 @@ +@use '@swisspost/design-system-styles/mixins/utilities'; +@use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/tokens/helpers'; + :host { cursor: pointer; + outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important; + outline: tokens.get('focus-outline-color', helpers.$post-focus) none + tokens.get('focus-outline-width', helpers.$post-focus) !important; +} + +:host(:focus-visible) { + outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important; + + @include utilities.high-contrast-mode() { + outline-color: Highlight !important; + } } :host([aria-pressed="true"]) { diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx index b34c4f8282..b0eb329d9d 100644 --- a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx +++ b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx @@ -1,4 +1,4 @@ -import { Component, Host, h, Prop, Watch } from '@stencil/core'; +import { Component, Host, h, Prop, Watch, Element } from '@stencil/core'; import { version } from '@root/package.json'; import { checkType } from '@/utils'; @@ -12,6 +12,8 @@ import { checkType } from '@/utils'; shadow: true, }) export class PostTogglebutton { + @Element() host: HTMLPostTogglebuttonElement; + /** * If `true`, the button is in the "on" state, otherwise it is in the "off" state. */ @@ -28,6 +30,10 @@ export class PostTogglebutton { componentWillLoad() { this.validateToggled(); + + // add event listener to not override listener that might be set on the host + this.host.addEventListener('click', () => this.handleClick()); + this.host.addEventListener('keydown', (e: KeyboardEvent) => this.handleKeydown(e)); } private handleClick = () => { @@ -35,8 +41,10 @@ export class PostTogglebutton { }; private handleKeydown = (event: KeyboardEvent) => { - if (event.key === 'Enter') { - this.toggled = !this.toggled; + // perform a click when enter or spaced are pressed to mimic the button behavior + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); // prevents the page from scrolling when space is pressed + this.host.click(); } }; @@ -44,12 +52,10 @@ export class PostTogglebutton { return (