Merge branch 'main' into feature/button-refactor-styling

.changeset/chilly-cycles-crash.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/announcer': patch
+---
+
+Created Announcer component that can be used to send announcements to a central live-aria for screen readers to read it and notify users

.changeset/flat-guests-know.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/grid': patch
+---
+
+Fix timing bug where the column width was never calculated

.changeset/four-mice-report.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/tag': patch
+---
+
+Various improvements:
+- Add `tabindex="-1"` to remove button
+- Minor style fixes

.changeset/honest-candles-unite.md

@@ -0,0 +1,6 @@
+---
+'@sl-design-system/progress-bar': patch
+'@sl-design-system/paginator': patch
+---
+
+use new Announcer component

.changeset/shiny-ants-cover.md

@@ -0,0 +1,12 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+Various combobox fixes:
+- Add `aria-owns` for linking the input to the listbox
+- Add `aria-posinset` and `aria-setsize` to the listbox options for virtual lists
+- Add focus style to tags
+- Remove `aria-current` from the listbox options (invalid usage of the attribute)
+- Improve keyboard navigation between the input and the tags using the left/right arrow keys
+- Fix the listbox popover not having the correct size on WebKit
+- Fix VoiceOver not announcing any option navigation after the first/last selection

.changeset/unlucky-terms-pull.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/paginator': patch
+'@sl-design-system/grid': patch
+'@sl-design-system/menu': patch
+---
+
+Replace `--sl-color-text-default` with `--sl-color-text-plain`

.changeset/wise-carrots-bow.md

@@ -0,0 +1,18 @@
+---
+'@sl-design-system/button-bar': minor
+'@sl-design-system/dialog': minor
+---
+
+Refactor styling to use contextual tokens.
+
+This also removes the CSS custom properties for the responsive behavior. It now
+just sets the `flex-direction` and `align-items` directly from dialog.
+
+```css
+@media (width <= 600px) {
+  sl-button-bar {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+}
+```

.storybook/preview-head.html

@@ -5,3 +5,4 @@
     font: var(--sl-text-body-md-normal);
   }
 </style>
+<sl-announcer></sl-announcer>

.storybook/preview.ts

@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/web-components';
 import '@oddbird/popover-polyfill';
 import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
+import '@sl-design-system/announcer/register.js';
 import { configureLocalization } from '@lit/localize';
 import * as locales from '@sl-design-system/locales';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

packages/components/announcer/index.ts

@@ -0,0 +1,2 @@
+export * from './src/announce.js';
+export * from './src/announcer.js';

packages/components/announcer/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@sl-design-system/announcer",
+  "version": "0.0.0",
+  "description": "Announcer component for the SL Design System",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sl-design-system/components.git",
+    "directory": "packages/components/announcer"
+  },
+  "homepage": "https://sanomalearning.design/components/announcer",
+  "bugs": {
+    "url": "https://github.com/sl-design-system/components/issues"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json",
+    "./register.js": "./register.js"
+  },
+  "files": [
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "custom-elements.json"
+  ],
+  "sideEffects": [
+    "register.js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from monorepo root.\" && exit 1"
+  },
+  "dependencies": {
+    "@sl-design-system/shared": "^0.4.0"
+  },
+  "devDependencies": {
+    "@lit/localize": "^0.12.1",
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  },
+  "peerDependencies": {
+    "@lit/localize": "^0.12.1",
+    "@open-wc/scoped-elements": "^3.0.5",
+    "lit": "^3.1.4"
+  }
+}

packages/components/announcer/register.ts

@@ -0,0 +1,3 @@
+import { Announcer } from './src/announcer.js';
+
+customElements.define('sl-announcer', Announcer);

packages/components/announcer/src/announce.ts

