diff --git a/package.json b/package.json index 5c37848609..4e81e0d01b 100644 --- a/package.json +++ b/package.json @@ -84,8 +84,8 @@ "@types/node": "20.12.11", "@types/react": "18.3.2", "@types/react-dom": "18.3.0", - "@typescript-eslint/eslint-plugin": "7.8.0", - "@typescript-eslint/parser": "7.8.0", + "@typescript-eslint/eslint-plugin": "7.9.0", + "@typescript-eslint/parser": "7.9.0", "@web/test-runner": "0.18.2", "@web/test-runner-commands": "0.9.0", "@web/test-runner-playwright": "0.11.0", @@ -123,9 +123,9 @@ "stylelint-config-standard-scss": "13.1.0", "stylelint-scss": "6.3.0", "ts-lit-plugin": "2.0.2", - "tsx": "4.10.1", + "tsx": "4.10.2", "typescript": "5.4.5", - "typescript-eslint": "7.8.0", + "typescript-eslint": "7.9.0", "vite": "5.2.11", "vite-plugin-dts": "3.9.1" }, diff --git a/scripts/docs_generate.ts b/scripts/docs_generate.ts index 6297886f5b..24e29fae2b 100644 --- a/scripts/docs_generate.ts +++ b/scripts/docs_generate.ts @@ -5,7 +5,12 @@ import fs from 'fs'; import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown'; -import type { Attribute, CustomElement, Package } from 'custom-elements-manifest/schema'; +import type { + Attribute, + ClassDeclaration, + CustomElement, + Package, +} from 'custom-elements-manifest/schema'; import * as glob from 'glob'; // eslint-disable-next-line @typescript-eslint/naming-convention import MagicString from 'magic-string'; @@ -125,6 +130,26 @@ async function updateComponentReadme( } const manifest: Package = JSON.parse(fs.readFileSync(manifestFilePath, 'utf-8')); + +type ExtendedClassDeclaration = ClassDeclaration & { + cssProperties: { name: string }[]; + events: { name: string }[]; + members: { name: string }[]; + slots: { name: string }[]; +}; + +manifest.modules.forEach((module) => { + module.declarations + ?.filter((declaration): declaration is ExtendedClassDeclaration => declaration.kind === 'class') + .forEach((declaration) => + ['members', 'slots', 'cssProperties', 'events'].forEach((type) => + (declaration[type as keyof ExtendedClassDeclaration] as { name: string }[])?.sort((a, b) => + a.name.localeCompare(b.name), + ), + ), + ); +}); + const markdown: string = customElementsManifestToMarkdown(manifest, { headingOffset: -1, // Default heading is '###' private: 'details', // We use 'details' because it's the only way to remove 'protected' members from the tables. We remove details section later. diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md index fc18e8f4d8..2176d3cb03 100644 --- a/src/components/accordion/readme.md +++ b/src/components/accordion/readme.md @@ -52,9 +52,9 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | | `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. | | `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. ` | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | ## Slots diff --git a/src/components/action-group/__snapshots__/action-group.spec.snap.js b/src/components/action-group/__snapshots__/action-group.spec.snap.js index b20e5791f8..14aa4f73ff 100644 --- a/src/components/action-group/__snapshots__/action-group.spec.snap.js +++ b/src/components/action-group/__snapshots__/action-group.spec.snap.js @@ -30,9 +30,7 @@ snapshots["sbb-action-group renders renders - Dom"] = href="https://github.com/lyne-design-system/lyne-components" icon-name="chevron-small-left-small" icon-placement="start" - role="link" size="m" - tabindex="0" > Link @@ -60,13 +58,7 @@ snapshots["sbb-action-group renders A11y tree Chrome"] = }, { "role": "link", - "name": "Link", - "children": [ - { - "role": "link", - "name": "Link" - } - ] + "name": "Link" } ] } @@ -87,13 +79,7 @@ snapshots["sbb-action-group renders A11y tree Firefox"] = { "role": "link", "name": "Link", - "children": [ - { - "role": "link", - "name": "Link", - "value": "https://github.com/lyne-design-system/lyne-components" - } - ] + "value": "https://github.com/lyne-design-system/lyne-components" } ] } diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md index 5d4946f875..53bec0cf50 100644 --- a/src/components/action-group/readme.md +++ b/src/components/action-group/readme.md @@ -123,10 +123,10 @@ The values for `align-group` and `align-self` for the various allocations are as | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | | `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | | `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js index 6bd037fc8f..99952b64a1 100644 --- a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js +++ b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js @@ -55,13 +55,7 @@ snapshots["sbb-alert-group should render A11y tree Chrome"] = }, { "role": "link", - "name": "Find out more", - "children": [ - { - "role": "link", - "name": "Find out more" - } - ] + "name": "Find out more" }, { "role": "button", @@ -96,13 +90,7 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] = { "role": "link", "name": "Find out more", - "children": [ - { - "role": "link", - "name": "Find out more", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" }, { "role": "button", diff --git a/src/components/alert/alert-group/readme.md b/src/components/alert/alert-group/readme.md index 298bb22cc2..85e1e9d2d3 100644 --- a/src/components/alert/alert-group/readme.md +++ b/src/components/alert/alert-group/readme.md @@ -45,9 +45,9 @@ and therefore interrupts screen reader flow, to immediately read out the alert c | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. | | `accessibilityTitle` | `accessibility-title` | public | `string \| undefined` | | Title for this alert group which is only visible for screen reader users. | | `accessibilityTitleLevel` | `accessibility-title-level` | public | `SbbTitleLevel` | `'2'` | Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. | +| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. | ## Events diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js index 16e243cb5a..4777002ef5 100644 --- a/src/components/alert/alert/__snapshots__/alert.spec.snap.js +++ b/src/components/alert/alert/__snapshots__/alert.spec.snap.js @@ -97,7 +97,7 @@ snapshots["sbb-alert should render customized properties"] =

