quasar 2.21.4 → 2.23.0

package/src/components/time/QTime.js

@@ -29,7 +29,7 @@ import useDatetime, {
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { __splitDate, formatDate } from '../../utils/date/date.js'
-import { position } from '../../utils/event/event.js'
+import { position, stopAndPrevent } from '../../utils/event/event.js'
 import { pad } from '../../utils/format/format.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
@@ -58,6 +58,10 @@ function getCurrentTime() {
   }
 }
 
+function preventSpace(e) {
+  if (e.keyCode === 32) stopAndPrevent(e)
+}
+
 function getWheelDist(a, b, threshold) {
   const diff = Math.abs(a - b)
   return Math.min(diff, threshold - diff)
@@ -536,11 +540,17 @@ export default createComponent({
     }
 
     function setAmOnKey(e) {
-      if (e.keyCode === 13) setAm()
+      if ([13, 32].includes(e.keyCode)) {
+        setAm()
+        stopAndPrevent(e)
+      }
     }
 
     function setPmOnKey(e) {
-      if (e.keyCode === 13) setPm()
+      if ([13, 32].includes(e.keyCode)) {
+        setPm()
+        stopAndPrevent(e)
+      }
     }
 
     function onClick(evt) {
@@ -562,9 +572,9 @@ export default createComponent({
     }
 
     function onKeyupHour(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'hour'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -598,9 +608,9 @@ export default createComponent({
     }
 
     function onKeyupMinute(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'minute'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -631,9 +641,9 @@ export default createComponent({
     }
 
     function onKeyupSecond(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'second'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -642,7 +652,7 @@ export default createComponent({
 
           if (values.length === 0) return
 
-          if (innerModel.value.seconds === null) {
+          if (innerModel.value.second === null) {
             setSecond(values[0])
           } else {
             const index =
@@ -806,7 +816,10 @@ export default createComponent({
                 ? 'q-time__link--active'
                 : 'cursor-pointer'),
             tabindex: tabindex.value,
+            role: 'button',
+            'aria-pressed': view.value === 'hour' ? 'true' : 'false',
             onClick: setView.hour,
+            onKeydown: preventSpace,
             onKeyup: onKeyupHour
           },
           stringModel.value.hour
@@ -824,6 +837,9 @@ export default createComponent({
                     ? 'q-time__link--active'
                     : 'cursor-pointer'),
                 tabindex: tabindex.value,
+                role: 'button',
+                'aria-pressed': view.value === 'minute' ? 'true' : 'false',
+                onKeydown: preventSpace,
                 onKeyup: onKeyupMinute,
                 onClick: setView.minute
               }
@@ -846,6 +862,9 @@ export default createComponent({
                       ? 'q-time__link--active'
                       : 'cursor-pointer'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': view.value === 'second' ? 'true' : 'false',
+                  onKeydown: preventSpace,
                   onKeyup: onKeyupSecond,
                   onClick: setView.second
                 }
@@ -881,7 +900,10 @@ export default createComponent({
                     'q-time__link ' +
                     (isAM.value ? 'q-time__link--active' : 'cursor-pointer'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': isAM.value ? 'true' : 'false',
                   onClick: setAm,
+                  onKeydown: preventSpace,
                   onKeyup: setAmOnKey
                 },
                 'AM'
@@ -894,7 +916,10 @@ export default createComponent({
                     'q-time__link ' +
                     (isAM.value ? 'cursor-pointer' : 'q-time__link--active'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': isAM.value ? 'false' : 'true',
                   onClick: setPm,
+                  onKeydown: preventSpace,
                   onKeyup: setPmOnKey
                 },
                 'PM'

package/src/components/tooltip/QTooltip.js

@@ -22,10 +22,15 @@ import useTransition, {
 } from '../../composables/private.use-transition/use-transition.js'
 import useTick from '../../composables/use-tick/use-tick.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
+import useId from '../../composables/use-id/use-id.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { addEvt, cleanEvt, stopAndPrevent } from '../../utils/event/event.js'
+import {
+  addEscapeKey,
+  removeEscapeKey
+} from '../../utils/private.keyboard/escape-key.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import {
@@ -39,6 +44,8 @@ import {
   validatePosition
 } from '../../utils/private.position-engine/position-engine.js'
 
+let nonSelectableCount = 0
+
 export default createComponent({
   name: 'QTooltip',
 
@@ -101,7 +108,11 @@ export default createComponent({
   emits: [...useModelToggleEmits],
 
   setup(props, { slots, emit, attrs }) {
-    let unwatchPosition, observer
+    let unwatchPosition,
+      observer,
+      removeNonSelectableTimer,
+      hasNonSelectable = false,
+      describedBy
 
     const vm = getCurrentInstance()
     const {
@@ -110,6 +121,8 @@ export default createComponent({
 
     const innerRef = ref(null)
     const showing = ref(false)
+    const targetUid = useId()
+    const tooltipId = computed(() => attrs.id || targetUid.value)
 
     const anchorOrigin = computed(() =>
       parsePosition(props.anchor, $q.lang.rtl)
@@ -137,7 +150,7 @@ export default createComponent({
       processOnMount: true
     })
 
-    Object.assign(anchorEvents, { delayShow, delayHide })
+    Object.assign(anchorEvents, { delayShow, delayHide, onFocusin })
 
     const { showPortal, hidePortal, renderPortal } = usePortal(
       vm,
@@ -182,10 +195,26 @@ export default createComponent({
       onBeforeUnmount(() => {
         removeClickOutside(clickOutsideProps)
       })
+    } else {
+      // dismiss with the ESC key (WCAG 1.4.13) without moving focus;
+      // uses the shared escape stack so only the top-most popup reacts
+      watch(
+        () =>
+          // trigger only if it doesn't have external model
+          // or else only if the model can be updated (otherwise respect the external model)
+          (props.modelValue === null || props['onUpdate:modelValue']) &&
+          showing.value === true &&
+          props.persistent !== true,
+        val => {
+          const fn = val === true ? addEscapeKey : removeEscapeKey
+          fn(onEscapeKey)
+        }
+      )
     }
 
     function handleShow(evt) {
       showPortal()
+      addAriaDescription()
 
       // should removeTick() if this gets removed
       registerTick(() => {
@@ -254,7 +283,10 @@ export default createComponent({
       }
 
       unconfigureScrollTarget()
+      removeEscapeKey(onEscapeKey)
       cleanEvt(anchorEvents, 'tooltipTemp')
+      removeAriaDescription()
+      setNonSelectable(false)
     }
 
     function updatePosition() {
@@ -271,8 +303,13 @@ export default createComponent({
 
     function delayShow(evt) {
       if ($q.platform.is.mobile) {
+        if (removeNonSelectableTimer !== void 0) {
+          clearTimeout(removeNonSelectableTimer)
+          removeNonSelectableTimer = void 0
+        }
+
         clearSelection()
-        document.body.classList.add('non-selectable')
+        setNonSelectable(true)
 
         const target = anchorEl.value
         const evts = ['touchmove', 'touchcancel', 'touchend', 'click'].map(
@@ -292,8 +329,9 @@ export default createComponent({
         cleanEvt(anchorEvents, 'tooltipTemp')
         clearSelection()
         // delay needed otherwise selection still occurs
-        setTimeout(() => {
-          document.body.classList.remove('non-selectable')
+        removeNonSelectableTimer = setTimeout(() => {
+          removeNonSelectableTimer = void 0
+          setNonSelectable(false)
         }, 10)
       }
 
@@ -303,6 +341,26 @@ export default createComponent({
       }, props.hideDelay)
     }
 
+    function onFocusin(evt) {
+      const el = evt.target
+      if (!el) return
+
+      // only react to keyboard focus, not to focus coming from a pointer,
+      // so the tooltip doesn't pop up when the target is clicked;
+      // guard the call for engines that don't support :focus-visible
+      try {
+        if (el.matches(':focus-visible') === false) return
+      } catch {}
+
+      delayShow(evt)
+    }
+
+    // trigger only if it doesn't have external model
+    // or else only if the model can be updated (otherwise respect the external model)
+    function onEscapeKey(evt) {
+      hide(evt)
+    }
+
     function configureAnchorEl() {
       if (props.noParentEvent || anchorEl.value === null) return
 
@@ -310,12 +368,59 @@ export default createComponent({
         ? [[anchorEl.value, 'touchstart', 'delayShow', 'passive']]
         : [
             [anchorEl.value, 'mouseenter', 'delayShow', 'passive'],
-            [anchorEl.value, 'mouseleave', 'delayHide', 'passive']
+            [anchorEl.value, 'mouseleave', 'delayHide', 'passive'],
+            [anchorEl.value, 'focusin', 'onFocusin', 'passive'],
+            [anchorEl.value, 'focusout', 'delayHide', 'passive']
           ]
 
       addEvt(anchorEvents, 'anchor', evts)
     }
 
+    function setNonSelectable(state) {
+      if (hasNonSelectable === state) return
+
+      hasNonSelectable = state
+      nonSelectableCount += state ? 1 : -1
+      document.body.classList.toggle('non-selectable', nonSelectableCount > 0)
+
+      if (!state && removeNonSelectableTimer !== void 0) {
+        clearTimeout(removeNonSelectableTimer)
+        removeNonSelectableTimer = void 0
+      }
+    }
+
+    function addAriaDescription() {
+      const el = anchorEl.value,
+        id = tooltipId.value
+
+      if (el === null || id === void 0) return
+
+      const ids = (el.getAttribute('aria-describedby') || '')
+        .split(/\s+/)
+        .filter(Boolean)
+
+      describedBy = { el, id, added: !ids.includes(id) }
+
+      if (describedBy.added) {
+        ids.push(id)
+        el.setAttribute('aria-describedby', ids.join(' '))
+      }
+    }
+
+    function removeAriaDescription() {
+      if (describedBy?.added === true) {
+        const { el, id } = describedBy,
+          value = (el.getAttribute('aria-describedby') || '')
+            .split(/\s+/)
+            .filter(entry => entry !== '' && entry !== id)
+
+        if (value.length === 0) el.removeAttribute('aria-describedby')
+        else el.setAttribute('aria-describedby', value.join(' '))
+      }
+
+      describedBy = void 0
+    }
+
     function configureScrollTarget() {
       if (anchorEl.value !== null || props.scrollTarget !== void 0) {
         localScrollTarget.value = getScrollTarget(
@@ -334,6 +439,7 @@ export default createComponent({
             'div',
             {
               ...attrs,
+              id: tooltipId.value,
               ref: innerRef,
               class: [
                 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',

package/src/components/tree/QTree.js

@@ -118,11 +118,14 @@ export default createComponent({
     const lazy = ref({})
     const innerTicked = ref(props.ticked || [])
     const innerExpanded = ref(props.expanded || [])
+    const focusedKey = ref(null)
 
-    let blurTargets = {}
+    let blurTargets = {},
+      headerTargets = {}
 
     onBeforeUpdate(() => {
       blurTargets = {}
+      headerTargets = {}
     })
 
     const classes = computed(
@@ -306,6 +309,38 @@ export default createComponent({
       return acc
     })
 
+    const focusableKeys = computed(() => {
+      const acc = []
+
+      function travel(nodes) {
+        nodes.forEach(node => {
+          const localMeta = meta.value[node[props.nodeKey]]
+
+          if (props.filter && localMeta.matchesFilter !== true) return
+          if (localMeta.link === true) acc.push(localMeta.key)
+
+          if (
+            localMeta.expanded === true &&
+            Array.isArray(node[props.childrenKey])
+          ) {
+            travel(node[props.childrenKey])
+          }
+        })
+      }
+
+      travel(props.nodes)
+      return acc
+    })
+
+    const tabKey = computed(() => {
+      const keys = focusableKeys.value
+
+      if (keys.includes(focusedKey.value)) return focusedKey.value
+
+      const selected = keys.find(key => meta.value[key].selected === true)
+      return selected !== void 0 ? selected : keys[0]
+    })
+
     watch(
       () => props.ticked,
       val => {
@@ -576,18 +611,36 @@ export default createComponent({
                   : '') +
                 (m.selected === true ? ' q-tree__node--selected' : '') +
                 (m.disabled === true ? ' q-tree__node--disabled' : ''),
-              tabindex: m.link === true ? 0 : -1,
-              ariaExpanded: children.length !== 0 ? m.expanded : null,
+              ref: el => {
+                headerTargets[m.key] = el
+              },
+              tabindex: m.link === true && m.key === tabKey.value ? 0 : -1,
+              'aria-expanded': isParent
+                ? m.expanded
+                  ? 'true'
+                  : 'false'
+                : null,
+              'aria-selected': m.selectable
+                ? m.selected
+                  ? 'true'
+                  : 'false'
+                : null,
+              'aria-disabled': m.disabled === true ? 'true' : null,
               role: 'treeitem',
+              onFocus() {
+                if (m.link === true) focusedKey.value = m.key
+              },
               onClick: e => {
                 onClick(node, m, e)
               },
-              onKeypress(e) {
+              onKeydown(e) {
                 if (shouldIgnoreKey(e) !== true) {
                   if (e.keyCode === 13) {
                     onClick(node, m, e, true)
                   } else if (e.keyCode === 32) {
                     onExpandClick(node, m, e, true)
+                  } else if (onNavigationKey(m, e.keyCode)) {
+                    stopAndPrevent(e)
                   }
                 }
               }
@@ -722,7 +775,72 @@ export default createComponent({
       blurTargets[key]?.focus()
     }
 
+    function focusNode(key) {
+      if (key !== void 0) {
+        focusedKey.value = key
+        headerTargets[key]?.focus()
+      }
+    }
+
+    function getFirstFocusableChild(children) {
+      for (const child of children) {
+        if (props.filter && child.matchesFilter !== true) continue
+        if (child.link === true) return child.key
+
+        if (child.expanded === true) {
+          const key = getFirstFocusableChild(child.children)
+          if (key !== void 0) return key
+        }
+      }
+    }
+
+    function onNavigationKey(localMeta, keyCode) {
+      const keys = focusableKeys.value,
+        index = keys.indexOf(localMeta.key)
+
+      if (keyCode === 36) {
+        focusNode(keys[0])
+        return true
+      }
+      if (keyCode === 35) {
+        focusNode(keys.at(-1))
+        return true
+      }
+      if (keyCode === 38) {
+        focusNode(keys[index - 1])
+        return true
+      }
+      if (keyCode === 40) {
+        focusNode(keys[index + 1])
+        return true
+      }
+      if (keyCode === 39) {
+        if (localMeta.isParent !== true && !localMeta.lazy) return true
+
+        if (localMeta.expanded !== true) {
+          setExpanded(localMeta.key, true)
+        } else {
+          focusNode(getFirstFocusableChild(localMeta.children))
+        }
+        return true
+      }
+      if (keyCode === 37) {
+        if (localMeta.expanded === true) {
+          setExpanded(localMeta.key, false)
+        } else {
+          let parent = localMeta.parent
+          while (parent !== null && parent.link !== true) parent = parent.parent
+          focusNode(parent?.key)
+        }
+        return true
+      }
+
+      return false
+    }
+
     function onClick(node, localMeta, e, keyboard) {
+      if (localMeta.link === true) focusedKey.value = localMeta.key
+
       if (keyboard !== true && localMeta.selectable !== false) {
         blur(localMeta.key)
       }
@@ -749,6 +867,8 @@ export default createComponent({
     }
 
     function onExpandClick(node, localMeta, e, keyboard) {
+      if (localMeta.link === true) focusedKey.value = localMeta.key
+
       if (e !== void 0) {
         stopAndPrevent(e)
       }

package/src/components/uploader/uploader-core.js

@@ -93,7 +93,11 @@ export function getRenderer(getPlugin, expose) {
     file.__uploaded = status === 'uploaded' ? file.size : uploadedSize
 
     file.__progress =
-      status === 'uploaded' ? 1 : Math.min(0.9999, file.__uploaded / file.size)
+      status === 'uploaded'
+        ? 1
+        : file.size === 0
+          ? 0
+          : Math.min(0.9999, file.__uploaded / file.size)
 
     file.__progressLabel = getProgressLabel(file.__progress)
     proxy.$forceUpdate()
@@ -216,7 +220,9 @@ export function getRenderer(getPlugin, expose) {
 
   function removeUploadedFiles() {
     if (!props.disable) {
-      batchRemoveFiles(['uploaded'], () => {
+      batchRemoveFiles(['uploaded'], ({ size }) => {
+        state.uploadedSize.value -= size
+        uploadSize.value -= size
         state.uploadedFiles.value = []
       })
     }
@@ -258,12 +264,16 @@ export function getRenderer(getPlugin, expose) {
   function removeFile(file) {
     if (props.disable) return
 
+    const isUploading = file.__status === 'uploading'
+
     if (file.__status === 'uploaded') {
+      state.uploadedSize.value -= file.size
+      uploadSize.value -= file.size
       state.uploadedFiles.value = state.uploadedFiles.value.filter(
         f => f.__key !== file.__key
       )
-    } else if (file.__status === 'uploading') {
-      file.__abort()
+    } else if (isUploading) {
+      uploadSize.value -= file.size
     } else {
       uploadSize.value -= file.size
     }
@@ -281,6 +291,11 @@ export function getRenderer(getPlugin, expose) {
     state.queuedFiles.value = state.queuedFiles.value.filter(
       f => f.__key !== file.__key
     )
+
+    if (isUploading) {
+      file.__abort()
+    }
+
     emit('removed', [file])
   }