@@ -0,0 +1,11 @@
+/** Sends a notification to the live aria.
+ * Please be aware that sending messages too soon after each other can cause the screenreader
+ * to stop reading the earlier messages, or even skip them, when a new message is sent.
+ * If you want to send multiple messages in a row, consider using a single message with all the information.
+ *
+ * @param message - The message to send to the live aria.
+ * @param urgency - The urgency of the message. Default is 'polite'.
+ */
+export function announce(message: string, urgency?: 'polite' | 'assertive'): void {
+  document.body.dispatchEvent(new CustomEvent('sl-announce', { detail: { message, urgency } }));
+}

packages/components/announcer/src/announcer.scss

@@ -0,0 +1,13 @@
+:host {
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+ul {
+  list-style-type: none;
+}

packages/components/announcer/src/announcer.spec.ts

@@ -0,0 +1,48 @@
+import { expect, fixture } from '@open-wc/testing';
+import { EventEmitter } from '@sl-design-system/shared';
+import { html } from 'lit';
+import '../register.js';
+import { Announcer, SlAnnounceEvent } from './announcer.js';
+
+describe('sl-announcer', () => {
+  let el: Announcer;
+
+  beforeEach(async () => {
+    el = await fixture(html`<sl-announcer></sl-announcer>`);
+  });
+
+  it('should render correctly', () => {
+    const containers = el.shadowRoot?.querySelectorAll('ul');
+    expect(containers?.length).to.equal(2);
+  });
+
+  it('should handle sl-announce event', () => {
+    const liveEvent = new EventEmitter<SlAnnounceEvent>(document.body, 'sl-announce');
+    liveEvent.emit({ message: 'This is sent with an event' });
+
+    const polite = el.shadowRoot?.querySelector('[aria-live="polite"]');
+
+    expect(polite?.textContent).to.equal('This is sent with an event');
+  });
+
+  it('should handle sl-announce event with urgency assertive', () => {
+    const liveEvent = new EventEmitter<SlAnnounceEvent>(document.body, 'sl-announce');
+    liveEvent.emit({ message: 'This is sent with an event', urgency: 'assertive' });
+
+    const polite = el.shadowRoot?.querySelector('[aria-live="assertive"]');
+
+    expect(polite?.textContent).to.equal('This is sent with an event');
+  });
+
+  it('should remove the announcement after 500 ms', async () => {
+    const liveEvent = new EventEmitter<SlAnnounceEvent>(document.body, 'sl-announce');
+    liveEvent.emit({ message: 'This is sent with an event' });
+
+    const polite = el.shadowRoot?.querySelector('[aria-live="polite"]');
+
+    expect(polite?.textContent).to.equal('This is sent with an event');
+
+    await new Promise(resolve => setTimeout(resolve, 600));
+    expect(polite?.textContent).to.equal('');
+  });
+});

packages/components/announcer/src/announcer.stories.ts

@@ -0,0 +1,37 @@
+import '@sl-design-system/button/register.js';
+import { EventEmitter } from '@sl-design-system/shared';
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import '../register.js';
+import { announce } from './announce.js';
+import { Announcer, SlAnnounceEvent } from './announcer.js';
+
+type Props = Announcer;
+type Story = StoryObj<Props>;
+
+let counter = 0;
+export default {
+  title: 'Utilities/Announcer',
+  tags: ['draft'],
+  args: {},
+  argTypes: {},
+  render: () => {
+    const sendWithEvent = (): void => {
+      const liveEvent = new EventEmitter<SlAnnounceEvent>(document.body, 'sl-announce');
+      liveEvent.emit({ message: `This is sent with an event ${counter++}` });
+    };
+    const sendWithFunction = (): void => {
+      announce(`This is sent with the API-function ${counter++}`, 'assertive');
+    };
+    return html`
+      <p>
+        The &lt;sl-announcer&gt;&lt;/sl-announcer&gt; is not in this file, it is in the template so there is only one
+        instance of it that all components can use.
+      </p>
+      <sl-button @click=${sendWithEvent}>Event, polite</sl-button>
+      <sl-button @click=${sendWithFunction}>Function, assertive</sl-button>
+    `;
+  }
+} satisfies Meta<Props>;
+
+export const Basic: Story = {};

packages/components/announcer/src/announcer.ts

@@ -0,0 +1,58 @@
+import { localized } from '@lit/localize';
+import { EventsController } from '@sl-design-system/shared';
+import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit';
+import styles from './announcer.scss.js';
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'sl-announce': SlAnnounceEvent;
+  }
+
+  interface HTMLElementTagNameMap {
+    'sl-announcer': Announcer;
+  }
+}
+
+export type SlAnnounceEvent = CustomEvent<{ message: string; urgency?: 'polite' | 'assertive' }>;
+
+/**
+ * Utility that serves as a receipient for all live-aria notifications and supplies them for screenreaders
+ * from a central place in your application.
+ *
+ * ```html
+ * <sl-live-aria></sl-live-aria>
+ * ```
+ */
+@localized()
+export class Announcer extends LitElement {
+  /** @internal */
+  static override styles: CSSResultGroup = styles;
+
+  #events = new EventsController(this, {});
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.#events.listen(document.body, 'sl-announce', this.#onLiveEvent);
+  }
+  override render(): TemplateResult {
+    return html`
+      <ul aria-live="polite" aria-atomic="false"></ul>
+      <ul aria-live="assertive" aria-atomic="false"></ul>
+    `;
+  }
+
+  #onLiveEvent(event: SlAnnounceEvent) {
+    const container = this.renderRoot.querySelector(`[aria-live="${event.detail.urgency || 'polite'}"]`);
+
+    // make sure the message is not already in the container
+    if (container?.textContent?.indexOf(event.detail.message) === -1) {
+      const messageNode = document.createElement('li');
+      messageNode.innerText = event.detail.message;
+
+      container?.appendChild(messageNode);
+      setTimeout(() => {
+        messageNode.remove();
+      }, 500);
+    }
+  }
+}