Show much more @@ -161,13 +159,7 @@ snapshots["sbb-alert A11y tree Chrome"] = }, { "role": "link", - "name": "test-a11y-label", - "children": [ - { - "role": "link", - "name": "Find out more" - } - ] + "name": "test-a11y-label" }, { "role": "button", @@ -197,13 +189,7 @@ snapshots["sbb-alert A11y tree Firefox"] = { "role": "link", "name": "test-a11y-label", - "children": [ - { - "role": "link", - "name": "Find out more", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" }, { "role": "button", diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts index 4d9f842c84..3ac77d23b9 100644 --- a/src/components/alert/alert/alert.ts +++ b/src/components/alert/alert/alert.ts @@ -151,7 +151,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {

${this.href ? html` ` | Emits when the fade in animation starts. | | | `didOpen` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | | `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | ## Slots diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md index bc60f7e5af..f5c190da5b 100644 --- a/src/components/autocomplete/readme.md +++ b/src/components/autocomplete/readme.md @@ -99,28 +99,28 @@ using `aria-activedescendant` to support navigation though the autocomplete opti | Name | Attribute | Privacy | Type | Default | Description | | ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor. | -| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. | -| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. | | `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. | +| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. | +| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. | | `triggerElement` | - | public | `HTMLInputElement \| undefined` | | Returns the trigger element. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ------------------------ | ---------- | ------ | -------------- | -| `open` | public | Opens the autocomplete. | | `void` | | | `close` | public | Closes the autocomplete. | | `void` | | +| `open` | public | Opens the autocomplete. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ------------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js index e8d5541566..2f8b77c368 100644 --- a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js +++ b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js @@ -12,9 +12,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] = dir="ltr" href="https://example.com" icon-name="pie-small" - role="link" slot="li-0" - tabindex="0" > One @@ -34,9 +30,7 @@ snapshots["sbb-breadcrumb-group renders - Dom"] = data-link="" dir="ltr" href="https://example.com/one" - role="link" slot="li-2" - tabindex="0" > Two @@ -90,33 +84,15 @@ snapshots["sbb-breadcrumb-group A11y tree Chrome"] = "children": [ { "role": "link", - "name": "", - "children": [ - { - "role": "link", - "name": "" - } - ] + "name": "" }, { "role": "link", - "name": "One", - "children": [ - { - "role": "link", - "name": "One" - } - ] + "name": "One" }, { "role": "link", - "name": "Two", - "children": [ - { - "role": "link", - "name": "Two" - } - ] + "name": "Two" } ] } @@ -133,35 +109,17 @@ snapshots["sbb-breadcrumb-group A11y tree Firefox"] = { "role": "link", "name": "", - "children": [ - { - "role": "link", - "name": "", - "value": "https://example.com/" - } - ] + "value": "https://example.com/" }, { "role": "link", "name": "One", - "children": [ - { - "role": "link", - "name": "One", - "value": "https://example.com/one" - } - ] + "value": "https://example.com/one" }, { "role": "link", "name": "Two", - "children": [ - { - "role": "link", - "name": "Two", - "value": "https://example.com/one" - } - ] + "value": "https://example.com/one" } ] } diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js index 08c17da30a..dfd92886a5 100644 --- a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js +++ b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js @@ -7,8 +7,6 @@ snapshots["sbb-breadcrumb renders with text"] = download="" href="https://example.com/test" rel="subsection" - role="presentation" - tabindex="-1" target="_blank" > @@ -28,8 +26,6 @@ snapshots["sbb-breadcrumb renders with icon"] = ` { expect(root).dom.to.be.equal(` { expect(root).dom.to.be.equal(` { expect(root).dom.to.be.equal(` Home diff --git a/src/components/breadcrumb/breadcrumb/readme.md b/src/components/breadcrumb/breadcrumb/readme.md index 3c7f2a9cb1..5b940d3294 100644 --- a/src/components/breadcrumb/breadcrumb/readme.md +++ b/src/components/breadcrumb/breadcrumb/readme.md @@ -39,13 +39,14 @@ By default, the `sbb-breadcrumb-group` component sets `aria-current="page"` on t ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/button-link/__snapshots__/button-link.spec.snap.js b/src/components/button/button-link/__snapshots__/button-link.spec.snap.js index 1fe04e9fa9..99910f2d32 100644 --- a/src/components/button/button-link/__snapshots__/button-link.spec.snap.js +++ b/src/components/button/button-link/__snapshots__/button-link.spec.snap.js @@ -11,9 +11,7 @@ snapshots["sbb-button-link renders a sbb-button-link without icon Dom"] = download="" href="https://www.sbb.ch" rel="noopener" - role="link" size="m" - tabindex="0" target="_blank" > Label Text @@ -27,8 +25,6 @@ snapshots["sbb-button-link renders a sbb-button-link without icon ShadowDom"] = download="" href="https://www.sbb.ch" rel="noopener" - role="presentation" - tabindex="-1" target="_blank" > @@ -52,13 +48,7 @@ snapshots["sbb-button-link renders a sbb-button-link without icon A11y tree Chro "children": [ { "role": "link", - "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window." - } - ] + "name": "Label Text . Link target opens in a new window." } ] } @@ -68,7 +58,6 @@ snapshots["sbb-button-link renders a sbb-button-link without icon A11y tree Chro snapshots["sbb-button-link renders a disabled sbb-button-link with slotted icon Dom"] = ` @@ -118,13 +106,7 @@ snapshots["sbb-button-link renders a sbb-button-link without icon A11y tree Fire { "role": "link", "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/button/button-link/button-link.ts b/src/components/button/button-link/button-link.ts index cc434a29fe..37a1b5d487 100644 --- a/src/components/button/button-link/button-link.ts +++ b/src/components/button/button-link/button-link.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup } from 'lit'; import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } from '../common.js'; /** @@ -13,7 +13,7 @@ import { buttonCommonStyle, buttonPrimaryStyle, SbbButtonCommonElementMixin } fr */ @customElement('sbb-button-link') export class SbbButtonLinkElement extends SbbButtonCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) { public static override styles: CSSResultGroup = [buttonCommonStyle, buttonPrimaryStyle]; } diff --git a/src/components/button/button-link/readme.md b/src/components/button/button-link/readme.md index e5fc472656..b53c3f0fdd 100644 --- a/src/components/button/button-link/readme.md +++ b/src/components/button/button-link/readme.md @@ -22,7 +22,7 @@ At least one is mandatory, so you can have a `sbb-button-link` with icon only, t ``` @@ -72,16 +72,17 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/button-static/readme.md b/src/components/button/button-static/readme.md index 4afa9b7daa..ae08037ffe 100644 --- a/src/components/button/button-static/readme.md +++ b/src/components/button/button-static/readme.md @@ -59,10 +59,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/button/readme.md b/src/components/button/button/readme.md index b991395360..07d5768ef8 100644 --- a/src/components/button/button/readme.md +++ b/src/components/button/button/readme.md @@ -68,14 +68,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/common/button-common-stories.ts b/src/components/button/common/button-common-stories.ts index 09a0d56b14..8c4bb9cb75 100644 --- a/src/components/button/common/button-common-stories.ts +++ b/src/components/button/common/button-common-stories.ts @@ -66,6 +66,12 @@ const form: InputType = { }, }; +const ariaLabel: InputType = { + control: { + type: 'text', + }, +}; + export const buttonDefaultArgTypes: ArgTypes = { ...commonDefaultArgTypes, type, @@ -73,6 +79,7 @@ export const buttonDefaultArgTypes: ArgTypes = { name, value, form, + 'aria-label': ariaLabel, }; export const buttonDefaultArgs: Args = { @@ -82,6 +89,7 @@ export const buttonDefaultArgs: Args = { name: 'Button Name', value: undefined, form: undefined, + 'aria-label': undefined, }; export const requestSubmit: StoryObj = { diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss index 7492646833..6f04586e62 100644 --- a/src/components/button/common/button-common.scss +++ b/src/components/button/common/button-common.scss @@ -140,6 +140,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= color: var(--sbb-button-color-default-text); cursor: pointer; user-select: none; + outline: none; // Renders background and border in the background absolute to enable the hover animation &::before { @@ -159,17 +160,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= border-color: var(--sbb-button-color-disabled-border); } - // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host( - :is( - [data-focus-visible], - :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch']) - ) - ) - & { - @include sbb.focus-outline; - } - :host(:not([disabled], :active, [data-active]):hover) & { @include sbb.hover-mq($hover: true) { inset: calc(var(--sbb-button-border-width) * -1); @@ -202,6 +192,19 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~= color: var(--sbb-button-color-hover-text); } } + + /* stylelint-disable no-descending-specificity */ + :host([data-focus-visible]) &, + // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &, + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { + &::before { + @include sbb.focus-outline; + } + } + /* stylelint-enable no-descending-specificity */ } .sbb-button__label, diff --git a/src/components/button/common/button-link-common-stories.ts b/src/components/button/common/button-link-common-stories.ts index 811960b338..69dbc86b09 100644 --- a/src/components/button/common/button-link-common-stories.ts +++ b/src/components/button/common/button-link-common-stories.ts @@ -55,6 +55,12 @@ const disabled: InputType = { }, }; +const accessibilityLabel: InputType = { + control: { + type: 'text', + }, +}; + export const buttonLinkDefaultArgTypes: ArgTypes = { ...commonDefaultArgTypes, href, @@ -62,6 +68,7 @@ export const buttonLinkDefaultArgTypes: ArgTypes = { rel, download, disabled, + 'accessibility-label': accessibilityLabel, }; export const buttonLinkDefaultArgs: Args = { @@ -71,4 +78,5 @@ export const buttonLinkDefaultArgs: Args = { rel: 'noopener', download: false, disabled: false, + 'accessibility-label': undefined, }; diff --git a/src/components/button/common/common-stories.ts b/src/components/button/common/common-stories.ts index dc7cbe0015..45bf52f00d 100644 --- a/src/components/button/common/common-stories.ts +++ b/src/components/button/common/common-stories.ts @@ -96,12 +96,6 @@ const iconName: InputType = { }, }; -const ariaLabel: InputType = { - control: { - type: 'text', - }, -}; - const tag: InputType = { control: { type: 'text', @@ -117,7 +111,6 @@ export const commonDefaultArgTypes: ArgTypes = { negative, size, 'icon-name': iconName, - 'aria-label': ariaLabel, }; export const commonDefaultArgs: Args = { @@ -126,7 +119,6 @@ export const commonDefaultArgs: Args = { negative: false, size: size.options![0], 'icon-name': 'arrow-right-small', - 'aria-label': undefined, }; export const primary: StoryObj = { diff --git a/src/components/button/mini-button/readme.md b/src/components/button/mini-button/readme.md index 4d01e60bc5..399bc96817 100644 --- a/src/components/button/mini-button/readme.md +++ b/src/components/button/mini-button/readme.md @@ -76,13 +76,13 @@ Use the accessibility properties to describe the purpose of the `sbb-mini-button | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js b/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js index de586909b4..e03596b670 100644 --- a/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js +++ b/src/components/button/secondary-button-link/__snapshots__/secondary-button-link.spec.snap.js @@ -11,9 +11,7 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without download="" href="https://www.sbb.ch" rel="noopener" - role="link" size="m" - tabindex="0" target="_blank" > Label Text @@ -27,8 +25,6 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without download="" href="https://www.sbb.ch" rel="noopener" - role="presentation" - tabindex="-1" target="_blank" > @@ -52,13 +48,7 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without "children": [ { "role": "link", - "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window." - } - ] + "name": "Label Text . Link target opens in a new window." } ] } @@ -68,7 +58,6 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without snapshots["sbb-secondary-button-link renders a disabled sbb-secondary-button-link with slotted icon Dom"] = ` @@ -118,13 +106,7 @@ snapshots["sbb-secondary-button-link renders a sbb-secondary-button-link without { "role": "link", "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/button/secondary-button-link/readme.md b/src/components/button/secondary-button-link/readme.md index e74bfe2e60..eff16b9d81 100644 --- a/src/components/button/secondary-button-link/readme.md +++ b/src/components/button/secondary-button-link/readme.md @@ -24,7 +24,7 @@ At least one is mandatory, so you can have a `sbb-secondary-button-link` with ic ``` @@ -77,16 +77,17 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/secondary-button-link/secondary-button-link.ts b/src/components/button/secondary-button-link/secondary-button-link.ts index f9cd60eec4..a6db60cfbc 100644 --- a/src/components/button/secondary-button-link/secondary-button-link.ts +++ b/src/components/button/secondary-button-link/secondary-button-link.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup } from 'lit'; import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } from '../common.js'; /** @@ -13,7 +13,7 @@ import { buttonCommonStyle, buttonSecondaryStyle, SbbButtonCommonElementMixin } */ @customElement('sbb-secondary-button-link') export class SbbSecondaryButtonLinkElement extends SbbButtonCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) { public static override styles: CSSResultGroup = [buttonCommonStyle, buttonSecondaryStyle]; } diff --git a/src/components/button/secondary-button-static/readme.md b/src/components/button/secondary-button-static/readme.md index 6221f504de..17d1919cf9 100644 --- a/src/components/button/secondary-button-static/readme.md +++ b/src/components/button/secondary-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/secondary-button/readme.md b/src/components/button/secondary-button/readme.md index 4d9dbb6a64..19fe5ecfd9 100644 --- a/src/components/button/secondary-button/readme.md +++ b/src/components/button/secondary-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js b/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js index 18fc01e439..b4fa2f42a5 100644 --- a/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js +++ b/src/components/button/tertiary-button-link/__snapshots__/tertiary-button-link.spec.snap.js @@ -11,9 +11,7 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i download="" href="https://www.sbb.ch" rel="noopener" - role="link" size="m" - tabindex="0" target="_blank" > Label Text @@ -27,8 +25,6 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i download="" href="https://www.sbb.ch" rel="noopener" - role="presentation" - tabindex="-1" target="_blank" > @@ -52,13 +48,7 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i "children": [ { "role": "link", - "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window." - } - ] + "name": "Label Text . Link target opens in a new window." } ] } @@ -68,7 +58,6 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i snapshots["sbb-tertiary-button-link renders a disabled sbb-tertiary-button-link with slotted icon Dom"] = ` @@ -118,13 +106,7 @@ snapshots["sbb-tertiary-button-link renders a sbb-tertiary-button-link without i { "role": "link", "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/button/tertiary-button-link/readme.md b/src/components/button/tertiary-button-link/readme.md index b5b668263c..de9e6faecb 100644 --- a/src/components/button/tertiary-button-link/readme.md +++ b/src/components/button/tertiary-button-link/readme.md @@ -24,7 +24,7 @@ At least one is mandatory, so you can have a `sbb-tertiary-button-link` with ico ``` @@ -77,16 +77,17 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/tertiary-button-link/tertiary-button-link.ts b/src/components/button/tertiary-button-link/tertiary-button-link.ts index 114dfe6881..1cfc6d810a 100644 --- a/src/components/button/tertiary-button-link/tertiary-button-link.ts +++ b/src/components/button/tertiary-button-link/tertiary-button-link.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup } from 'lit'; import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } from '../common.js'; /** @@ -13,7 +13,7 @@ import { buttonCommonStyle, buttonTertiaryStyle, SbbButtonCommonElementMixin } f */ @customElement('sbb-tertiary-button-link') export class SbbTertiaryButtonLinkElement extends SbbButtonCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) { public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTertiaryStyle]; } diff --git a/src/components/button/tertiary-button-static/readme.md b/src/components/button/tertiary-button-static/readme.md index 492e7d013f..3154833eea 100644 --- a/src/components/button/tertiary-button-static/readme.md +++ b/src/components/button/tertiary-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/tertiary-button/readme.md b/src/components/button/tertiary-button/readme.md index 2c7a19c0b5..a887ea0d7e 100644 --- a/src/components/button/tertiary-button/readme.md +++ b/src/components/button/tertiary-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js b/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js index 3665721fc5..155f424291 100644 --- a/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js +++ b/src/components/button/transparent-button-link/__snapshots__/transparent-button-link.spec.snap.js @@ -11,9 +11,7 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit download="" href="https://www.sbb.ch" rel="noopener" - role="link" size="m" - tabindex="0" target="_blank" > Label Text @@ -27,8 +25,6 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit download="" href="https://www.sbb.ch" rel="noopener" - role="presentation" - tabindex="-1" target="_blank" > @@ -52,13 +48,7 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit "children": [ { "role": "link", - "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window." - } - ] + "name": "Label Text . Link target opens in a new window." } ] } @@ -68,7 +58,6 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit snapshots["sbb-transparent-button-link renders a disabled sbb-transparent-button-link with slotted icon Dom"] = ` @@ -118,13 +106,7 @@ snapshots["sbb-transparent-button-link renders a sbb-transparent-button-link wit { "role": "link", "name": "Label Text . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Label Text . Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/button/transparent-button-link/readme.md b/src/components/button/transparent-button-link/readme.md index b43e4140f0..fbc8983aac 100644 --- a/src/components/button/transparent-button-link/readme.md +++ b/src/components/button/transparent-button-link/readme.md @@ -24,7 +24,7 @@ At least one is mandatory, so you can have a `sbb-transparent-button-link` with ``` @@ -77,16 +77,17 @@ Use the accessibility properties in case of an icon-only button to describe the ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/transparent-button-link/transparent-button-link.ts b/src/components/button/transparent-button-link/transparent-button-link.ts index 06f22a5a24..ff9322b9a6 100644 --- a/src/components/button/transparent-button-link/transparent-button-link.ts +++ b/src/components/button/transparent-button-link/transparent-button-link.ts @@ -2,7 +2,7 @@ import type { CSSResultGroup } from 'lit'; import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { buttonCommonStyle, buttonTransparentStyle, @@ -17,7 +17,7 @@ import { */ @customElement('sbb-transparent-button-link') export class SbbTransparentButtonLinkElement extends SbbButtonCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) { public static override styles: CSSResultGroup = [buttonCommonStyle, buttonTransparentStyle]; } diff --git a/src/components/button/transparent-button-static/readme.md b/src/components/button/transparent-button-static/readme.md index 1df3375314..c0f2964c1e 100644 --- a/src/components/button/transparent-button-static/readme.md +++ b/src/components/button/transparent-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/transparent-button/readme.md b/src/components/button/transparent-button/readme.md index 556ae617c2..0cfa743e4f 100644 --- a/src/components/button/transparent-button/readme.md +++ b/src/components/button/transparent-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md index 92ef3cd12f..cb5b981359 100644 --- a/src/components/calendar/readme.md +++ b/src/components/calendar/readme.md @@ -66,11 +66,11 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | -| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | | `max` | `max` | public | `T \| null` | | The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | `selected` | `selected` | public | `T \| null` | | The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | -| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | ## Methods diff --git a/src/components/card/card-button/card-button.ts b/src/components/card/card-button/card-button.ts index a9746d5b16..fdaab1a5a1 100644 --- a/src/components/card/card-button/card-button.ts +++ b/src/components/card/card-button/card-button.ts @@ -10,7 +10,9 @@ import { SbbCardActionCommonElementMixin } from '../common.js'; * This is relevant for SEO and screen readers. */ @customElement('sbb-card-button') -export class SbbCardButtonElement extends SbbCardActionCommonElementMixin(SbbButtonBaseElement) {} +export class SbbCardButtonElement extends SbbCardActionCommonElementMixin(SbbButtonBaseElement) { + protected override actionRole: 'link' | 'button' = 'button'; +} declare global { interface HTMLElementTagNameMap { diff --git a/src/components/card/card-button/readme.md b/src/components/card/card-button/readme.md index 60fcb55553..dd6c18e365 100644 --- a/src/components/card/card-button/readme.md +++ b/src/components/card/card-button/readme.md @@ -25,10 +25,10 @@ as it is used for search engines and screen-reader users. | Name | Attribute | Privacy | Type | Default | Description | | -------- | --------- | ------- | --------------------- | ---------- | ------------------------------------------------ | | `active` | `active` | public | `boolean` | `false` | Whether the card is active. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js b/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js index 050528796f..f838a0d078 100644 --- a/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js +++ b/src/components/card/card-link/__snapshots__/card-link.e2e.snap.js @@ -6,8 +6,6 @@ snapshots["sbb-card-link with csrFixture should render an sbb-card-link as a lin class="sbb-action-base sbb-card-link" href="https://github.com/lyne-design-system/lyne-components" rel="external noopener nofollow" - role="presentation" - tabindex="-1" target="_blank" > diff --git a/src/components/card/card-link/card-link.e2e.ts b/src/components/card/card-link/card-link.e2e.ts index 1453216785..c0340281d4 100644 --- a/src/components/card/card-link/card-link.e2e.ts +++ b/src/components/card/card-link/card-link.e2e.ts @@ -40,9 +40,7 @@ describe(`sbb-card-link with ${fixture.name}`, () => { diff --git a/src/components/card/card-link/card-link.ts b/src/components/card/card-link/card-link.ts index fe5a221ec7..b248c99d46 100644 --- a/src/components/card/card-link/card-link.ts +++ b/src/components/card/card-link/card-link.ts @@ -10,7 +10,9 @@ import { SbbCardActionCommonElementMixin } from '../common.js'; * This is relevant for SEO and screen readers. */ @customElement('sbb-card-link') -export class SbbCardLinkElement extends SbbCardActionCommonElementMixin(SbbLinkBaseElement) {} +export class SbbCardLinkElement extends SbbCardActionCommonElementMixin(SbbLinkBaseElement) { + protected override actionRole: 'link' | 'button' = 'link'; +} declare global { interface HTMLElementTagNameMap { diff --git a/src/components/card/card-link/readme.md b/src/components/card/card-link/readme.md index bbf2e2a780..41657b5fe9 100644 --- a/src/components/card/card-link/readme.md +++ b/src/components/card/card-link/readme.md @@ -22,13 +22,14 @@ as it is used for search engines and screen-reader users. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | -| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/card/card/readme.md b/src/components/card/card/readme.md index 90c28f933c..aabbad4ed7 100644 --- a/src/components/card/card/readme.md +++ b/src/components/card/card/readme.md @@ -88,13 +88,13 @@ To improve coloring, it's needed to manually define styles for Window high contr | Name | Attribute | Privacy | Type | Default | Description | | ------- | --------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------------------------------------------------- | -| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | | `color` | `color` | public | `\| 'white' \| 'milk' \| 'transparent-bordered' \| 'transparent-bordered-dashed'` | `'white'` | Option to set the component's background color. | +| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | ## Slots | Name | Description | | -------- | --------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the card. | -| `badge` | Use this slot to render a `sbb-card-badge` component. | | `action` | Use this slot to render a `sbb-card-button` or a `sbb-card-link` component. | +| `badge` | Use this slot to render a `sbb-card-badge` component. | diff --git a/src/components/card/common/card-action-common.ts b/src/components/card/common/card-action-common.ts index d587e27f3c..5cdc1d4633 100644 --- a/src/components/card/common/card-action-common.ts +++ b/src/components/card/common/card-action-common.ts @@ -15,6 +15,7 @@ import '../../screen-reader-only.js'; export declare class SbbCardActionCommonElementMixinType { public active: boolean; + protected actionRole: 'link' | 'button'; } // eslint-disable-next-line @typescript-eslint/naming-convention @@ -43,6 +44,8 @@ export const SbbCardActionCommonElementMixin = < } private _active: boolean = false; + protected abstract actionRole: 'link' | 'button'; + private _card: SbbCardElement | null = null; private _cardMutationObserver = new AgnosticMutationObserver(() => this._checkForSlottedActions(), @@ -73,7 +76,7 @@ export const SbbCardActionCommonElementMixin = < if (this._card) { this._card.toggleAttribute('data-has-action', true); this._card.toggleAttribute('data-has-active-action', this.active); - this._card.setAttribute('data-action-role', this.getAttribute('role')!); + this._card.setAttribute('data-action-role', this.actionRole); this._checkForSlottedActions(); this._cardMutationObserver.observe(this._card, { diff --git a/src/components/card/common/card-action.scss b/src/components/card/common/card-action.scss index bc9da7d11a..a7ab3fb8ca 100644 --- a/src/components/card/common/card-action.scss +++ b/src/components/card/common/card-action.scss @@ -19,9 +19,13 @@ inset: 0; border-radius: var(--sbb-card-border-radius); cursor: pointer; + outline: none; // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &, + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; } } diff --git a/src/components/checkbox/checkbox-group/readme.md b/src/components/checkbox/checkbox-group/readme.md index af5fe0ed24..1203f50112 100644 --- a/src/components/checkbox/checkbox-group/readme.md +++ b/src/components/checkbox/checkbox-group/readme.md @@ -75,12 +75,12 @@ Two values are available, `s` and `m`, which is the default | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | -------------------------------- | -------------- | ------------------------------------------------------------------------------ | -| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant, either m or s. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | | `checkboxes` | - | public | `SbbCheckboxElement[]` | | List of contained checkbox elements. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant, either m or s. | ## Slots diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md index 9c45d680b9..4260d1478f 100644 --- a/src/components/checkbox/checkbox/readme.md +++ b/src/components/checkbox/checkbox/readme.md @@ -81,24 +81,24 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | | `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | | `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of internals target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `Event` | Event fired on change. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `input` | `InputEvent` | Event fired on input. | | ## Slots diff --git a/src/components/chip/readme.md b/src/components/chip/readme.md index eeec5e75f7..d128dcddc7 100644 --- a/src/components/chip/readme.md +++ b/src/components/chip/readme.md @@ -23,8 +23,8 @@ and four different values for the `color` property (`charcoal`, `granite`, `whit | Name | Attribute | Privacy | Type | Default | Description | | ------- | --------- | ------- | ---------------------------------------------- | -------- | ------------------ | -| `size` | `size` | public | `'xxs' \| 'xs' \| 's'` | `'xxs'` | Size of the chip. | | `color` | `color` | public | `'milk' \| 'charcoal' \| 'white' \| 'granite'` | `'milk'` | Color of the chip. | +| `size` | `size` | public | `'xxs' \| 'xs' \| 's'` | `'xxs'` | Size of the chip. | ## Slots diff --git a/src/components/container/container/readme.md b/src/components/container/container/readme.md index c95449a8c7..d4c78f6394 100644 --- a/src/components/container/container/readme.md +++ b/src/components/container/container/readme.md @@ -30,9 +30,9 @@ The component has also four color variants that can be set using the `color` pro | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | ------------------------------------ | --------- | ------------------------------------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | | `backgroundExpanded` | `background-expanded` | public | `boolean` | `false` | Whether the background color is shown on full container width on large screens. | | `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | ## Slots diff --git a/src/components/container/sticky-bar/readme.md b/src/components/container/sticky-bar/readme.md index 95894353f0..9423b17241 100644 --- a/src/components/container/sticky-bar/readme.md +++ b/src/components/container/sticky-bar/readme.md @@ -30,8 +30,8 @@ Optionally the user can set the `color` property on the `sbb-sticky-bar` in orde | Name | Default | Description | | -------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--sbb-sticky-bar-padding-block` | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar. | | `--sbb-sticky-bar-bottom-overlapping-height` | `0px` | Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow. | +| `--sbb-sticky-bar-padding-block` | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar. | | `--sbb-sticky-bar-z-index` | | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. | ## Slots diff --git a/src/components/core/base-elements/action-base-element.ts b/src/components/core/base-elements/action-base-element.ts index 2146fd139a..d8a8f073ff 100644 --- a/src/components/core/base-elements/action-base-element.ts +++ b/src/components/core/base-elements/action-base-element.ts @@ -18,12 +18,16 @@ type MaybeDisabled = { 'data-action': '', }) export abstract class SbbActionBaseElement extends LitElement { + protected get maybeDisabled(): boolean | undefined { + const maybeDisabled = this as MaybeDisabled; + return maybeDisabled.disabled || maybeDisabled.formDisabled; + } + protected setupBaseEventHandlers(): void { this.addEventListener( 'click', (event) => { - const maybeDisabled = this as MaybeDisabled; - if (maybeDisabled.disabled || maybeDisabled.formDisabled) { + if (this.maybeDisabled) { event.preventDefault(); event.stopImmediatePropagation(); } @@ -32,32 +36,6 @@ export abstract class SbbActionBaseElement extends LitElement { // in order to stop immediate propagation in the disabled case. { capture: true }, ); - this.addEventListener( - 'keypress', - (event: KeyboardEvent): void => { - if (event.key === 'Enter' || event.key === '\n') { - this.dispatchClickEvent(event); - } - }, - { passive: true }, - ); - } - - protected dispatchClickEvent(event: KeyboardEvent): void { - const { altKey, ctrlKey, metaKey, shiftKey } = event; - (event.target as Element).dispatchEvent( - new PointerEvent('click', { - bubbles: true, - cancelable: true, - composed: true, - pointerId: -1, - pointerType: '', - altKey, - ctrlKey, - metaKey, - shiftKey, - }), - ); } /** Override this method to render the component template. */ diff --git a/src/components/core/base-elements/button-base-element.ts b/src/components/core/base-elements/button-base-element.ts index 87a30d2056..05a1541d5e 100644 --- a/src/components/core/base-elements/button-base-element.ts +++ b/src/components/core/base-elements/button-base-element.ts @@ -86,10 +86,27 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement { private _dispatchClickEventOnSpaceKeyup = (event: KeyboardEvent): void => { if (event.key === ' ') { this._removeActiveMarker(event); - this.dispatchClickEvent(event); + this._dispatchClickEvent(event); } }; + private _dispatchClickEvent = (event: KeyboardEvent): void => { + const { altKey, ctrlKey, metaKey, shiftKey } = event; + (event.target as Element).dispatchEvent( + new PointerEvent('click', { + bubbles: true, + cancelable: true, + composed: true, + pointerId: -1, + pointerType: '', + altKey, + ctrlKey, + metaKey, + shiftKey, + }), + ); + }; + public constructor() { super(); if (!isServer) { @@ -100,6 +117,15 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement { this.addEventListener('keydown', this._preventScrollOnSpaceKeydown); this.addEventListener('keyup', this._dispatchClickEventOnSpaceKeyup, passiveOptions); this.addEventListener('blur', this._removeActiveMarker, passiveOptions); + this.addEventListener( + 'keypress', + (event: KeyboardEvent): void => { + if (event.key === 'Enter' || event.key === '\n') { + this._dispatchClickEvent(event); + } + }, + passiveOptions, + ); } } } diff --git a/src/components/core/base-elements/link-base-element.e2e.ts b/src/components/core/base-elements/link-base-element.e2e.ts index fe51d7564d..ada8fb32ac 100644 --- a/src/components/core/base-elements/link-base-element.e2e.ts +++ b/src/components/core/base-elements/link-base-element.e2e.ts @@ -21,7 +21,7 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => { let element: GenericLink; beforeEach(async () => { - element = await fixture(html``); + element = await fixture(html``); }); it('renders', async () => { @@ -30,8 +30,6 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => { it('check host attributes and content', () => { expect(element.getAttribute('dir')).to.be.equal('ltr'); - expect(element.getAttribute('role')).to.be.equal('link'); - expect(element.getAttribute('tabindex')).to.be.equal('0'); expect(element.shadowRoot!.firstElementChild!.classList.contains('generic-link')).to.be.true; expect(element.shadowRoot!.textContent!.trim()).to.be.equal('Link'); }); @@ -41,7 +39,7 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => { let element: GenericLink; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html``); }); it('no click dispatch if disabled', async () => { @@ -54,8 +52,6 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => { }); it('dispatch event', async () => { - element.href = '#'; - await waitForLitRender(element); const clickSpy = new EventSpy('click'); element.click(); await waitForLitRender(element); @@ -63,9 +59,8 @@ describe(`SbbLinkBaseElement with ${fixture.name}`, () => { }); it('enter keydown', async () => { - element.focus(); - await waitForLitRender(element); const clickSpy = new EventSpy('click'); + element.focus(); await sendKeys({ down: 'Enter' }); await waitForLitRender(element); diff --git a/src/components/core/base-elements/link-base-element.ts b/src/components/core/base-elements/link-base-element.ts index c8e60ff5bf..baaf479936 100644 --- a/src/components/core/base-elements/link-base-element.ts +++ b/src/components/core/base-elements/link-base-element.ts @@ -4,7 +4,6 @@ import { property } from 'lit/decorators.js'; import { SbbLanguageController } from '../controllers.js'; import { hostAttributes } from '../decorators.js'; import { getLocalName } from '../dom.js'; -import { isEventPrevented } from '../eventing.js'; import { i18nTargetOpensInNewWindow } from '../i18n.js'; import { SbbActionBaseElement } from './action-base-element.js'; @@ -16,8 +15,6 @@ export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top'; /** Link base class. */ @hostAttributes({ - role: 'link', - tabindex: '0', 'data-link': '', }) export abstract class SbbLinkBaseElement extends SbbActionBaseElement { @@ -33,48 +30,31 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement { /** Whether the browser will show the download dialog on click. */ @property({ type: Boolean }) public download?: boolean; + /** This will be forwarded as aria-label to the inner anchor element. */ + @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined; + protected language = new SbbLanguageController(this); public constructor() { super(); if (!isServer) { this.setupBaseEventHandlers(); - this.addEventListener('click', this._triggerAnchorWhenNecessary); } } - /** - * Trigger an anchor element click after the event has finished the bubbling phase and - * preventDefault() has not been called for the event. - */ - private async _triggerAnchorWhenNecessary(event: MouseEvent): Promise { - const target = event.target as Element; - const composedTarget = event.composedPath()[0] as Element; - // We only want to trigger a click event on the inner anchor element, if the host element is the - // event origin, which means the inner anchor element has not actually been activated/clicked. - if ( - !this.href || - !target.localName.startsWith('sbb-') || - target !== composedTarget || - (await isEventPrevented(event)) - ) { - return; - } + /** @internal */ + public override focus(options?: FocusOptions | undefined): void { + this.shadowRoot!.querySelector('a')?.focus(options); + } + + /** @internal */ + public override blur(): void { + this.shadowRoot!.querySelector('a')?.blur(); + } - // We are using dispatchEvent here, instead of just .click() in order to - // prevent another click event from bubbling up the DOM tree. - // TODO: The CTRL case does not work exactly the same as with a use interaction PointerEvent - // as the newly created tab immediately receives focus, instead of remaining on the current page. - const { altKey, ctrlKey, metaKey, shiftKey } = event; - target.shadowRoot?.querySelector('a')?.dispatchEvent( - // We need to use a MouseEvent here, as PointerEvent does not work on Firefox. - new MouseEvent('click', { - altKey, - ctrlKey, - metaKey, - shiftKey, - }), - ); + /** @internal */ + public override click(): void { + this.shadowRoot!.querySelector('a')?.click(); } private _evaluateRelAttribute = (): string | typeof nothing => { @@ -86,12 +66,13 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement { return html` ${this.renderTemplate()} ${!!this.href && this.target === '_blank' diff --git a/src/components/datepicker/datepicker-next-day/readme.md b/src/components/datepicker/datepicker-next-day/readme.md index 9e13d556a5..3424157db0 100644 --- a/src/components/datepicker/datepicker-next-day/readme.md +++ b/src/components/datepicker/datepicker-next-day/readme.md @@ -37,9 +37,9 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/datepicker/datepicker-previous-day/readme.md b/src/components/datepicker/datepicker-previous-day/readme.md index 33ee7aa58e..b459a1667b 100644 --- a/src/components/datepicker/datepicker-previous-day/readme.md +++ b/src/components/datepicker/datepicker-previous-day/readme.md @@ -37,9 +37,9 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index 8a346724c7..8ab95b5b79 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -106,11 +106,11 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | | `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | | `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | | `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | | `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | ## Methods @@ -123,8 +123,8 @@ This is helpful if you need a specific state of the component. | Name | Type | Description | Inherited From | | ------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Notifies that the connected input has changes. | | -| `inputUpdated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | | `datePickerUpdated` | `CustomEvent` | Notifies that the attributes of the datepicker have changes. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `inputUpdated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | | `validationChange` | `CustomEvent` | Emits whenever the internal validation state changes. | | diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md index 7078f368d5..aed02fc518 100644 --- a/src/components/dialog/dialog-actions/readme.md +++ b/src/components/dialog/dialog-actions/readme.md @@ -17,10 +17,10 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/componen | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | | `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | | `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md index 4bdcc0838c..afc7e28bd4 100644 --- a/src/components/dialog/dialog-title/readme.md +++ b/src/components/dialog/dialog-title/readme.md @@ -44,13 +44,13 @@ If a back button is displayed it emits a `requestBackAction` event on click. | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | | `hideOnScroll` | `hide-on-scroll` | public | `Breakpoint \| boolean` | `false` | Whether to hide the title up to a certain breakpoint. | | `level` | `level` | public | `SbbTitleLevel` | `'2'` | Title level | -| `visualLevel` | `visual-level` | public | `SbbTitleLevel \| undefined` | `'3'` | Visual level for the title. Optional, if not set, the value of level will be used. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `visualLevel` | `visual-level` | public | `SbbTitleLevel \| undefined` | `'3'` | Visual level for the title. Optional, if not set, the value of level will be used. | | `visuallyHidden` | `visually-hidden` | public | `boolean \| undefined` | | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true. | ## Events diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md index 894d5c376a..a60ce12811 100644 --- a/src/components/dialog/dialog/readme.md +++ b/src/components/dialog/dialog/readme.md @@ -92,25 +92,25 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- | -| `backdropAction` | `backdrop-action` | public | `'close' \| 'none'` | `'close'` | Backdrop click action. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | +| `backdropAction` | `backdrop-action` | public | `'close' \| 'none'` | `'close'` | Backdrop click action. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------- | -| `open` | public | Opens the dialog element. | | `void` | | | `close` | public | Closes the dialog element. | `result: any, target: HTMLElement` | `any` | | +| `open` | public | Opens the dialog element. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ----------------------------------------- | ------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/divider/readme.md b/src/components/divider/readme.md index c1954fd998..3d48c94959 100644 --- a/src/components/divider/readme.md +++ b/src/components/divider/readme.md @@ -18,5 +18,5 @@ It's also possible to display the component in `negative` variant using the self | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | ---------------- | -------------- | --------------------------------------------------------------------------------------------- | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. | diff --git a/src/components/expansion-panel/expansion-panel-header/readme.md b/src/components/expansion-panel/expansion-panel-header/readme.md index fc8ff81662..f89d623337 100644 --- a/src/components/expansion-panel/expansion-panel-header/readme.md +++ b/src/components/expansion-panel/expansion-panel-header/readme.md @@ -38,11 +38,11 @@ When the element is clicked, the `toggleExpanded` event is emitted. | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events diff --git a/src/components/expansion-panel/expansion-panel/readme.md b/src/components/expansion-panel/expansion-panel/readme.md index 1f6f3ad06b..b4ac8b1bd9 100644 --- a/src/components/expansion-panel/expansion-panel/readme.md +++ b/src/components/expansion-panel/expansion-panel/readme.md @@ -80,21 +80,21 @@ and the `aria-hidden` attribute on the content. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------------------ | --------- | ---------------------------------------------------------------------- | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null \| undefined` | | Heading level; if unset, a `div` will be rendered. | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | | `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the panel is disabled, so its expanded state can't be changed. | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | | `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null \| undefined` | | Heading level; if unset, a `div` will be rendered. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | ## Slots diff --git a/src/components/file-selector/readme.md b/src/components/file-selector/readme.md index ae14248fa8..35c95aa324 100644 --- a/src/components/file-selector/readme.md +++ b/src/components/file-selector/readme.md @@ -84,14 +84,14 @@ It's suggested to have a different value for each variant, e.g.: | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------- | ----------- | ------------------------------------------------------------------------ | -| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | -| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `accept` | `accept` | public | `string \| undefined` | | A comma-separated list of allowed unique file type specifiers. | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title displayed in `dropzone` variant. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the native input element. | -| `files` | - | public | `File[]` | | Gets the currently selected files. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `files` | - | public | `File[]` | | Gets the currently selected files. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | +| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title displayed in `dropzone` variant. | +| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | ## Methods diff --git a/src/components/footer/readme.md b/src/components/footer/readme.md index acfb2c9511..805e4aa2e6 100644 --- a/src/components/footer/readme.md +++ b/src/components/footer/readme.md @@ -77,11 +77,11 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`) | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `variant` | `variant` | public | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size. | | `accessibilityTitle` | `accessibility-title` | public | `string \| undefined` | | Footer title text, visually hidden, necessary for screen readers. | | `accessibilityTitleLevel` | `accessibility-title-level` | public | `SbbTitleLevel` | `'1'` | Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `variant` | `variant` | public | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints. | ## Slots diff --git a/src/components/form-field/form-field-clear/readme.md b/src/components/form-field/form-field-clear/readme.md index 1e430be0df..e8ee401c92 100644 --- a/src/components/form-field/form-field-clear/readme.md +++ b/src/components/form-field/form-field-clear/readme.md @@ -17,8 +17,8 @@ to provide the possibility to display a clear button which can clear the input v | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------------------- | ---------- | ------------------------------------------------ | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `name` | `name` | public | `string` | | The name of the button element. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/form-field/form-field/readme.md b/src/components/form-field/form-field/readme.md index e12d447bfe..e6237b7ce8 100644 --- a/src/components/form-field/form-field/readme.md +++ b/src/components/form-field/form-field/readme.md @@ -150,30 +150,30 @@ technology will announce errors when they appear. | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `errorSpace` | `error-space` | public | `'none' \| 'reserve' \| undefined` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | -| `optional` | `optional` | public | `boolean \| undefined` | | Indicates whether the input is optional. | -| `size` | `size` | public | `'l' \| 'm' \| 's' \| undefined` | `'m'` | Size variant, either l or m. | | `borderless` | `borderless` | public | `boolean` | `false` | Whether to display the form field without a border. | -| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | -| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | +| `errorSpace` | `error-space` | public | `'none' \| 'reserve' \| undefined` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | | `floatingLabel` | `floating-label` | public | `boolean` | `false` | Whether the label should float. If activated, the placeholder of the input is hidden. | +| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | | `inputElement` | - | public | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | Returns the input element. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `optional` | `optional` | public | `boolean \| undefined` | | Indicates whether the input is optional. | +| `size` | `size` | public | `'l' \| 'm' \| 's' \| undefined` | `'m'` | Size variant, either l or m. | +| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | ------- | ------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------- | -------------- | -| `reset` | public | Manually reset the form field. Currently, this only resets the floating label. | | `void` | | | `clear` | public | Manually clears the input value. It only works for inputs, selects are not supported. | | `void` | | | `getInputElement` | public | Returns the input element. | | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | +| `reset` | public | Manually reset the form field. Currently, this only resets the floating label. | | `void` | | ## Slots | Name | Description | | -------- | -------------------------------------------------------------------------- | | | Use this slot to render an input/select or a supported non-native element. | +| `error` | Use this slot to render an error. | | `label` | Use this slot to render a label. | | `prefix` | Use this slot to render an icon on the left side of the input. | | `suffix` | Use this slot to render an icon on the right side of the input. | -| `error` | Use this slot to render an error. | diff --git a/src/components/header/common/header-action.scss b/src/components/header/common/header-action.scss index 8375a93db5..45fa546bb9 100644 --- a/src/components/header/common/header-action.scss +++ b/src/components/header/common/header-action.scss @@ -75,6 +75,7 @@ padding-inline: var(--sbb-header-action-padding-inline); cursor: pointer; user-select: none; + outline: none; &::before { position: absolute; @@ -90,9 +91,14 @@ @include sbb.if-forced-colors { border-width: var(--sbb-border-width-2x); } + } - // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &, + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { + &::before { @include sbb.focus-outline; } } diff --git a/src/components/header/header-button/__snapshots__/header-button.spec.snap.js b/src/components/header/header-button/__snapshots__/header-button.spec.snap.js index 8fbcb3c511..6748977ed7 100644 --- a/src/components/header/header-button/__snapshots__/header-button.spec.snap.js +++ b/src/components/header/header-button/__snapshots__/header-button.spec.snap.js @@ -3,6 +3,7 @@ export const snapshots = {}; snapshots["sbb-header-button renders the component as a button with icon Light DOM"] = ` { type="reset" value="value" expand-from="zero" + aria-label="a11y label" > Action diff --git a/src/components/header/header-button/readme.md b/src/components/header/header-button/readme.md index 2d81c036ca..3900008a37 100644 --- a/src/components/header/header-button/readme.md +++ b/src/components/header/header-button/readme.md @@ -34,15 +34,15 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots | Name | Description | | ------ | --------------------------------------------------------------- | -| `icon` | Slot used to render the button icon. | | | Use the unnamed slot to add content to the `sbb-header-button`. | +| `icon` | Slot used to render the button icon. | diff --git a/src/components/header/header-link/__snapshots__/header-link.spec.snap.js b/src/components/header/header-link/__snapshots__/header-link.spec.snap.js index c9475f925e..e3862d184d 100644 --- a/src/components/header/header-link/__snapshots__/header-link.spec.snap.js +++ b/src/components/header/header-link/__snapshots__/header-link.spec.snap.js @@ -3,14 +3,13 @@ export const snapshots = {}; snapshots["sbb-header-link renders the component as a button with icon Light DOM"] = ` Action @@ -20,11 +19,10 @@ snapshots["sbb-header-link renders the component as a button with icon Light DOM snapshots["sbb-header-link renders the component as a button with icon Shadow DOM"] = ` @@ -59,13 +57,7 @@ snapshots["sbb-header-link renders the component as a button with icon A11y tree "children": [ { "role": "link", - "name": "Action . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Action . Link target opens in a new window." - } - ] + "name": "a11y label" } ] } @@ -81,14 +73,8 @@ snapshots["sbb-header-link renders the component as a button with icon A11y tree "children": [ { "role": "link", - "name": "Action . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Action . Link target opens in a new window.", - "value": "https://github.com/lyne-design-system/lyne-components" - } - ] + "name": "a11y label", + "value": "https://github.com/lyne-design-system/lyne-components" } ] } diff --git a/src/components/header/header-link/header-link.spec.ts b/src/components/header/header-link/header-link.spec.ts index ff9a493b60..19770c63d7 100644 --- a/src/components/header/header-link/header-link.spec.ts +++ b/src/components/header/header-link/header-link.spec.ts @@ -17,6 +17,7 @@ describe(`sbb-header-link`, () => { href="https://github.com/lyne-design-system/lyne-components" target="_blank" icon-name="pie-small" + accessibility-label="a11y label" >Action`, ); diff --git a/src/components/header/header-link/header-link.stories.ts b/src/components/header/header-link/header-link.stories.ts index 801dfc3d00..5fbaab360e 100644 --- a/src/components/header/header-link/header-link.stories.ts +++ b/src/components/header/header-link/header-link.stories.ts @@ -84,7 +84,7 @@ const download: InputType = { }, }; -const ariaLabel: InputType = { +const accessibilityLabel: InputType = { control: { type: 'text' }, }; @@ -96,7 +96,7 @@ const basicArgTypes: ArgTypes = { target, rel, download, - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, }; const basicArgs: Args = { @@ -107,7 +107,7 @@ const basicArgs: Args = { target: '_blank', rel: undefined, download: false, - 'aria-label': undefined, + 'accessibility-label': undefined, }; export const sbbHeaderActionLink: StoryObj = { diff --git a/src/components/header/header-link/readme.md b/src/components/header/header-link/readme.md index 87de692ec0..ee5e2c2e10 100644 --- a/src/components/header/header-link/readme.md +++ b/src/components/header/header-link/readme.md @@ -31,18 +31,19 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots | Name | Description | | ------ | ------------------------------------------------------------- | -| `icon` | Slot used to render the link icon. | | | Use the unnamed slot to add content to the `sbb-header-link`. | +| `icon` | Slot used to render the link icon. | diff --git a/src/components/header/header/__snapshots__/header.spec.snap.js b/src/components/header/header/__snapshots__/header.spec.snap.js index 30ec687ccc..8aaeb50026 100644 --- a/src/components/header/header/__snapshots__/header.spec.snap.js +++ b/src/components/header/header/__snapshots__/header.spec.snap.js @@ -26,8 +26,6 @@ snapshots["sbb-header renders actions and logo Dom"] = expand-from="medium" href="https://github.com/lyne-design-system/lyne-components" icon-name="hamburger-menu-small" - role="link" - tabindex="0" > Menu @@ -67,13 +65,7 @@ snapshots["sbb-header renders actions and logo A11y tree Chrome"] = "children": [ { "role": "link", - "name": "Menu", - "children": [ - { - "role": "link", - "name": "Menu" - } - ] + "name": "Menu" } ] } @@ -90,13 +82,7 @@ snapshots["sbb-header renders actions and logo A11y tree Firefox"] = { "role": "link", "name": "Menu", - "children": [ - { - "role": "link", - "name": "Menu", - "value": "https://github.com/lyne-design-system/lyne-components" - } - ] + "value": "https://github.com/lyne-design-system/lyne-components" } ] } diff --git a/src/components/header/header/readme.md b/src/components/header/header/readme.md index dcfe222e40..ba65fea4a2 100644 --- a/src/components/header/header/readme.md +++ b/src/components/header/header/readme.md @@ -105,15 +105,15 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati | Name | Attribute | Privacy | Type | Default | Description | | -------------- | ---------------- | ------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | | `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | -| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | | `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | +| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | ## CSS Properties | Name | Default | Description | | ---------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------ | -| `--sbb-header-z-index` | `10` | Can be used to modify the z-index of the header. | | `--sbb-header-height` | `zero-small:var(--sbb-spacing-fixed-14x);medium-ultra:var(--sbb-spacing-fixed-24x)` | Can be used to modify height of the header. | +| `--sbb-header-z-index` | `10` | Can be used to modify the z-index of the header. | ## Slots diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index fa586f5900..4b288c74d6 100644 --- a/src/components/icon/readme.md +++ b/src/components/icon/readme.md @@ -43,5 +43,5 @@ In thinking about accessibility, it is useful to place icon use into one of thre | Name | Default | Description | | ----------------------- | ------- | ----------------------------------- | -| `--sbb-icon-svg-width` | `auto` | Can be used to set a custom width. | | `--sbb-icon-svg-height` | `auto` | Can be used to set a custom height. | +| `--sbb-icon-svg-width` | `auto` | Can be used to set a custom width. | diff --git a/src/components/image/readme.md b/src/components/image/readme.md index 7b45a87f46..e50927d87b 100644 --- a/src/components/image/readme.md +++ b/src/components/image/readme.md @@ -10,7 +10,8 @@ The size can be set with `pictureSizesConfig`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | ---------------------- | ------- | --------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `alt` | `alt` | public | `string \| undefined` | | An alt text is not always necessary (e.g. in teaser cards when additional link text is provided). In this case we can leave the value of the alt attribute blank, but the attribute itself still needs to be present. That way we can signal assistive technology, that they can skip the image. | -| `skipLqip` | `skip-lqip` | public | `boolean` | `false` | If set to false, we show a blurred version of the image as placeholder before the actual image shows up. This will help to improve the perceived loading performance. Read more about the idea of lqip here: https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62 | +| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' | +| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. | | `caption` | `caption` | public | `string \| undefined` | | A caption can provide additional context to the image (e.g. descriptions and the like). Links will automatically receive tabindex=-1 if hideFromScreenreader is set to true. That way they will no longer become focusable. | | `copyright` | `copyright` | public | `string \| undefined` | | If a copyright text is provided, we will add it to the caption and create a structured data json-ld block with the copyright information. | | `copyrightHolder` | `copyright-holder` | public | `InterfaceImageAttributes['copyrightHolder']` | `'Organization'` | Copyright holder can either be an Organization or a Person | @@ -24,8 +25,7 @@ The size can be set with `pictureSizesConfig`. | `loading` | `loading` | public | `InterfaceImageAttributes['loading']` | `'eager'` | With the support of native image lazy loading, we can now decide whether we want to load the image immediately or only once it is close to the visible viewport. The value eager is best used for images within the initial viewport. We want to load these images as fast as possible to improve the Core Web Vitals values. lazy on the other hand works best for images which are further down the page or invisible during the loading of the initial viewport. | | `performanceMark` | `performance-mark` | public | `string \| undefined` | | With performance.mark you can log a timestamp associated with the name you define in performanceMark when a certain event is happening. In our case we will log the performance.mark into the PerformanceEntry API once the image is fully loaded. Performance monitoring tools like SpeedCurve or Lighthouse are then able to grab these entries from the PerformanceEntry API and give us additional information and insights about our page loading behaviour. We are then also able to monitor these values over a long period to see if our performance increases or decreases over time. Best to use lowercase strings here, separate words with underscores or dashes. | | `pictureSizesConfig` | `picture-sizes-config` | public | `string \| undefined` | | With the pictureSizesConfig object, you can pass in information into image about what kind of source elements should get rendered. mediaQueries accepts multiple Media Query entries which can get combined by defining a conditionOperator. Type is: stringified InterfaceImageAttributesSizesConfig-Object An example could look like this: { "breakpoints": \[ { "image": { "height": "675", "width": "1200" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-large-min" }, "conditionOperator": false } ] }, { "image": { "height": "549", "width": "976" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-small-min" }, "conditionOperator": false } ] }, { "image": { "height": "180", "width": "320" }, "mediaQueries": \[ { "conditionFeature": "max-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-micro-max" }, "conditionOperator": "and" }, { "conditionFeature": "orientation", "conditionFeatureValue": { "lyneDesignToken": false, "value": "landscape" }, "conditionOperator": false } ] } ] } | -| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. | -| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' | +| `skipLqip` | `skip-lqip` | public | `boolean` | `false` | If set to false, we show a blurred version of the image as placeholder before the actual image shows up. This will help to improve the perceived loading performance. Read more about the idea of lqip here: https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62 | ## CSS Properties diff --git a/src/components/journey-header/readme.md b/src/components/journey-header/readme.md index 4d6d5e1333..846bf6f244 100644 --- a/src/components/journey-header/readme.md +++ b/src/components/journey-header/readme.md @@ -48,9 +48,9 @@ The following one will be read as (locale: ENG): `Connection from Point A to Poi | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | -------------------------------- | ------- | --------------------------------------------------------------------------------- | -| `origin` | `origin` | public | `string` | | Origin location for the journey header. | | `destination` | `destination` | public | `string` | | Destination location for the journey header. | -| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | | `level` | `level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `size` | `size` | public | `JourneyHeaderSize \| undefined` | `'m'` | Journey header size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `origin` | `origin` | public | `string` | | Origin location for the journey header. | +| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | +| `size` | `size` | public | `JourneyHeaderSize \| undefined` | `'m'` | Journey header size. | diff --git a/src/components/journey-summary/readme.md b/src/components/journey-summary/readme.md index 5c1ed15f46..471cf86d84 100644 --- a/src/components/journey-summary/readme.md +++ b/src/components/journey-summary/readme.md @@ -22,11 +22,11 @@ If the tripBack prop is passed to the component a second journey-summary, withou | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | +| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | +| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | | `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | | The trip prop | | `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes \| undefined` | | The tripBack prop | -| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | -| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | ## Slots diff --git a/src/components/link-list/__snapshots__/link-list.spec.snap.js b/src/components/link-list/__snapshots__/link-list.spec.snap.js index ef4a404f77..658a5c26fb 100644 --- a/src/components/link-list/__snapshots__/link-list.spec.snap.js +++ b/src/components/link-list/__snapshots__/link-list.spec.snap.js @@ -57,10 +57,8 @@ snapshots["sbb-link-list rendered with a slotted title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-0" - tabindex="0" > Rückerstattungen @@ -72,10 +70,8 @@ snapshots["sbb-link-list rendered with a slotted title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-1" - tabindex="0" > Fundbüro @@ -87,10 +83,8 @@ snapshots["sbb-link-list rendered with a slotted title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-2" - tabindex="0" > Beschwerden @@ -102,10 +96,8 @@ snapshots["sbb-link-list rendered with a slotted title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-3" - tabindex="0" > Lob aussprechen @@ -117,10 +109,8 @@ snapshots["sbb-link-list rendered with a slotted title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-4" - tabindex="0" > Sachbeschädigung melden @@ -200,10 +190,8 @@ snapshots["sbb-link-list rendered with a title from properties in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-0" - tabindex="0" > Rückerstattungen @@ -215,10 +203,8 @@ snapshots["sbb-link-list rendered with a title from properties in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-1" - tabindex="0" > Fundbüro @@ -230,10 +216,8 @@ snapshots["sbb-link-list rendered with a title from properties in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-2" - tabindex="0" > Beschwerden @@ -245,10 +229,8 @@ snapshots["sbb-link-list rendered with a title from properties in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-3" - tabindex="0" > Lob aussprechen @@ -260,10 +242,8 @@ snapshots["sbb-link-list rendered with a title from properties in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-4" - tabindex="0" > Sachbeschädigung melden @@ -332,10 +312,8 @@ snapshots["sbb-link-list rendered without a title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-0" - tabindex="0" > Rückerstattungen @@ -347,10 +325,8 @@ snapshots["sbb-link-list rendered without a title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-1" - tabindex="0" > Fundbüro @@ -362,10 +338,8 @@ snapshots["sbb-link-list rendered without a title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-2" - tabindex="0" > Beschwerden @@ -377,10 +351,8 @@ snapshots["sbb-link-list rendered without a title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-3" - tabindex="0" > Lob aussprechen @@ -392,10 +364,8 @@ snapshots["sbb-link-list rendered without a title in light DOM"] = dir="ltr" href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html" icon-placement="start" - role="link" size="s" slot="li-4" - tabindex="0" > Sachbeschädigung melden diff --git a/src/components/link-list/readme.md b/src/components/link-list/readme.md index 8b0a833eae..3f317772f5 100644 --- a/src/components/link-list/readme.md +++ b/src/components/link-list/readme.md @@ -72,12 +72,12 @@ The title will not be displayed in the horizontal orientation. | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | ## Slots diff --git a/src/components/link/block-link-button/readme.md b/src/components/link/block-link-button/readme.md index ce0325c11a..6d192a31ca 100644 --- a/src/components/link/block-link-button/readme.md +++ b/src/components/link/block-link-button/readme.md @@ -48,14 +48,14 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | +| `name` | `name` | public | `string` | | The name of the button element. | | `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/link/block-link-static/readme.md b/src/components/link/block-link-static/readme.md index 024c9cb7c7..a28464260e 100644 --- a/src/components/link/block-link-static/readme.md +++ b/src/components/link/block-link-static/readme.md @@ -41,10 +41,10 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | | `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | ## Slots diff --git a/src/components/link/block-link/__snapshots__/block-link.spec.snap.js b/src/components/link/block-link/__snapshots__/block-link.spec.snap.js index 74cf3ab2b0..ed3d5a1306 100644 --- a/src/components/link/block-link/__snapshots__/block-link.spec.snap.js +++ b/src/components/link/block-link/__snapshots__/block-link.spec.snap.js @@ -3,7 +3,7 @@ export const snapshots = {}; snapshots["sbb-block-link renders - DOM"] = ` Travelcards & tickets. @@ -23,11 +21,10 @@ snapshots["sbb-block-link renders - DOM"] = snapshots["sbb-block-link renders - ShadowDOM"] = ` @@ -47,13 +44,7 @@ snapshots["sbb-block-link A11y tree Chrome"] = "children": [ { "role": "link", - "name": "Travelcards & tickets", - "children": [ - { - "role": "link", - "name": "Travelcards & tickets." - } - ] + "name": "Travelcards & tickets" } ] } @@ -70,13 +61,7 @@ snapshots["sbb-block-link A11y tree Firefox"] = { "role": "link", "name": "Travelcards & tickets", - "children": [ - { - "role": "link", - "name": "Travelcards & tickets.", - "value": "https://github.com/lyne-design-system/lyne-components" - } - ] + "value": "https://github.com/lyne-design-system/lyne-components" } ] } diff --git a/src/components/link/block-link/block-link.spec.ts b/src/components/link/block-link/block-link.spec.ts index 341bf75c55..49c4390b24 100644 --- a/src/components/link/block-link/block-link.spec.ts +++ b/src/components/link/block-link/block-link.spec.ts @@ -16,7 +16,7 @@ describe(`sbb-block-link`, () => { href="https://github.com/lyne-design-system/lyne-components" size="m" download - aria-label="Travelcards & tickets" + accessibility-label="Travelcards & tickets" > Travelcards & tickets. diff --git a/src/components/link/block-link/block-link.ts b/src/components/link/block-link/block-link.ts index dd43bae516..a5cdda7286 100644 --- a/src/components/link/block-link/block-link.ts +++ b/src/components/link/block-link/block-link.ts @@ -1,7 +1,7 @@ import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { SbbBlockLinkCommonElementMixin } from '../common.js'; /** @@ -12,7 +12,7 @@ import { SbbBlockLinkCommonElementMixin } from '../common.js'; */ @customElement('sbb-block-link') export class SbbBlockLinkElement extends SbbBlockLinkCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) {} declare global { diff --git a/src/components/link/block-link/readme.md b/src/components/link/block-link/readme.md index 0d693d670e..08e2d24446 100644 --- a/src/components/link/block-link/readme.md +++ b/src/components/link/block-link/readme.md @@ -51,16 +51,17 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| --------------- | ---------------- | ------- | --------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/link/common/link-common-stories.ts b/src/components/link/common/link-common-stories.ts index b5cf1ab084..80f97cdf0d 100644 --- a/src/components/link/common/link-common-stories.ts +++ b/src/components/link/common/link-common-stories.ts @@ -54,12 +54,6 @@ const negative: InputType = { }, }; -const ariaLabel: InputType = { - control: { - type: 'text', - }, -}; - const disabled: InputType = { control: { type: 'boolean', @@ -81,14 +75,12 @@ const tag: InputType = { export const linkCommonDefaultArgTypes: ArgTypes = { text, negative, - 'aria-label': ariaLabel, tag, }; export const linkCommonDefaultArgs: Args = { text: 'Travelcards & tickets', negative: false, - 'aria-label': undefined, tag: 'TBD', }; @@ -177,6 +169,12 @@ const download: InputType = { }, }; +const accessibilityLabel: InputType = { + control: { + type: 'text', + }, +}; + export const linkDefaultArgTypes: ArgTypes = { ...linkCommonDefaultArgTypes, href, @@ -184,6 +182,7 @@ export const linkDefaultArgTypes: ArgTypes = { rel, download, disabled, + 'accessibility-label': accessibilityLabel, }; export const linkDefaultArgs: Args = { @@ -193,6 +192,7 @@ export const linkDefaultArgs: Args = { rel: undefined, download: false, disabled: false, + 'accessibility-label': undefined, }; // link-button params @@ -234,6 +234,12 @@ const form: InputType = { }, }; +const ariaLabel: InputType = { + control: { + type: 'text', + }, +}; + export const linkButtonDefaultArgTypes: ArgTypes = { ...linkCommonDefaultArgTypes, type, @@ -241,6 +247,7 @@ export const linkButtonDefaultArgTypes: ArgTypes = { name, value, form, + 'aria-label': ariaLabel, }; export const linkButtonDefaultArgs: Args = { @@ -250,6 +257,7 @@ export const linkButtonDefaultArgs: Args = { name: 'Button name', value: undefined, form: undefined, + 'aria-label': undefined, }; // Stories diff --git a/src/components/link/common/link.scss b/src/components/link/common/link.scss index 2c5f20c2e6..5b9d0decc8 100644 --- a/src/components/link/common/link.scss +++ b/src/components/link/common/link.scss @@ -22,6 +22,7 @@ width: 100%; cursor: pointer; padding: var(--sbb-link-padding, 0); + outline: none; :host([disabled]) & { pointer-events: none; @@ -33,7 +34,10 @@ } // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &, + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset)); diff --git a/src/components/link/link-button/readme.md b/src/components/link/link-button/readme.md index 17a98eac76..10b5ed0b10 100644 --- a/src/components/link/link-button/readme.md +++ b/src/components/link/link-button/readme.md @@ -34,13 +34,13 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/link/link-static/readme.md b/src/components/link/link-static/readme.md index 5863e8c790..0030673401 100644 --- a/src/components/link/link-static/readme.md +++ b/src/components/link/link-static/readme.md @@ -23,9 +23,9 @@ The component can be displayed in `disabled` state using the self-named property | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | ## Slots diff --git a/src/components/link/link/__snapshots__/link.spec.snap.js b/src/components/link/link/__snapshots__/link.spec.snap.js index e78820d6fa..2235bad3cb 100644 --- a/src/components/link/link/__snapshots__/link.spec.snap.js +++ b/src/components/link/link/__snapshots__/link.spec.snap.js @@ -9,9 +9,7 @@ snapshots["sbb-link renders - DOM"] = data-slot-names="unnamed" dir="ltr" href="https://sbb.ch" - role="link" size="m" - tabindex="0" target="_blank" > Travelcards & tickets. @@ -24,8 +22,6 @@ snapshots["sbb-link renders - ShadowDOM"] = class="sbb-action-base sbb-link" href="https://sbb.ch" rel="external noopener nofollow" - role="presentation" - tabindex="-1" target="_blank" > @@ -45,13 +41,7 @@ snapshots["sbb-link A11y tree Chrome"] = "children": [ { "role": "link", - "name": "Travelcards & tickets. . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Travelcards & tickets. . Link target opens in a new window." - } - ] + "name": "Travelcards & tickets. . Link target opens in a new window." } ] } @@ -68,13 +58,7 @@ snapshots["sbb-link A11y tree Firefox"] = { "role": "link", "name": "Travelcards & tickets. . Link target opens in a new window.", - "children": [ - { - "role": "link", - "name": "Travelcards & tickets. . Link target opens in a new window.", - "value": "https://sbb.ch/" - } - ] + "value": "https://sbb.ch/" } ] } diff --git a/src/components/link/link/link.ts b/src/components/link/link/link.ts index 8f5a421fb0..408c0f2aad 100644 --- a/src/components/link/link/link.ts +++ b/src/components/link/link/link.ts @@ -1,7 +1,7 @@ import { customElement } from 'lit/decorators.js'; import { SbbLinkBaseElement } from '../../core/base-elements.js'; -import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; +import { SbbDisabledMixin } from '../../core/mixins.js'; import { SbbInlineLinkCommonElementMixin } from '../common.js'; /** @@ -11,7 +11,7 @@ import { SbbInlineLinkCommonElementMixin } from '../common.js'; */ @customElement('sbb-link') export class SbbLinkElement extends SbbInlineLinkCommonElementMixin( - SbbDisabledTabIndexActionMixin(SbbLinkBaseElement), + SbbDisabledMixin(SbbLinkBaseElement), ) {} declare global { diff --git a/src/components/link/link/readme.md b/src/components/link/link/readme.md index 4ec2210f44..104ab5a486 100644 --- a/src/components/link/link/readme.md +++ b/src/components/link/link/readme.md @@ -31,15 +31,16 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/loading-indicator/readme.md b/src/components/loading-indicator/readme.md index f11e59d9da..d4fabc3a2a 100644 --- a/src/components/loading-indicator/readme.md +++ b/src/components/loading-indicator/readme.md @@ -51,6 +51,6 @@ and then append the `sbb-loading-indicator` on it after giving it the correct `a | Name | Attribute | Privacy | Type | Default | Description | | --------- | --------- | ------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- | -| `variant` | `variant` | public | `'window' \| 'circle' \| undefined` | | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | -| `size` | `size` | public | `'s' \| 'l'` | `'s'` | Size variant, either s or m. | | `color` | `color` | public | `'default' \| 'smoke' \| 'white'` | `'default'` | Color variant. | +| `size` | `size` | public | `'s' \| 'l'` | `'s'` | Size variant, either s or m. | +| `variant` | `variant` | public | `'window' \| 'circle' \| undefined` | | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | diff --git a/src/components/logo/readme.md b/src/components/logo/readme.md index 48a7d8d60b..9030e29a07 100644 --- a/src/components/logo/readme.md +++ b/src/components/logo/readme.md @@ -31,9 +31,9 @@ Possible values are `ideal` (default), `minimal` and `none`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | -------------------------------- | --------- | ------------------------------------------------------------ | -| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around logo. | | `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the SVG logo. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around logo. | ## CSS Properties diff --git a/src/components/menu/common/menu-action-common.ts b/src/components/menu/common/menu-action-common.ts index 197768f6f3..fa13f7cb4b 100644 --- a/src/components/menu/common/menu-action-common.ts +++ b/src/components/menu/common/menu-action-common.ts @@ -4,7 +4,7 @@ import { html } from 'lit/static-html.js'; import type { SbbActionBaseElement } from '../../core/base-elements.js'; import { - SbbDisabledTabIndexActionMixin, + SbbDisabledMixin, type AbstractConstructor, type SbbDisabledMixinType, } from '../../core/mixins.js'; @@ -27,7 +27,7 @@ export const SbbMenuActionCommonElementMixin = < superClass: T, ): AbstractConstructor & T => { abstract class SbbMenuActionCommonElement - extends SbbIconNameMixin(SbbDisabledTabIndexActionMixin(superClass)) + extends SbbIconNameMixin(SbbDisabledMixin(superClass)) implements Partial { public static styles: CSSResultGroup = style; diff --git a/src/components/menu/common/menu-action.scss b/src/components/menu/common/menu-action.scss index e6134d0fcf..40f0fac485 100644 --- a/src/components/menu/common/menu-action.scss +++ b/src/components/menu/common/menu-action.scss @@ -51,6 +51,7 @@ color: var(--sbb-menu-action-color); padding: var(--sbb-spacing-fixed-1x) var(--sbb-menu-action-outer-horizontal-padding); cursor: var(--sbb-menu-action-cursor); + outline: none; } .sbb-menu-action__content { @@ -66,7 +67,10 @@ background-color: var(--sbb-menu-background-color); // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & , + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) :focus-visible & { --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); @include sbb.focus-outline; diff --git a/src/components/menu/menu-button/__snapshots__/menu-button.spec.snap.js b/src/components/menu/menu-button/__snapshots__/menu-button.spec.snap.js new file mode 100644 index 0000000000..a9aa7f8792 --- /dev/null +++ b/src/components/menu/menu-button/__snapshots__/menu-button.spec.snap.js @@ -0,0 +1,113 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-menu-button renders Light DOM"] = +` + + Action + + +`; +/* end snapshot sbb-menu-button renders Light DOM */ + +snapshots["sbb-menu-button renders Shadow DOM"] = +` + + + + + + + + + + + +`; +/* end snapshot sbb-menu-button renders Shadow DOM */ + +snapshots["sbb-menu-button renders A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "a11y label" + } + ] +} +

+`; +/* end snapshot sbb-menu-button renders A11y tree Chrome */ + +snapshots["sbb-menu-button renders component with icon and amount Light DOM"] = +` + + Action + + +`; +/* end snapshot sbb-menu-button renders component with icon and amount Light DOM */ + +snapshots["sbb-menu-button renders component with icon and amount Shadow DOM"] = +` + + + + + + + + + + + + 123456 + + + +`; +/* end snapshot sbb-menu-button renders component with icon and amount Shadow DOM */ + +snapshots["sbb-menu-button renders A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "a11y label" + } + ] +} +

+`; +/* end snapshot sbb-menu-button renders A11y tree Firefox */ + diff --git a/src/components/menu/menu-button/menu-button.spec.ts b/src/components/menu/menu-button/menu-button.spec.ts index 677158e99e..d0f5ea950a 100644 --- a/src/components/menu/menu-button/menu-button.spec.ts +++ b/src/components/menu/menu-button/menu-button.spec.ts @@ -1,70 +1,52 @@ import { expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { fixture } from '../../core/testing/private.js'; +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbMenuButtonElement } from './menu-button.js'; import './menu-button.js'; describe(`sbb-menu-button`, () => { - it('renders', async () => { - const root = await fixture(html` - - Action - - `); + describe('renders', () => { + let element: SbbMenuButtonElement; + + beforeEach(async () => { + element = await fixture(html` + + Action + + `); + }); + + it('Light DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal(` - - Action - - `); - expect(root).shadowDom.to.be.equal(` - - - - - - - - - - - `); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); - it('renders component with icon and amount', async () => { - const root = await fixture(html` - - Action - - `); + describe('renders component with icon and amount', () => { + let element: SbbMenuButtonElement; + + beforeEach(async () => { + element = await fixture(html` + + Action + + `); + }); + + it('Light DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal(` - - Action - - `); - expect(root).shadowDom.to.be.equal(` - - - - - - - - - - - 123456 - - - - `); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); }); diff --git a/src/components/menu/menu-button/menu-button.ts b/src/components/menu/menu-button/menu-button.ts index f6ef86c048..1602155c61 100644 --- a/src/components/menu/menu-button/menu-button.ts +++ b/src/components/menu/menu-button/menu-button.ts @@ -1,6 +1,7 @@ import { customElement } from 'lit/decorators.js'; import { SbbButtonBaseElement } from '../../core/base-elements.js'; +import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; import { SbbMenuActionCommonElementMixin } from '../common.js'; /** @@ -12,7 +13,9 @@ import { SbbMenuActionCommonElementMixin } from '../common.js'; * to modify horizontal padding. */ @customElement('sbb-menu-button') -export class SbbMenuButtonElement extends SbbMenuActionCommonElementMixin(SbbButtonBaseElement) {} +export class SbbMenuButtonElement extends SbbDisabledTabIndexActionMixin( + SbbMenuActionCommonElementMixin(SbbButtonBaseElement), +) {} declare global { interface HTMLElementTagNameMap { diff --git a/src/components/menu/menu-button/readme.md b/src/components/menu/menu-button/readme.md index 348d8b15b1..e57b7337db 100644 --- a/src/components/menu/menu-button/readme.md +++ b/src/components/menu/menu-button/readme.md @@ -33,12 +33,12 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `amount` | `amount` | public | `string \| undefined` | | Value shown as badge at component end. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## CSS Properties diff --git a/src/components/menu/menu-link/__snapshots__/menu-link.spec.snap.js b/src/components/menu/menu-link/__snapshots__/menu-link.spec.snap.js new file mode 100644 index 0000000000..1027511164 --- /dev/null +++ b/src/components/menu/menu-link/__snapshots__/menu-link.spec.snap.js @@ -0,0 +1,89 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-menu-link renders component with icon and amount Light DOM"] = +` + + Action + + +`; +/* end snapshot sbb-menu-link renders component with icon and amount Light DOM */ + +snapshots["sbb-menu-link renders component with icon and amount Shadow DOM"] = +` + + + + + + + + + + + + 123456 + + + + . Link target opens in a new window. + + +`; +/* end snapshot sbb-menu-link renders component with icon and amount Shadow DOM */ + +snapshots["sbb-menu-link renders component with icon and amount A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "a11y label" + } + ] +} +

+`; +/* end snapshot sbb-menu-link renders component with icon and amount A11y tree Chrome */ + +snapshots["sbb-menu-link renders component with icon and amount A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "a11y label", + "value": "https://github.com/lyne-design-system/lyne-components" + } + ] +} +

+`; +/* end snapshot sbb-menu-link renders component with icon and amount A11y tree Firefox */ + diff --git a/src/components/menu/menu-link/menu-link.spec.ts b/src/components/menu/menu-link/menu-link.spec.ts index 4937efe409..ec6d9197b9 100644 --- a/src/components/menu/menu-link/menu-link.spec.ts +++ b/src/components/menu/menu-link/menu-link.spec.ts @@ -1,52 +1,38 @@ import { expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { fixture } from '../../core/testing/private.js'; +import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbMenuLinkElement } from './menu-link.js'; import './menu-link.js'; describe(`sbb-menu-link`, () => { - it('renders component with icon and amount', async () => { - const root = await fixture(html` - - Action - - `); - - expect(root).dom.to.be.equal(` - - Action - - `); - expect(root).shadowDom.to.be.equal(` - - - - - - - - - - - 123456 - - - - . Link target opens in a new window. - - - `); + describe('renders component with icon and amount', () => { + let element: SbbMenuLinkElement; + + beforeEach(async () => { + element = await fixture(html` + + Action + + `); + }); + + it('Light DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/menu/menu-link/menu-link.stories.ts b/src/components/menu/menu-link/menu-link.stories.ts index c4c5018712..08983288bd 100644 --- a/src/components/menu/menu-link/menu-link.stories.ts +++ b/src/components/menu/menu-link/menu-link.stories.ts @@ -103,7 +103,7 @@ const disabled: InputType = { }, }; -const ariaLabel: InputType = { +const accessibilityLabel: InputType = { control: { type: 'text', }, @@ -118,7 +118,7 @@ const defaultArgTypes: ArgTypes = { rel, download, disabled, - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, }; const defaultArgs: Args = { @@ -130,7 +130,7 @@ const defaultArgs: Args = { rel: undefined, download: false, disabled: false, - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, }; export const menuLink: StoryObj = { diff --git a/src/components/menu/menu-link/readme.md b/src/components/menu/menu-link/readme.md index 381092dd46..e421f3d899 100644 --- a/src/components/menu/menu-link/readme.md +++ b/src/components/menu/menu-link/readme.md @@ -30,15 +30,16 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `amount` | `amount` | public | `string \| undefined` | | Value shown as badge at component end. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `amount` | `amount` | public | `string \| undefined` | | Value shown as badge at component end. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## CSS Properties diff --git a/src/components/menu/menu/__snapshots__/menu.spec.snap.js b/src/components/menu/menu/__snapshots__/menu.spec.snap.js index fcead6b9ed..bc36348581 100644 --- a/src/components/menu/menu/__snapshots__/menu.spec.snap.js +++ b/src/components/menu/menu/__snapshots__/menu.spec.snap.js @@ -15,9 +15,7 @@ snapshots["sbb-menu renders DOM"] = dir="ltr" href="https://www.sbb.ch/en" icon-placement="start" - role="link" size="s" - tabindex="0" > Profile diff --git a/src/components/menu/menu/menu.e2e.ts b/src/components/menu/menu/menu.e2e.ts index c31df4ea3a..48785e8cf9 100644 --- a/src/components/menu/menu/menu.e2e.ts +++ b/src/components/menu/menu/menu.e2e.ts @@ -240,8 +240,7 @@ describe(`sbb-menu with ${fixture.name}`, () => { const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); - await sendKeys({ down: 'Tab' }); - await waitForLitRender(element); + trigger.focus(); await sendKeys({ down: 'Enter' }); await waitForLitRender(element); diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts index b731f4047e..b997a37414 100644 --- a/src/components/menu/menu/menu.ts +++ b/src/components/menu/menu/menu.ts @@ -178,7 +178,10 @@ export class SbbMenuElement extends SbbNamedSlotListMixin< this.querySelectorAll( 'sbb-menu-button, sbb-menu-link', ), - ).filter((el: HTMLElement) => el.tabIndex === 0 && interactivityChecker.isVisible(el)); + ).filter( + (el: SbbMenuButtonElement | SbbMenuLinkElement) => + !el.disabled && interactivityChecker.isVisible(el), + ); const current = enabledActions.findIndex((e: Element) => e === evt.target); const nextIndex = getNextElementIndex(evt, current, enabledActions.length); diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md index 30d942fa9e..38c8ed202e 100644 --- a/src/components/menu/menu/readme.md +++ b/src/components/menu/menu/readme.md @@ -63,24 +63,24 @@ to identify which actions are active and which are not. | Name | Attribute | Privacy | Type | Default | Description | | ------------------------ | -------------------------- | ------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element. | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. Used only if the menu automatically renders the actions inside as a list. | +| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | -------------------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the menu on trigger click. | | `void` | | | `close` | public | Closes the menu. | | `void` | | +| `open` | public | Opens the menu on trigger click. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-menu` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-menu` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/message/readme.md b/src/components/message/readme.md index a1121d6974..38c028428f 100644 --- a/src/components/message/readme.md +++ b/src/components/message/readme.md @@ -38,8 +38,8 @@ by the used components (e.g. `alt-text` and `aria-label`). | Name | Description | | ---------- | --------------------------------------------------------- | +| `action` | Use this slot to provide a sbb-button. | | `image` | Use this slot to provide a sbb-image component. | -| `title` | Use this slot to provide title text for the component. | -| `subtitle` | Use this slot to provide a subtitle, must be a paragraph. | | `legend` | Use this slot to provide a legend, must be a paragraph. | -| `action` | Use this slot to provide a sbb-button. | +| `subtitle` | Use this slot to provide a subtitle, must be a paragraph. | +| `title` | Use this slot to provide title text for the component. | diff --git a/src/components/navigation/common/navigation-action.scss b/src/components/navigation/common/navigation-action.scss index 74e1703323..918ecca2fd 100644 --- a/src/components/navigation/common/navigation-action.scss +++ b/src/components/navigation/common/navigation-action.scss @@ -59,6 +59,7 @@ sbb-icon { hyphens: auto; text-align: left; color: var(--sbb-navigation-action-color); + outline: none; @include sbb.if-forced-colors { transition: none; @@ -73,7 +74,10 @@ sbb-icon { } // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + // Handle focus on the host (button variant) + :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &, + // Handle focus on the action (link variant) + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset)); diff --git a/src/components/navigation/navigation-button/readme.md b/src/components/navigation/navigation-button/readme.md index 685a8b0a1b..5247330468 100644 --- a/src/components/navigation/navigation-button/readme.md +++ b/src/components/navigation/navigation-button/readme.md @@ -33,14 +33,14 @@ The component has three different sizes, which can be changed using the `size` p | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | --------- | ------- | ------------------------------------------ | ---------- | ----------------------------------------------------------- | -| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | | `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | +| `name` | `name` | public | `string` | | The name of the button element. | | `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | +| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js b/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js index e4c9a06105..7b046892af 100644 --- a/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js +++ b/src/components/navigation/navigation-link/__snapshots__/navigation-link.spec.snap.js @@ -3,13 +3,12 @@ export const snapshots = {}; snapshots["sbb-navigation-link renders DOM"] = ` This is a link @@ -19,11 +18,10 @@ snapshots["sbb-navigation-link renders DOM"] = snapshots["sbb-navigation-link renders Shadow DOM"] = ` { describe('renders', async () => { beforeEach(async () => { element = await fixture( - html`This is a link`, ); diff --git a/src/components/navigation/navigation-link/navigation-link.stories.ts b/src/components/navigation/navigation-link/navigation-link.stories.ts index da5c648211..51ba7d3054 100644 --- a/src/components/navigation/navigation-link/navigation-link.stories.ts +++ b/src/components/navigation/navigation-link/navigation-link.stories.ts @@ -15,7 +15,7 @@ const size: InputType = { options: ['l', 'm', 's'], }; -const ariaLabel: InputType = { +const accessibilityLabel: InputType = { control: { type: 'text', }, @@ -70,7 +70,7 @@ const defaultArgTypes: ArgTypes = { target, rel, download, - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, }; const defaultArgs: Args = { @@ -79,7 +79,7 @@ const defaultArgs: Args = { target: '_blank', rel: undefined, download: false, - 'aria-label': undefined, + 'accessibility-label': undefined, }; const Template = (args: Args): TemplateResult => html` diff --git a/src/components/navigation/navigation-link/readme.md b/src/components/navigation/navigation-link/readme.md index 941e606495..aed0eb37ef 100644 --- a/src/components/navigation/navigation-link/readme.md +++ b/src/components/navigation/navigation-link/readme.md @@ -31,16 +31,17 @@ The component has three different sizes, which can be changed using the `size` p ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------------ | ---------- | ------- | ------------------------------------------ | ------- | ----------------------------------------------------------------- | -| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | -| `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | -| `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | -| `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | ------------------------------------------ | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | +| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/navigation/navigation-marker/readme.md b/src/components/navigation/navigation-marker/readme.md index c840310e79..5017aa67a6 100644 --- a/src/components/navigation/navigation-marker/readme.md +++ b/src/components/navigation/navigation-marker/readme.md @@ -35,8 +35,8 @@ Possible values are `l` (default) and `s`. | Name | Privacy | Description | Parameters | Return | Inherited From | | -------- | ------- | ----------- | ---------------------------------------------------------------- | ------ | -------------- | -| `select` | public | | `action: SbbNavigationButtonElement \| SbbNavigationLinkElement` | `void` | | | `reset` | public | | | `void` | | +| `select` | public | | `action: SbbNavigationButtonElement \| SbbNavigationLinkElement` | `void` | | ## Slots diff --git a/src/components/navigation/navigation-section/readme.md b/src/components/navigation/navigation-section/readme.md index f016187c47..e86cfcceac 100644 --- a/src/components/navigation/navigation-section/readme.md +++ b/src/components/navigation/navigation-section/readme.md @@ -28,17 +28,17 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g., | Name | Attribute | Privacy | Type | Default | Description | | ------------------------ | -------------------------- | ------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | +| `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section. | | `titleContent` | `title-content` | public | `string \| undefined` | | The label to be shown before the action list. | | `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation section. Accepts both a string (id of an element) or an HTML element. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section. | -| `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ---------------------------------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the navigation section on trigger click. | | `void` | | | `close` | public | Closes the navigation section. | | `void` | | +| `open` | public | Opens the navigation section on trigger click. | | `void` | | ## Slots diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md index 89fe4fd4fe..35cea46a4a 100644 --- a/src/components/navigation/navigation/readme.md +++ b/src/components/navigation/navigation/readme.md @@ -60,25 +60,25 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g., | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. | | `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `activeNavigationSection` | - | public | `HTMLElement \| null` | `null` | | +| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ---------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the navigation. | | `void` | | | `close` | public | Closes the navigation. | | `void` | | +| `open` | public | Opens the navigation. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 00d6245f0c..1514f12e88 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -82,12 +82,12 @@ As a base rule, opening animations should be active if a notification arrives af | Name | Attribute | Privacy | Type | Default | Description | | -------------- | --------------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------- | -| `type` | `type` | public | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification. | -| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | | `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either s or m. | -| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | +| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `type` | `type` | public | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification. | ## Methods @@ -99,10 +99,10 @@ As a base rule, opening animations should be active if a notification arrives af | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-notification` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | ## CSS Properties diff --git a/src/components/option/optgroup/readme.md b/src/components/option/optgroup/readme.md index 4a6530833b..bfaf2c4683 100644 --- a/src/components/option/optgroup/readme.md +++ b/src/components/option/optgroup/readme.md @@ -35,8 +35,8 @@ The component has a `disabled` property which sets all the `sbb-option` in the g | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------- | ------- | ---------------------------------- | -| `label` | `label` | public | `string` | | Option group label. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `label` | `label` | public | `string` | | Option group label. | ## Slots diff --git a/src/components/option/option/readme.md b/src/components/option/option/readme.md index b0a5aa6d51..757fc41f85 100644 --- a/src/components/option/option/readme.md +++ b/src/components/option/option/readme.md @@ -60,18 +60,18 @@ If the label slot contains only a **text node**, it is possible to search for te | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `value` | `value` | public | `string` | | Value of the option. | | `active` | `active` | public | `boolean \| undefined` | | Whether the option is currently active. | -| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | +| `value` | `value` | public | `string` | | Value of the option. | ## Events | Name | Type | Description | Inherited From | | ----------------------- | ------------------- | ----------------------------------------------- | -------------- | -| `optionSelectionChange` | `CustomEvent` | Emits when the option selection status changes. | | | `optionSelected` | `CustomEvent` | Emits when an option was selected by user. | | +| `optionSelectionChange` | `CustomEvent` | Emits when the option selection status changes. | | ## CSS Properties diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md index acfb9b7ba5..a16db17cfd 100644 --- a/src/components/overlay/readme.md +++ b/src/components/overlay/readme.md @@ -76,29 +76,29 @@ When using a button to trigger the overlay, ensure to manage the appropriate ARI | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. | -| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label adn will describe the purpose of the dialog. | +| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | --------------------------- | ---------------------------------- | ------ | -------------- | -| `open` | public | Opens the overlay element. | | `void` | | | `close` | public | Closes the overlay element. | `result: any, target: HTMLElement` | `any` | | +| `open` | public | Opens the overlay element. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. | | -| `didOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` is opened. | | -| `willClose` | `CustomEvent` | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. | | | `didClose` | `CustomEvent` | Emits whenever the `sbb-overlay` is closed. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` is opened. | | | `requestBackAction` | `CustomEvent` | Emits whenever the back button is clicked. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/pearl-chain-time/readme.md b/src/components/pearl-chain-time/readme.md index ba81f9cb4e..c943e428c2 100644 --- a/src/components/pearl-chain-time/readme.md +++ b/src/components/pearl-chain-time/readme.md @@ -56,9 +56,9 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | -| `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" | | `arrivalTime` | `arrival-time` | public | `string \| undefined` | | Prop to render the arrival time - will be formatted as "H:mm" | -| `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure | | `arrivalWalk` | `arrival-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) after arrival | +| `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" | +| `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | diff --git a/src/components/pearl-chain-vertical-item/readme.md b/src/components/pearl-chain-vertical-item/readme.md index bb5f9fae49..3218e7c56f 100644 --- a/src/components/pearl-chain-vertical-item/readme.md +++ b/src/components/pearl-chain-vertical-item/readme.md @@ -38,8 +38,8 @@ The slots themselves are unstyled, so that they can be used in various ways. | Name | Attribute | Privacy | Type | Default | Description | | ---------------------------------- | -------------------------------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------- | -| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | If true, the position won't be animated. | +| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. | ## Slots diff --git a/src/components/pearl-chain/readme.md b/src/components/pearl-chain/readme.md index a1add7e233..4b9532c8ae 100644 --- a/src/components/pearl-chain/readme.md +++ b/src/components/pearl-chain/readme.md @@ -57,5 +57,5 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `legs` | `legs` | public | `(Leg \| PtRideLeg)[] \| undefined` | | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `legs` | `legs` | public | `(Leg \| PtRideLeg)[] \| undefined` | | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | diff --git a/src/components/popover/popover-trigger/readme.md b/src/components/popover/popover-trigger/readme.md index 610967f92d..aa2469e0c5 100644 --- a/src/components/popover/popover-trigger/readme.md +++ b/src/components/popover/popover-trigger/readme.md @@ -74,12 +74,12 @@ associate the popover trigger with the popover via `aria-describedby` and an `id | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md index fb785d84e4..cf0b83f65e 100644 --- a/src/components/popover/popover/readme.md +++ b/src/components/popover/popover/readme.md @@ -80,28 +80,28 @@ Overlays should always contain a heading level 2 title. It can be visually hidde | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| undefined` | | The element that will trigger the popover overlay. Accepts both a string (id of an element) or an HTML element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `closeDelay` | `close-delay` | public | `number` | `0` | Close the popover after a certain delay. | | `hideCloseButton` | `hide-close-button` | public | `boolean \| undefined` | `false` | Whether the close button should be hidden. | | `hoverTrigger` | `hover-trigger` | public | `boolean` | `false` | Whether the popover should be triggered on hover. | | `openDelay` | `open-delay` | public | `number` | `0` | Open the popover after a certain delay. | -| `closeDelay` | `close-delay` | public | `number` | `0` | Close the popover after a certain delay. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `trigger` | `trigger` | public | `string \| HTMLElement \| undefined` | | The element that will trigger the popover overlay. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ----------------------------------- | --------------------- | ------ | -------------- | -| `open` | public | Opens the popover on trigger click. | | `void` | | | `close` | public | Closes the popover. | `target: HTMLElement` | `void` | | +| `open` | public | Opens the popover on trigger click. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------------------------------- | -------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-popover` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-popover` is opened. | | | `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-popover` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/radio-button/radio-button-group/readme.md b/src/components/radio-button/radio-button-group/readme.md index 0a6529c62d..dc5efca058 100644 --- a/src/components/radio-button/radio-button-group/readme.md +++ b/src/components/radio-button/radio-button-group/readme.md @@ -72,20 +72,20 @@ In order to ensure readability for screen-readers, please provide an `aria-label | Name | Attribute | Privacy | Type | Default | Description | | --------------------- | ----------------------- | ------- | -------------------------------- | -------------- | --------------------------------------------------------- | | `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radios can be deselected. | -| `required` | `required` | public | `boolean` | `false` | Whether the radio group is required. | -| `value` | `value` | public | `any \| null \| undefined` | | The value of the radio group. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant, either m or s. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Radio group's orientation, either horizontal or vertical. | | `radioButtons` | - | public | `SbbRadioButtonElement[]` | | List of contained radio buttons. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `required` | `required` | public | `boolean` | `false` | Whether the radio group is required. | +| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant, either m or s. | +| `value` | `value` | public | `any \| null \| undefined` | | The value of the radio group. | ## Events | Name | Type | Description | Inherited From | | ----------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. | | | `change` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | +| `didChange` | `CustomEvent` | Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. | | | `input` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | ## Slots diff --git a/src/components/radio-button/radio-button/readme.md b/src/components/radio-button/radio-button/readme.md index aecc3b77f5..1871560da0 100644 --- a/src/components/radio-button/radio-button/readme.md +++ b/src/components/radio-button/radio-button/readme.md @@ -53,12 +53,12 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | Name | Attribute | Privacy | Type | Default | Description | | --------------------- | ----------------------- | ------- | ------------------------------------ | ------- | ---------------------------------------------- | | `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `value` | `value` | public | `string \| undefined` | | Value of radio button. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the radio button is disabled. | -| `required` | `required` | public | `boolean` | `false` | Whether the radio button is required. | | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | +| `required` | `required` | public | `boolean` | `false` | Whether the radio button is required. | | `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Label size variant, either m or s. | +| `value` | `value` | public | `string \| undefined` | | Value of radio button. | ## Methods diff --git a/src/components/select/readme.md b/src/components/select/readme.md index 96cfbc1798..1a5949e6eb 100644 --- a/src/components/select/readme.md +++ b/src/components/select/readme.md @@ -106,33 +106,33 @@ Opened panel: | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | --------------------------------- | ------- | ------------------------------------------------------------------------ | -| `value` | `value` | public | `string \| string[] \| undefined` | | The value of the select component. If `multiple` is true, it's an array. | -| `placeholder` | `placeholder` | public | `string \| undefined` | | The placeholder used if no value has been selected. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | -| `required` | `required` | public | `boolean` | `false` | Whether the select is required. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `placeholder` | `placeholder` | public | `string \| undefined` | | The placeholder used if no value has been selected. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | +| `required` | `required` | public | `boolean` | `false` | Whether the select is required. | +| `value` | `value` | public | `string \| string[] \| undefined` | | The value of the select component. If `multiple` is true, it's an array. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | ------- | --------------------------------- | ---------- | -------- | -------------- | -| `open` | public | Opens the selection panel. | | `void` | | | `close` | public | Closes the selection panel. | | `void` | | | `getDisplayValue` | public | Gets the current displayed value. | | `string` | | +| `open` | public | Opens the selection panel. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Notifies that the component's value has changed. | | -| `input` | `CustomEvent` | Notifies that an option value has been selected. | | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-select` is opened. | | +| `input` | `CustomEvent` | Notifies that an option value has been selected. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-select` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/selection-panel/readme.md b/src/components/selection-panel/readme.md index 7025813ae3..9d1530822a 100644 --- a/src/components/selection-panel/readme.md +++ b/src/components/selection-panel/readme.md @@ -79,18 +79,18 @@ It's also possible to display the `sbb-selection-panel` without border by settin | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------ | ------- | ------------------- | --------- | ---------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | | `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | | `forceOpen` | `force-open` | public | `boolean` | `false` | Whether the content section is always visible. | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the content section is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the content section is opened. | | | `willClose` | `CustomEvent` | Emits whenever the content section begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the content section is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | ## Slots diff --git a/src/components/signet/readme.md b/src/components/signet/readme.md index ba9c72cf17..cfe429e9b6 100644 --- a/src/components/signet/readme.md +++ b/src/components/signet/readme.md @@ -25,5 +25,5 @@ Possible values are `ideal` (default), `minimal` and `none`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | -------------------------------- | --------- | -------------------------------------------------------------------- | -| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | | `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the inner SVG signet. | +| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | diff --git a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js index 02292a566b..333e936a01 100644 --- a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js +++ b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js @@ -52,10 +52,8 @@ snapshots["sbb-skiplink-list renders Dom"] = href="#" icon-placement="start" negative="" - role="link" size="m" slot="li-0" - tabindex="0" > Link 1 @@ -68,10 +66,8 @@ snapshots["sbb-skiplink-list renders Dom"] = href="#" icon-placement="start" negative="" - role="link" size="m" slot="li-1" - tabindex="0" > Link 2 @@ -84,10 +80,8 @@ snapshots["sbb-skiplink-list renders Dom"] = href="#" icon-placement="start" negative="" - role="link" size="m" slot="li-2" - tabindex="0" > Link 3 @@ -150,10 +144,8 @@ snapshots["sbb-skiplink-list renders with title Dom"] = href="https://www.sbb.ch" icon-placement="start" negative="" - role="link" size="m" slot="li-0" - tabindex="0" > Link 1 @@ -166,10 +158,8 @@ snapshots["sbb-skiplink-list renders with title Dom"] = href="https://www.sbb.ch" icon-placement="start" negative="" - role="link" size="m" slot="li-1" - tabindex="0" > Link 2 @@ -182,10 +172,8 @@ snapshots["sbb-skiplink-list renders with title Dom"] = href="https://www.sbb.ch" icon-placement="start" negative="" - role="link" size="m" slot="li-2" - tabindex="0" > Link 3 @@ -247,33 +235,15 @@ snapshots["sbb-skiplink-list renders with title A11y tree Chrome"] = }, { "role": "link", - "name": "Link 1", - "children": [ - { - "role": "link", - "name": "Link 1" - } - ] + "name": "Link 1" }, { "role": "link", - "name": "Link 2", - "children": [ - { - "role": "link", - "name": "Link 2" - } - ] + "name": "Link 2" }, { "role": "link", - "name": "Link 3", - "children": [ - { - "role": "link", - "name": "Link 3" - } - ] + "name": "Link 3" } ] } @@ -295,35 +265,17 @@ snapshots["sbb-skiplink-list renders with title A11y tree Firefox"] = { "role": "link", "name": "Link 1", - "children": [ - { - "role": "link", - "name": "Link 1", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" }, { "role": "link", "name": "Link 2", - "children": [ - { - "role": "link", - "name": "Link 2", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" }, { "role": "link", "name": "Link 3", - "children": [ - { - "role": "link", - "name": "Link 3", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts index 8743a7df7c..6959aba11f 100644 --- a/src/components/skiplink-list/skiplink-list.stories.ts +++ b/src/components/skiplink-list/skiplink-list.stories.ts @@ -1,4 +1,4 @@ -import { userEvent, within } from '@storybook/test'; +import { within } from '@storybook/test'; import type { InputType } from '@storybook/types'; import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; @@ -106,7 +106,7 @@ const playStory = async ({ canvasElement }: StoryContext): Promise => { canvas.getByTestId('skiplink')?.shadowRoot?.querySelectorAll('.sbb-skiplink-list__wrapper'), ); await waitForStablePosition(() => canvas.getByTestId('skiplink')); - userEvent.tab(); + document.querySelector('sbb-block-link')?.focus(); }; const Template = ({ diff --git a/src/components/slider/readme.md b/src/components/slider/readme.md index c1a751e029..8f5f9132b2 100644 --- a/src/components/slider/readme.md +++ b/src/components/slider/readme.md @@ -72,23 +72,23 @@ The `sbb-slider` has the following behaviour on keypress when focused: | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ----------------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | `value` | public | `string \| undefined` | `''` | Value for the inner HTMLInputElement. | -| `valueAsNumber` | `value-as-number` | public | `number \| undefined` | | Numeric value for the inner HTMLInputElement. | -| `name` | `name` | public | `string \| undefined` | `''` | Name of the inner HTMLInputElement. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `endIcon` | `end-icon` | public | `string \| undefined` | | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | | `form` | `form` | public | `string \| undefined` | | The element to associate the inner HTMLInputElement with. | -| `min` | `min` | public | `string \| undefined` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | | `max` | `max` | public | `string \| undefined` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | +| `min` | `min` | public | `string \| undefined` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | +| `name` | `name` | public | `string \| undefined` | `''` | Name of the inner HTMLInputElement. | | `readonly` | `readonly` | public | `boolean \| undefined` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | | `startIcon` | `start-icon` | public | `string \| undefined` | | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | -| `endIcon` | `end-icon` | public | `string \| undefined` | | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `value` | `value` | public | `string \| undefined` | `''` | Value for the inner HTMLInputElement. | +| `valueAsNumber` | `value-as-number` | public | `number \| undefined` | | Numeric value for the inner HTMLInputElement. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `InputEvent` | | | | `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `input` | `InputEvent` | | | ## Slots diff --git a/src/components/status/readme.md b/src/components/status/readme.md index 4f4c30ddc3..01c2820745 100644 --- a/src/components/status/readme.md +++ b/src/components/status/readme.md @@ -51,15 +51,15 @@ If needed, the `role="status"` attribute can be added on the component's tag. | Name | Attribute | Privacy | Type | Default | Description | | -------------- | --------------- | ------- | --------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | ## Slots | Name | Description | | ------- | ---------------------------------------------------------- | | | Use the unnamed slot to add content to the status message. | -| `title` | Use this to provide a title for the status (optional). | | `icon` | Use this slot to override the default status icon. | +| `title` | Use this to provide a title for the status (optional). | diff --git a/src/components/tabs/tab-group/readme.md b/src/components/tabs/tab-group/readme.md index 373ed6ddc8..2fb6a1802f 100644 --- a/src/components/tabs/tab-group/readme.md +++ b/src/components/tabs/tab-group/readme.md @@ -42,16 +42,16 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro | Name | Attribute | Privacy | Type | Default | Description | | ---------------------- | ------------------------ | ------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l'` | Size variant, either l or xl. | | `initialSelectedIndex` | `initial-selected-index` | public | `number` | `0` | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. | +| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l'` | Size variant, either l or xl. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------- | ------- | ------------------------- | ------------------ | ------ | -------------- | +| `activateTab` | public | Activates a tab by index. | `tabIndex: number` | `void` | | | `disableTab` | public | Disables a tab by index. | `tabIndex: number` | `void` | | | `enableTab` | public | Enables a tab by index. | `tabIndex: number` | `void` | | -| `activateTab` | public | Activates a tab by index. | `tabIndex: number` | `void` | | ## Events diff --git a/src/components/tabs/tab-title/readme.md b/src/components/tabs/tab-title/readme.md index bc00789461..2d9675614f 100644 --- a/src/components/tabs/tab-title/readme.md +++ b/src/components/tabs/tab-title/readme.md @@ -39,16 +39,16 @@ It is possible to display the component in `disabled` state by using the self-na | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `level` | `level` | public | `SbbTitleLevel` | `'1'` | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. | | `active` | `active` | public | `boolean \| undefined` | | Active tab state | | `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tab. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `level` | `level` | public | `SbbTitleLevel` | `'1'` | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. | ## Slots | Name | Description | | -------- | ------------------------------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the tab title. | -| `icon` | Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component. | | `amount` | Provide a number to show an amount to the right of the title. | +| `icon` | Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component. | diff --git a/src/components/tag/tag-group/readme.md b/src/components/tag/tag-group/readme.md index 3f2975a6f0..f984864100 100644 --- a/src/components/tag/tag-group/readme.md +++ b/src/components/tag/tag-group/readme.md @@ -88,8 +88,8 @@ that communicates the collective meaning of all `sbb-tag`s. | ------------------------ | -------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. | | `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | -| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | | `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | +| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | ## Slots diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 233a6cddb9..61fd6dd540 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -51,25 +51,25 @@ The state is reflected via `aria-pressed` attribute. | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | | `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `CustomEvent` | Input event emitter | | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Change event emitter | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `input` | `CustomEvent` | Input event emitter | | ## Slots | Name | Description | | -------- | --------------------------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the tag label. | -| `icon` | Use this slot to display an icon at the component start, by providing a `sbb-icon` component. | | `amount` | Provide an amount to show it at the component end. | +| `icon` | Use this slot to display an icon at the component start, by providing a `sbb-icon` component. | diff --git a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js index 5064e9c634..a395faacd4 100644 --- a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js +++ b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js @@ -3,10 +3,9 @@ export const snapshots = {}; snapshots["sbb-teaser-hero should render with slots"] = `

@@ -36,7 +35,7 @@ snapshots["sbb-teaser-hero should render with slots"] = snapshots["sbb-teaser-hero should render all properties Dom"] = ` Break out and explore castles and palaces. @@ -56,11 +53,10 @@ snapshots["sbb-teaser-hero should render all properties Dom"] = snapshots["sbb-teaser-hero should render all properties ShadowDom"] = ` @@ -106,13 +102,7 @@ snapshots["sbb-teaser-hero should render all properties A11y tree Chrome"] = "children": [ { "role": "link", - "name": "label", - "children": [ - { - "role": "link", - "name": "Break out and explore castles and palaces. Find out more . Link target opens in a new window." - } - ] + "name": "label" } ] } @@ -129,13 +119,7 @@ snapshots["sbb-teaser-hero should render all properties A11y tree Firefox"] = { "role": "link", "name": "label", - "children": [ - { - "role": "link", - "name": "Break out and explore castles and palaces. Find out more . Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/teaser-hero/readme.md b/src/components/teaser-hero/readme.md index 753674b3a8..74023bcf76 100644 --- a/src/components/teaser-hero/readme.md +++ b/src/components/teaser-hero/readme.md @@ -34,20 +34,21 @@ Avoid slotting block elements (e.g. `div`) as this violates semantic rules and c ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------- | -------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | -| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. | -| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. | -| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. | +| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. | +| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots | Name | Description | | -------------- | ----------------------------------------------------- | | | Use the unnamed slot to add text content to the panel | -| `link-content` | Link content of the panel | | `image` | The background image that can be a `sbb-image` | +| `link-content` | Link content of the panel | diff --git a/src/components/teaser-hero/teaser-hero.scss b/src/components/teaser-hero/teaser-hero.scss index c4cd136527..8e89806e94 100644 --- a/src/components/teaser-hero/teaser-hero.scss +++ b/src/components/teaser-hero/teaser-hero.scss @@ -28,7 +28,7 @@ min-height: var(--sbb-panel-height); // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; } } diff --git a/src/components/teaser-hero/teaser-hero.spec.ts b/src/components/teaser-hero/teaser-hero.spec.ts index fd8113d68c..e283860c18 100644 --- a/src/components/teaser-hero/teaser-hero.spec.ts +++ b/src/components/teaser-hero/teaser-hero.spec.ts @@ -16,7 +16,7 @@ describe(`sbb-teaser-hero`, () => { beforeEach(async () => { element = await fixture( html` { it('should render with slots', async () => { const root = await fixture( - html`Break out and explore castles and palaces.Find out more { expect(root).dom.to.be.equal( ` - + Break out and explore castles and palaces. Find out more diff --git a/src/components/teaser-hero/teaser-hero.stories.ts b/src/components/teaser-hero/teaser-hero.stories.ts index 285cc33249..b811935d00 100644 --- a/src/components/teaser-hero/teaser-hero.stories.ts +++ b/src/components/teaser-hero/teaser-hero.stories.ts @@ -10,7 +10,7 @@ import sampleImages from '../core/images.js'; import readme from './readme.md?raw'; import './teaser-hero.js'; -const ariaLabel: InputType = { +const accessibilityLabel: InputType = { control: { type: 'text', }, @@ -81,7 +81,7 @@ const imageAlt: InputType = { }; const defaultArgTypes: ArgTypes = { - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, href, rel, target, @@ -92,7 +92,7 @@ const defaultArgTypes: ArgTypes = { }; const defaultArgs: Args = { - 'aria-label': undefined, + 'accessibility-label': undefined, href: href.options![0], rel: undefined, target: undefined, diff --git a/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js b/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js index 7d9e9400b4..e5add280c0 100644 --- a/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js +++ b/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js @@ -3,14 +3,12 @@ export const snapshots = {}; snapshots["sbb-teaser-paid Dom"] = ` @@ -19,11 +17,10 @@ snapshots["sbb-teaser-paid Dom"] = snapshots["sbb-teaser-paid ShadowDom"] = ` @@ -45,13 +42,7 @@ snapshots["sbb-teaser-paid A11y tree Chrome"] = "children": [ { "role": "link", - "name": "label", - "children": [ - { - "role": "link", - "name": ". Link target opens in a new window." - } - ] + "name": "label" } ] } @@ -68,13 +59,7 @@ snapshots["sbb-teaser-paid A11y tree Firefox"] = { "role": "link", "name": "label", - "children": [ - { - "role": "link", - "name": ". Link target opens in a new window.", - "value": "https://www.sbb.ch/" - } - ] + "value": "https://www.sbb.ch/" } ] } diff --git a/src/components/teaser-paid/readme.md b/src/components/teaser-paid/readme.md index 498974dc59..d1713ff2db 100644 --- a/src/components/teaser-paid/readme.md +++ b/src/components/teaser-paid/readme.md @@ -15,12 +15,13 @@ The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/teaser-paid/teaser-paid.scss b/src/components/teaser-paid/teaser-paid.scss index e3eaf09fab..bc6a6a5203 100644 --- a/src/components/teaser-paid/teaser-paid.scss +++ b/src/components/teaser-paid/teaser-paid.scss @@ -31,7 +31,7 @@ display: block; // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; } } diff --git a/src/components/teaser-paid/teaser-paid.spec.ts b/src/components/teaser-paid/teaser-paid.spec.ts index 4b110c95bd..8ac3487cf7 100644 --- a/src/components/teaser-paid/teaser-paid.spec.ts +++ b/src/components/teaser-paid/teaser-paid.spec.ts @@ -13,7 +13,7 @@ describe(`sbb-teaser-paid`, () => { beforeEach(async () => { element = await fixture( html` `; @@ -18,10 +16,9 @@ snapshots["sbb-teaser renders after centered DOM"] = snapshots["sbb-teaser renders after centered Shadow DOM"] = ` @@ -66,13 +63,7 @@ snapshots["sbb-teaser renders after centered A11y tree Firefox"] = { "role": "link", "name": "SBB teaser", - "children": [ - { - "role": "link", - "name": "​", - "value": "https://github.com/lyne-design-system/lyne-components" - } - ] + "value": "https://github.com/lyne-design-system/lyne-components" } ] } @@ -82,14 +73,12 @@ snapshots["sbb-teaser renders after centered A11y tree Firefox"] = snapshots["sbb-teaser renders after with title level set DOM"] = ` @@ -98,10 +87,9 @@ snapshots["sbb-teaser renders after with title level set DOM"] = snapshots["sbb-teaser renders after with title level set Shadow DOM"] = ` @@ -139,15 +127,13 @@ snapshots["sbb-teaser renders after with title level set Shadow DOM"] = snapshots["sbb-teaser renders below with projected content DOM"] = ` 400x300 @@ -214,13 +199,7 @@ snapshots["sbb-teaser renders after centered A11y tree Chrome"] = "children": [ { "role": "link", - "name": "SBB teaser", - "children": [ - { - "role": "link", - "name": "​" - } - ] + "name": "SBB teaser" } ] } diff --git a/src/components/teaser/readme.md b/src/components/teaser/readme.md index 21ecb3cb4f..0bf0d8f74c 100644 --- a/src/components/teaser/readme.md +++ b/src/components/teaser/readme.md @@ -52,22 +52,23 @@ Avoid slotting block elements (e.g. `

`) as this violates semantic rules and ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------- | --------------- | ------- | ---------------------------------------- | ------------------ | ------------------------------------------------------------------------- | -| `alignment` | `alignment` | public | `'after-centered' \| 'after' \| 'below'` | `'after-centered'` | Teaser variant - define the position and the alignment of the text block. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'5'` | Heading level of the sbb-title element (e.g. h1-h6). | -| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | -| `chipContent` | `chip-content` | public | `string \| undefined` | | Content of chip. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | ---------------------------------------- | ------------------ | ------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `alignment` | `alignment` | public | `'after-centered' \| 'after' \| 'below'` | `'after-centered'` | Teaser variant - define the position and the alignment of the text block. | +| `chipContent` | `chip-content` | public | `string \| undefined` | | Content of chip. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'5'` | Heading level of the sbb-title element (e.g. h1-h6). | ## Slots | Name | Description | | ------- | ----------------------------------------------- | -| `image` | Slot used to render the image. | +| | Use the unnamed slot to render the description. | | `chip` | Slot used to render the sbb-chip label. | +| `image` | Slot used to render the image. | | `title` | Slot used to render the title. | -| | Use the unnamed slot to render the description. | diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss index ea91fd4790..4aeed1837b 100644 --- a/src/components/teaser/teaser.scss +++ b/src/components/teaser/teaser.scss @@ -42,7 +42,7 @@ text-decoration: none; // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components. - :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & { + :host(:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) &:focus-visible { @include sbb.focus-outline; border-radius: var(--sbb-teaser-border-radius); diff --git a/src/components/teaser/teaser.spec.ts b/src/components/teaser/teaser.spec.ts index cb83218b1c..81805e3253 100644 --- a/src/components/teaser/teaser.spec.ts +++ b/src/components/teaser/teaser.spec.ts @@ -17,7 +17,7 @@ describe(`sbb-teaser`, () => { html``, ); }); @@ -39,7 +39,7 @@ describe(`sbb-teaser`, () => { html``, ); @@ -59,7 +59,7 @@ describe(`sbb-teaser`, () => { element = await fixture( html` 400x300 diff --git a/src/components/teaser/teaser.stories.ts b/src/components/teaser/teaser.stories.ts index 7dba0ac814..6ba46f66f4 100644 --- a/src/components/teaser/teaser.stories.ts +++ b/src/components/teaser/teaser.stories.ts @@ -59,7 +59,7 @@ const description: InputType = { }, }; -const ariaLabel: InputType = { +const accessibilityLabel: InputType = { control: { type: 'text', }, @@ -71,7 +71,7 @@ const defaultArgTypes: ArgTypes = { alignment, href, description, - 'aria-label': ariaLabel, + 'accessibility-label': accessibilityLabel, }; const defaultArgs: Args = { @@ -80,7 +80,7 @@ const defaultArgs: Args = { alignment: 'after-centered', href: href.options![1], description: 'This is a paragraph', - 'aria-label': + 'accessibility-label': 'The text which gets exposed to screen reader users. The text should reflect all the information which gets passed into the components slots and which is visible in the Teaser, either through text or iconography', }; diff --git a/src/components/timetable-occupancy-icon/readme.md b/src/components/timetable-occupancy-icon/readme.md index be3a2d1991..484e0c9e0c 100644 --- a/src/components/timetable-occupancy-icon/readme.md +++ b/src/components/timetable-occupancy-icon/readme.md @@ -24,13 +24,13 @@ In high contrast mode, in both light and dark variant, the rendered icon changes | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `occupancy` | `occupancy` | public | `SbbOccupancy` | | Wagon occupancy. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `noSanitize` | `no-sanitize` | public | `boolean` | `false` | When set to `true`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `