diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 72d9321a..8f969289 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1912,16 +1912,17 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | No | let | No | string | "alert" | Set the `role` attribute | -| title | No | let | No | string | "" | Specify the title text | -| subtitle | No | let | No | string | "" | Specify the subtitle text | -| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | -| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | No | let | No | string | "alert" | Set the `role` attribute | +| title | No | let | No | string | "" | Specify the title text | +| subtitle | No | let | No | string | "" | Specify the subtitle text | +| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | +| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon | +| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button | ### Slots @@ -2448,11 +2449,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | -| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | -| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | +| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| iconDescription | Yes | let | No | -- | undefined | Specify the ARIA label for the icon | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index dd6a17b7..01f0c082 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5627,11 +5627,23 @@ "reactive": false }, { - "name": "iconDescription", + "name": "statusIconDescription", "kind": "let", - "description": "Specify the ARIA label for the icon", + "description": "Specify the ARIA label for the status icon", "type": "string", - "value": "\"Closes notification\"", + "value": "kind + \" icon\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "closeButtonDescription", + "kind": "let", + "description": "Specify the ARIA label for the close button", + "type": "string", + "value": "\"Close notification\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7486,11 +7498,9 @@ "name": "iconDescription", "kind": "let", "description": "Specify the ARIA label for the icon", - "type": "string", - "value": "\"Closes notification\"", "isFunction": false, "isFunctionDeclaration": false, - "isRequired": false, + "isRequired": true, "constant": false, "reactive": false } @@ -8511,7 +8521,8 @@ { "type": "dispatched", "name": "change", - "detail": "{ page: number; }" + "detail": "{ page: number; }", + "description": "fires after every user interaction" }, { "type": "dispatched", diff --git a/docs/src/pages/components/InlineNotification.svx b/docs/src/pages/components/InlineNotification.svx index 1652fac1..cca32a98 100644 --- a/docs/src/pages/components/InlineNotification.svx +++ b/docs/src/pages/components/InlineNotification.svx @@ -27,6 +27,19 @@ components: ["InlineNotification", "NotificationActionButton"] An internal server error occurred. +## Accessible icon descriptions + +The status icon and close button icon descriptions appear on cursor hover and are read +by assistive technology. Default descriptions are provided in English and can be +overridden via `statusIconDescription` and `closeButtonDescription`. + + + ## Hidden close button diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte index 4cd57717..5bde027e 100644 --- a/src/Notification/InlineNotification.svelte +++ b/src/Notification/InlineNotification.svelte @@ -27,8 +27,14 @@ /** Set to `true` to hide the close button */ export let hideCloseButton = false; - /** Specify the ARIA label for the icon */ - export let iconDescription = "Closes notification"; + /** + * Specify the ARIA label for the status icon + * @type {string} + * */ + export let statusIconDescription = kind + " icon"; + + /** Specify the ARIA label for the close button */ + export let closeButtonDescription = "Close notification"; import { createEventDispatcher, onMount } from "svelte"; import NotificationIcon from "./NotificationIcon.svelte"; @@ -82,7 +88,11 @@ on:mouseleave >
- +

{title} @@ -96,7 +106,7 @@ {#if !hideCloseButton} diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte index dc6defa8..f106c4b5 100644 --- a/src/Notification/NotificationIcon.svelte +++ b/src/Notification/NotificationIcon.svelte @@ -12,7 +12,7 @@ export let notificationType = "toast"; /** Specify the ARIA label for the icon */ - export let iconDescription = "Closes notification"; + export let iconDescription; import CheckmarkFilled from "../icons/CheckmarkFilled.svelte"; import ErrorFilled from "../icons/ErrorFilled.svelte"; diff --git a/types/Notification/InlineNotification.svelte.d.ts b/types/Notification/InlineNotification.svelte.d.ts index 882dab94..454455de 100644 --- a/types/Notification/InlineNotification.svelte.d.ts +++ b/types/Notification/InlineNotification.svelte.d.ts @@ -52,10 +52,16 @@ export interface InlineNotificationProps hideCloseButton?: boolean; /** - * Specify the ARIA label for the icon - * @default "Closes notification" + * Specify the ARIA label for the status icon + * @default kind + " icon" */ - iconDescription?: string; + statusIconDescription?: string; + + /** + * Specify the ARIA label for the close button + * @default "Close notification" + */ + closeButtonDescription?: string; } export default class InlineNotification extends SvelteComponentTyped< diff --git a/types/Notification/NotificationIcon.svelte.d.ts b/types/Notification/NotificationIcon.svelte.d.ts index c75da8b9..9e69e5b9 100644 --- a/types/Notification/NotificationIcon.svelte.d.ts +++ b/types/Notification/NotificationIcon.svelte.d.ts @@ -22,9 +22,9 @@ export interface NotificationIconProps { /** * Specify the ARIA label for the icon - * @default "Closes notification" + * @default undefined */ - iconDescription?: string; + iconDescription: undefined; } export default class NotificationIcon extends SvelteComponentTyped< diff --git a/types/PaginationNav/PaginationNav.svelte.d.ts b/types/PaginationNav/PaginationNav.svelte.d.ts index 15193cad..adb27598 100644 --- a/types/PaginationNav/PaginationNav.svelte.d.ts +++ b/types/PaginationNav/PaginationNav.svelte.d.ts @@ -43,6 +43,7 @@ export interface PaginationNavProps export default class PaginationNav extends SvelteComponentTyped< PaginationNavProps, { + /** fires after every user interaction */ change: CustomEvent<{ page: number }>; ["click:button--previous"]: CustomEvent<{ page: number }>; ["click:button--next"]: CustomEvent<{ page: number }>;