packages/components/announcer/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "./"
+  },
+  "include": ["index.ts", "register.ts", "src/**/*.ts"]
+}

packages/components/button-bar/src/button-bar.scss

@@ -1,46 +1,27 @@
 :host {
-  // TODO: remove this "hack" when style queries are possible.
-  --sl-ON: initial; // property gets fallback value
-  --sl-OFF: var(--sl-button-bar-direction-row);
-  --sl-button-bar-vertical: var(--sl-OFF);
-  --sl-button-bar-direction-row: row;
-  --sl-button-bar-align: start;
-  --sl-button-bar-align-items: center;
-  --_align: var(--sl-button-bar-align-items);
-  --_direction: var(--sl-button-bar-direction-row, row);
-  --_block-gap: var(--sl-space-button-bar-gap-default-block);
-  --_inline-gap: var(--sl-space-button-bar-gap-default-inline);
-
-  align-items: var(--_align);
+  align-items: center;
   display: flex;
-  flex-flow: var(--_direction) wrap;
-  gap: var(--_block-gap) var(--_inline-gap);
-  justify-content: var(--sl-button-bar-align);
-}
-
-:host(:not([icon-only])) {
-  --_align: var(--sl-button-bar-vertical, stretch);
-  --_direction: var(--sl-button-bar-vertical, var(--sl-button-bar-direction-column, column));
+  flex-flow: row wrap;
+  gap: var(--sl-space-100);
+  justify-content: start;
 }
 
 :host([align='center']) {
-  --sl-button-bar-align: center;
+  justify-content: center;
 }
 
 :host([align='end']) {
-  --sl-button-bar-align: end;
+  justify-content: end;
 }
 
 :host([align='space-between']) {
-  --sl-button-bar-align: space-between;
+  justify-content: space-between;
 }
 
 :host([icon-only]) {
-  --_inline-gap: var(--sl-space-button-bar-gap-ghost-icon-inline);
-  --_block-gap: var(--sl-space-button-bar-gap-ghost-icon-block);
+  gap: var(--sl-space-050);
 }
 
 :host([reverse]) {
-  --sl-button-bar-direction-row: row-reverse;
-  --sl-button-bar-direction-column: column-reverse;
+  flex-direction: row-reverse;
 }