From d48f9bab2f17b5177d1e3f7b45e6e4c08c705513 Mon Sep 17 00:00:00 2001 From: xiongmao86 Date: Sat, 15 Jul 2023 23:31:37 +0800 Subject: [PATCH 1/3] fix: add aria attributes to toast --- .../ui/src/components/va-toast/VaToast.vue | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/va-toast/VaToast.vue b/packages/ui/src/components/va-toast/VaToast.vue index 65e1572677..641df729d4 100644 --- a/packages/ui/src/components/va-toast/VaToast.vue +++ b/packages/ui/src/components/va-toast/VaToast.vue @@ -3,7 +3,9 @@
() const { getColor } = useColors() @@ -112,6 +114,17 @@ export default defineComponent({ color: textColorComputed.value, })) + const computedAriaLive = computed(() => { + const role = attrs.role + if (role === 'alert' || role === 'alertdialog') { + return 'assertive' + } else if (role === 'status') { + return 'polite' + } else { + return 'off' + } + }) + const computedMessage = computed(() => (typeof props.message === 'function') ? props.message() : props.message) const destroyElement = () => { @@ -159,6 +172,7 @@ export default defineComponent({ visible, toastClasses, toastStyles, + computedAriaLive, computedMessage, onToastClick, onToastClose, From 046e243fa5da631792a032f30025d00544fcdfdd Mon Sep 17 00:00:00 2001 From: xiongmao86 Date: Sun, 16 Jul 2023 00:32:04 +0800 Subject: [PATCH 2/3] docs; add accessiblity documentation to VaToast --- packages/docs/page-config/ui-elements/toast/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/docs/page-config/ui-elements/toast/index.ts b/packages/docs/page-config/ui-elements/toast/index.ts index 287a59b291..5d6c9a47eb 100644 --- a/packages/docs/page-config/ui-elements/toast/index.ts +++ b/packages/docs/page-config/ui-elements/toast/index.ts @@ -90,6 +90,10 @@ export default definePageConfig({ description: "You can set custom onClick event to handle the click on button." }), + block.subtitle("Accessibility"), + block.paragraph("Toasts are intended to be small interruptions to your vistiors or users, it's wrap with an [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)[[target=_blank]] region, so that changes to live regions are automatically announced by screen reader without needding to move the user's focus or otherwise interrupt the user. If the conveying messages is important, you should not add the [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)[[target=_blank]] attribute that can either be [alert](https://w3c.github.io/aria/#alert)[[target=_blank]] or [alertdialog](https://w3c.github.io/aria/#alertdialog)[[target=_blank]] depending on `closeable` prop, [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)[[target=_blank]] will be computed and set to `assertive`. if messages is not important, you should manually set the [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)[[target=_blank]] attribute to [status](https://w3c.github.io/aria/#status)[[target=_blank]], and [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)[[target=_blank]] should be computed to `polite`."), + block.paragraph("Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies."), + block.subtitle("API"), block.api("VaToast", apiDescription, apiOptions), From c9d5e8e804e32bc7de96cae76888e4fe29b8bc52 Mon Sep 17 00:00:00 2001 From: xiongmao86 Date: Sun, 30 Jul 2023 21:25:53 +0800 Subject: [PATCH 3/3] Change from `attrs.role` to `props.role` --- packages/ui/src/components/va-toast/VaToast.vue | 14 +++++++------- packages/ui/src/utils/types/prop-type.ts | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/va-toast/VaToast.vue b/packages/ui/src/components/va-toast/VaToast.vue index 641df729d4..ed24ba07ae 100644 --- a/packages/ui/src/components/va-toast/VaToast.vue +++ b/packages/ui/src/components/va-toast/VaToast.vue @@ -3,7 +3,7 @@
>, default: undefined }, }, - setup (props, { emit, attrs }) { + setup (props, { emit }) { const rootElement = shallowRef() const { getColor } = useColors() @@ -115,13 +118,10 @@ export default defineComponent({ })) const computedAriaLive = computed(() => { - const role = attrs.role - if (role === 'alert' || role === 'alertdialog') { - return 'assertive' - } else if (role === 'status') { + if (props.role === 'status') { return 'polite' } else { - return 'off' + return 'assertive' } }) diff --git a/packages/ui/src/utils/types/prop-type.ts b/packages/ui/src/utils/types/prop-type.ts index 96873c327d..c30b8f3446 100644 --- a/packages/ui/src/utils/types/prop-type.ts +++ b/packages/ui/src/utils/types/prop-type.ts @@ -1,7 +1,7 @@ import type { PropType } from 'vue' /** This will accept any string, but will suggest all strings from `T`. Used for better IDE support in component props. */ -type StringWithAutocomplete = T | (string & Record) +export type StringWithAutocomplete = T | (string & Record) // Make sure to make StringType as generic to prevent type unwrapping /**