diff --git a/.changeset/green-crabs-talk.md b/.changeset/green-crabs-talk.md new file mode 100644 index 0000000000..69b8b65378 --- /dev/null +++ b/.changeset/green-crabs-talk.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Fixed accessibility issue in the `` component by wrapping breadcrumb items in `
  • ` elements. diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 51bccf2ea9..d2cca62794 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -325,7 +325,7 @@ export namespace Components { */ "hide": () => Promise; /** - * Required label providing an accessible name for the menu. + * An accessible name for the menu. */ "label"?: string; /** @@ -1201,7 +1201,7 @@ declare namespace LocalJSX { } interface PostMenu { /** - * Required label providing an accessible name for the menu. + * An accessible name for the menu. */ "label"?: string; /** @@ -1260,7 +1260,7 @@ declare namespace LocalJSX { */ "manualClose"?: boolean; /** - * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was * closed, and `first`, which is true if it was opened for the first time. + * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was closed, and `first`, which is true if it was opened for the first time. */ "onPostToggle"?: (event: PostPopovercontainerCustomEvent<{ isOpen: boolean; first?: boolean }>) => void; /** diff --git a/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.scss b/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.scss index ed96c9df3f..afb9e6a291 100644 --- a/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.scss +++ b/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.scss @@ -167,7 +167,7 @@ post-menu::part(popover-container) { } } -post-breadcrumb-item:last-of-type { +li[aria-current="page"] post-breadcrumb-item { pointer-events: none; color: tokens.get('breadcrumb-selected-fg'); font-weight: tokens.get('breadcrumb-selected-font-weight'); diff --git a/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.tsx b/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.tsx index 0b5f130725..58b4ace4e1 100644 --- a/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.tsx +++ b/packages/components/src/components/post-breadcrumbs/post-breadcrumbs.tsx @@ -139,7 +139,7 @@ export class PostBreadcrumbs { {/* Conditionally render concatenated menu or individual breadcrumb items */} {this.isConcatenated ? ( - - +
  • ) : ( visibleItems.map(item => ( - - {item.text} - +
  • + + {item.text} + +
  • )) )} {this.lastItem && ( - - {this.lastItem.text} - +
  • + + {this.lastItem.text} + +
  • )} diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md index 648f82a515..86fc4d13a2 100644 --- a/packages/components/src/components/post-menu/readme.md +++ b/packages/components/src/components/post-menu/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `label` | `label` | Required label providing an accessible name for the menu. | `string` | `undefined` | +| `label` | `label` | An accessible name for the menu. | `string` | `undefined` | | `placement` | `placement` | Defines the position of the menu relative to its trigger. Menus are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement). | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` | diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md index fb865cc7b3..2fa98dec60 100644 --- a/packages/components/src/components/post-popovercontainer/readme.md +++ b/packages/components/src/components/post-popovercontainer/readme.md @@ -17,9 +17,9 @@ ## Events -| Event | Description | Type | -| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -| `postToggle` | Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was * closed, and `first`, which is true if it was opened for the first time. | `CustomEvent<{ isOpen: boolean; first?: boolean; }>` | +| Event | Description | Type | +| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | +| `postToggle` | Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was closed, and `first`, which is true if it was opened for the first time. | `CustomEvent<{ isOpen: boolean; first?: boolean; }>` | ## Methods