feat(a11y): improve refocus after popup close with ESC; improve compo…

…nents with popups (#14784)

* fix(QFab): fix selector specificity when open with rtlcss enabled

* feat(QMenu,QDialog): refocus a kbd focusable element when closing using ESC key

* fix(QList): remove default list role because it is used now all over as role menu

* feat(QBtnDropdown,QExpansionItem,QFab,QSelect): improve a11y related to popups

- QSelect: add a11y readable value if not using multiple and if showing value in input for useInput

ui/dev/src/pages/components/fab.vue

@@ -54,7 +54,7 @@
 
       <q-fab
         class="fixed-bottom-right"
-        style="right: 18px; bottom: 86px;"
+        style="inset-inline-end: 18px; bottom: 86px;"
         icon="fas fa-address-book"
         direction="up"
         color="primary"
@@ -123,7 +123,7 @@
         direction="up"
         class="fixed-bottom-right"
         :icon="mdiMenu"
-        style="right: 18px; bottom: 18px;"
+        style="inset-inline-end: 18px; bottom: 18px;"
       >
         <template v-slot:tooltip>
           <q-tooltip ref="tooltip0" anchor="center left" self="center right" :offset="[20, 0]">

ui/src/components/btn-dropdown/QBtnDropdown.js

@@ -77,7 +77,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
       }
 

ui/src/components/dialog/QDialog.js

@@ -219,7 +219,10 @@ export default createComponent({
       hidePortal()
 
       if (refocusTarget !== null) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 
@@ -248,9 +251,9 @@ export default createComponent({
       })
     }
 
-    function shake (refocusTarget) {
-      if (refocusTarget && typeof refocusTarget.focus === 'function') {
-        refocusTarget.focus({ preventScroll: true })
+    function shake (focusTarget) {
+      if (focusTarget && typeof focusTarget.focus === 'function') {
+        focusTarget.focus({ preventScroll: true })
       }
       else {
         focus()

ui/src/components/expansion-item/QExpansionItem.js

@@ -143,7 +143,6 @@ export default createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-owns': targetUid,
         'aria-controls': targetUid,
         'aria-label': toggleAriaLabel
       }

ui/src/components/fab/QFab.js

@@ -77,13 +77,11 @@ export default createComponent({
 
     const actionAttrs = computed(() => {
       const attrs = {
-        id: targetUid
+        id: targetUid,
+        role: 'menu'
       }
 
-      if (showing.value === true) {
-        attrs.role = 'menu'
-      }
-      else {
+      if (showing.value !== true) {
         attrs[ 'aria-hidden' ] = 'true'
       }
 
@@ -152,7 +150,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 

ui/src/components/fab/QFab.sass

@@ -137,7 +137,8 @@
 
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      // needed when rtlcss is enabled
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
 
   &--align-left

ui/src/components/item/QList.js

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

ui/src/components/menu/QMenu.js

@@ -258,7 +258,10 @@ export default createComponent({
           || evt.qClickOutside !== true
         )
       ) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 

ui/src/components/select/QSelect.js

@@ -251,6 +251,11 @@ export default createComponent({
         .join(', ')
     )
 
+    const ariaCurrentValue = computed(() => (props.displayValue !== void 0
+      ? props.displayValue
+      : selectedString.value
+    ))
+
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
@@ -268,22 +273,15 @@ export default createComponent({
 
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1))
 
-    const comboboxAttrs = computed(() => ({
-      tabindex: props.tabindex,
-      role: 'combobox',
-      'aria-label': props.label,
-      'aria-readonly': props.readonly === true ? 'true' : 'false',
-      'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-      'aria-expanded': menu.value === true ? 'true' : 'false',
-      'aria-owns': `${ state.targetUid.value }_lb`,
-      'aria-controls': `${ state.targetUid.value }_lb`
-    }))
-
-    const listboxAttrs = computed(() => {
+    const comboboxAttrs = computed(() => {
       const attrs = {
-        id: `${ state.targetUid.value }_lb`,
-        role: 'listbox',
-        'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+        tabindex: props.tabindex,
+        role: 'combobox',
+        'aria-label': props.label,
+        'aria-readonly': props.readonly === true ? 'true' : 'false',
+        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
+        'aria-expanded': menu.value === true ? 'true' : 'false',
+        'aria-controls': `${ state.targetUid.value }_lb`
       }
 
       if (optionIndex.value >= 0) {
@@ -293,6 +291,12 @@ export default createComponent({
       return attrs
     })
 
+    const listboxAttrs = computed(() => ({
+      id: `${ state.targetUid.value }_lb`,
+      role: 'listbox',
+      'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+    }))
+
     const selectedScope = computed(() => {
       return innerValue.value.map((opt, i) => ({
         index: i,
@@ -935,9 +939,7 @@ export default createComponent({
 
       return [
         h('span', {
-          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: props.displayValue !== void 0
-            ? props.displayValue
-            : selectedString.value
+          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
         })
       ]
     }
@@ -992,7 +994,7 @@ export default createComponent({
         id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
-        'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+        'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
         disabled: props.disable === true,
         readonly: props.readonly === true,
         ...inputControlEvents.value
@@ -1492,8 +1494,9 @@ export default createComponent({
               key: 'd_t',
               class: 'q-select__focus-target',
               id: isTarget === true ? state.targetUid.value : void 0,
+              value: ariaCurrentValue.value,
               readonly: true,
-              'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+              'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
               ...attrs,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,