feat(a11y): improve a11y for components (#14609)

- QBadge: role status instead of alert
- QDialog: role dialog
- QBottomSheet: role list/listitem
- QItem: role listitem
- QList: role list
- QOptionGroup: role group if not radiogroup
- QPagination: role navigation; aria-label; aria-current
- QToolbar: role toolbar
- QTooltip: role tooltip instead of complementary
- QToggle: role switch

ui/src/components/badge/QBadge.js

@@ -53,7 +53,7 @@ export default createComponent({
     return () => h('div', {
       class: classes.value,
       style: style.value,
-      role: 'alert',
+      role: 'status',
       'aria-label': props.label
     }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
   }

ui/src/components/checkbox/use-checkbox.js

@@ -127,7 +127,7 @@ export default function (type, getInner) {
   const attributes = computed(() => {
     const attrs = {
       tabindex: tabindex.value,
-      role: 'checkbox',
+      role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
       'aria-checked': isIndeterminate.value === true
         ? 'mixed'

ui/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -70,6 +70,7 @@ export default createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action) },
             onKeyup (e) { e.keyCode === 13 && onOk(action) }
           }, [
@@ -145,9 +146,12 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       )
 
       return child

ui/src/components/dialog/QDialog.js

@@ -376,7 +376,8 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [

ui/src/components/item/QItem.js

@@ -136,6 +136,7 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       }

ui/src/components/item/QList.js

@@ -29,6 +29,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 })

ui/src/components/option-group/QOptionGroup.js

@@ -74,7 +74,7 @@ export default createComponent({
     )
 
     const attrs = computed(() => {
-      const attrs = {}
+      const attrs = { role: 'group' }
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup'

ui/src/components/pagination/QPagination.js

@@ -148,11 +148,10 @@ export default createComponent({
       return $q.lang.rtl === true ? ico.reverse() : ico
     })
 
-    const attrs = computed(() => (
-      props.disable === true
-        ? { 'aria-disabled': 'true' }
-        : {}
-    ))
+    const attrs = computed(() => ({
+      'aria-disabled': props.disable === true ? 'true' : 'false',
+      role: 'navigation'
+    }))
 
     const btnProps = computed(() => ({
       round: props.round,
@@ -193,8 +192,13 @@ export default createComponent({
       newPage.value = null
     }
 
-    function getBtn (cfg, page) {
-      const data = { ...btnProps.value, ...cfg }
+    function getBtn (cfg, page, active) {
+      const data = {
+        'aria-label': page,
+        'aria-current': active === true ? 'true' : 'false',
+        ...btnProps.value,
+        ...cfg
+      }
 
       if (page !== void 0) {
         if (props.toFn !== void 0) {
@@ -311,7 +315,7 @@ export default createComponent({
             flat: !active,
             label: props.min,
             ...(active ? activeBtnProps.value : {})
-          }, props.min))
+          }, props.min, active))
         }
         if (boundaryEnd) {
           const active = props.max === props.modelValue
@@ -322,7 +326,7 @@ export default createComponent({
             flat: !active,
             label: props.max,
             ...(active ? activeBtnProps.value : {})
-          }, props.max))
+          }, props.max, active))
         }
         if (ellipsesStart) {
           contentStart.push(getBtn({
@@ -352,7 +356,7 @@ export default createComponent({
           if (i === props.modelValue) {
             Object.assign(btn, activeBtnProps.value)
           }
-          contentMiddle.push(getBtn(btn, i))
+          contentMiddle.push(getBtn(btn, i, i === props.modelValue))
         }
       }
 

ui/src/components/stepper/QStep.js

@@ -121,7 +121,7 @@ export default createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
+      { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {

ui/src/components/tab-panels/QTabPanel.js

@@ -11,6 +11,6 @@ export default createComponent({
   props: usePanelChildProps,
 
   setup (_, { slots }) {
-    return () => h('div', { class: 'q-tab-panel' }, hSlot(slots.default))
+    return () => h('div', { class: 'q-tab-panel', role: 'tabpanel' }, hSlot(slots.default))
   }
 })

ui/src/components/toolbar/QToolbar.js

@@ -16,6 +16,6 @@ export default createComponent({
       + (props.inset === true ? ' q-toolbar--inset' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
   }
 })

ui/src/components/tooltip/QTooltip.js

@@ -285,7 +285,7 @@ export default createComponent({
             attrs.style,
             transitionStyle.value
           ],
-          role: 'complementary'
+          role: 'tooltip'
         }, hSlot(slots.default))
         : null
     }