apostrophe 4.30.0 → 4.31.0-alpha.1

package/modules/@apostrophecms/job/index.js

@@ -244,7 +244,9 @@ module.exports = {
               },
               setTotal (n) {
                 total = n;
-                return self.setTotal(job, n);
+                const result = self.setTotal(job, n);
+                promises.push(result);
+                return result;
               },
               setResults (_results) {
                 results = _results;
@@ -412,12 +414,12 @@ module.exports = {
       //
       // No promise is returned as this method just updates
       // the job tracking information in the background.
-      setTotal(job, total) {
-        self.db.updateOne({ _id: job._id }, { $set: { total } }, function (err) {
-          if (err) {
-            self.apos.util.error(err);
-          }
-        });
+      async setTotal(job, total) {
+        try {
+          await self.db.updateOne({ _id: job._id }, { $set: { total } });
+        } catch (err) {
+          self.apos.util.error(err);
+        }
       },
       // Mark the given job as ended. If `success`
       // is true the job is reported as an overall

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposGridColumn.vue

@@ -6,7 +6,6 @@
     :style="itemStyles"
     :class="widgetStyles.classes"
     class="apos-layout__item"
-    role="gridcell"
     data-apos-test="aposLayoutItem"
     :data-id="item._id"
     :data-tablet-full="props.tabletFullItems[item._id] || false"

package/modules/@apostrophecms/layout-widget/ui/apos/components/AposGridManager.vue

@@ -14,7 +14,6 @@
       :key="item._id"
       ref="items"
       class="apos-layout__item"
-      role="gridcell"
       data-apos-test="aposManageLayoutItem"
       :data-id="item._id"
       :style="{

package/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue

@@ -10,6 +10,7 @@
         <div
           v-if="showNav"
           class="apos-login__nav"
+          role="navigation"
         >
           <a
             href="#"
@@ -22,7 +23,13 @@
           >{{ $t('apostrophe:loginHome') }}</a>
         </div>
       </transition>
-      <div class="apos-login__wrapper">
+      <div
+        class="apos-login__wrapper"
+        role="main"
+      >
+        <h1 class="apos-sr-only">
+          {{ $t('apostrophe:login') }}
+        </h1>
         <transition
           name="fade-body"
           mode="out-in"
@@ -55,6 +62,7 @@
         <div
           v-show="loaded"
           class="apos-login__footer"
+          role="contentinfo"
         >
           <AposLogo class="apos-login__logo" />
           <label
@@ -234,7 +242,7 @@ export default {
       overflow: hidden;
       margin-right: 0;
       margin-left: auto;
-      color: var(--a-base-5);
+      color: var(--a-base-2);
       text-overflow: clip;
       white-space: nowrap;
     }

package/modules/@apostrophecms/login/ui/apos/components/TheAposLoginHeader.vue

@@ -112,16 +112,16 @@ export default {
       text-transform: capitalize;
       padding: 6px 12px;
       color: var(--a-white);
-      background: var(--a-success);
+      background: var(--a-success-dark);
       border-radius: 5px;
     }
 
     &--development {
-      background: var(--a-danger);
+      background: var(--a-danger-button-hover);
     }
 
     &--success, &--staging {
-      background: var(--a-warning);
+      background: var(--a-warning-dark);
     }
   }
 

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -16,7 +16,7 @@
       :data-apos-graph-key="props.graphKey || undefined"
       tabindex="0"
       @focus.capture="captureFocus"
-      @keyup.tab="onKeyup"
+      @keydown.tab="onKeydownTab"
       @keyup.esc="onKeyup"
     >
       <transition :name="transitionType">
@@ -67,6 +67,7 @@
             <header
               v-if="!modal.disableHeader"
               class="apos-modal__header"
+              role="none"
             >
               <div class="apos-modal__header__main">
                 <div
@@ -133,6 +134,7 @@
             <footer
               v-if="hasSlot('footer')"
               class="apos-modal__footer"
+              role="none"
             >
               <div class="apos-modal__footer__inner">
                 <slot name="footer" />
@@ -216,6 +218,22 @@ const nonDraggableElements = [
   '.apos-input-array-inline-table'
 ];
 
+// Selector for focusable elements inside the modal. Used both at trap setup
+// and on every Tab keydown to refresh the cycle list, so that elements that
+// became disabled/hidden (e.g. Save when validation fails) or newly visible
+// are reflected.
+const focusableSelector = [
+  '[tabindex]',
+  '[href]',
+  'input',
+  'select',
+  'textarea',
+  'button',
+  '[data-apos-focus-priority]'
+]
+  .map(s => `${s}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden]):not(.apos-sr-only)`)
+  .join(', ');
+
 const resizeSides = [
   {
     edge: 'top',
@@ -476,13 +494,35 @@ onUnmounted(() => {
   }
 });
 
-function onKeyup(event) {
+// Handle Tab on keydown — before the browser moves focus.
+// Handling Tab on keyup is too late: the browser has already moved focus,
+// so the cycling logic sees the wrong activeElement.
+//
+// We also recompute the focusable list here on every Tab, scoped to
+// modalEl, instead of relying on the snapshot taken at trapFocus() time.
+function onKeydownTab(event) {
+  if (!shouldTrapFocus.value) {
+    return;
+  }
   if (!store.isOnTop(modalEl.value)) {
     return;
   }
+  if (event.target?.nodeName?.toLowerCase() === 'textarea') {
+    return;
+  }
+  // Skip visually hidden elements when cycling — but only here, not in
+  // trapFocus. Initial focus runs while `renderingElements` is still true,
+  // which puts the content under display:none and makes every candidate's
+  // offsetParent null.
+  const elements = getFocusableElements(modalEl.value)
+    .filter(el => el.offsetParent !== null);
+  // Keep the store snapshot consistent for other consumers.
+  store.updateModalData(props.modalData.id, { elementsToFocus: elements });
+  cycleElementsToFocus(event, elements);
+}
 
-  if (event.key === 'Tab') {
-    cycleElementsToFocus(event, props.modalData.elementsToFocus);
+function onKeyup(event) {
+  if (!store.isOnTop(modalEl.value)) {
     return;
   }
 
@@ -517,23 +557,16 @@ function captureFocus(e) {
   store.updateModalData(props.modalData.id, { focusedElement: e.target });
 }
 
+function getFocusableElements(rootEl) {
+  if (!rootEl) {
+    return [];
+  }
+  return [ ...rootEl.querySelectorAll(focusableSelector) ];
+}
+
 async function trapFocus() {
   if (modalEl?.value) {
-    const elementSelectors = [
-      '[tabindex]',
-      '[href]',
-      'input',
-      'select',
-      'textarea',
-      'button',
-      '[data-apos-focus-priority]'
-    ];
-
-    const selector = elementSelectors
-      .map(addExcludingAttributes)
-      .join(', ');
-
-    const elementsToFocus = [ ...modalEl.value.querySelectorAll(selector) ];
+    const elementsToFocus = getFocusableElements(modalEl.value);
 
     store.updateModalData(props.modalData.id, { elementsToFocus });
 
@@ -556,10 +589,6 @@ async function trapFocus() {
     await nextTick();
     focusElement(props.modalData.focusedElement, firstElementToFocus);
   }
-
-  function addExcludingAttributes(element) {
-    return `${element}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden]):not(.apos-sr-only)`;
-  }
 }
 
 function close() {

package/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="apos-modal-tabs">
-    <ul class="apos-modal-tabs__tabs">
+    <ul
+      class="apos-modal-tabs__tabs"
+      role="tablist"
+    >
       <li
         v-for="tab in tabs"
         v-show="tab.isVisible !== false"
         :key="tab.name"
         class="apos-modal-tabs__tab"
+        role="presentation"
       >
         <button
           :id="tab.name"
           class="apos-modal-tabs__btn"
+          role="tab"
           :aria-selected="tab.name === current ? true : false"
           @click="selectTab"
         >

package/modules/@apostrophecms/oembed/index.js

@@ -54,7 +54,8 @@ module.exports = {
 
         self.oembetter.allowlist(minimumAllowlist.concat(self.options.allowlist || []));
 
-        const minimumEndpoints = self.options.minimumEndpoints || self.oembetter.suggestedEndpoints;
+        const minimumEndpoints = self.options.minimumEndpoints ||
+          self.oembetter.suggestedEndpoints;
         self.oembetter.endpoints(
           minimumEndpoints.concat(self.options.endpoints || [])
         );

package/modules/@apostrophecms/piece-page-type/index.js

@@ -427,7 +427,14 @@ module.exports = {
           return metadata;
         }
         const [ pm ] = metadata;
+        // indexQuery is designed to be called with the
+        // index page in question as req.data.page. To
+        // reuse it for URL metadata purposes we must
+        // meet that expectation
+        const pageWas = req.data.page;
+        req.data.page = doc;
         const query = self.indexQuery(req);
+        req.data.page = pageWas;
         const filters = await self.getFiltersWithChoices(query, { allCounts: true });
 
         // 1. Enumerate every filter + choice combination

package/modules/@apostrophecms/piece-type/index.js

@@ -73,7 +73,8 @@ module.exports = {
         },
         labels: {
           name: 'labels',
-          label: '',
+          label: 'apostrophe:status',
+          labelSrOnly: true,
           component: 'AposCellLabels'
         },
         updatedAt: {

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerDisplay.vue

@@ -4,8 +4,11 @@
       <tr>
         <th
           v-if="hasBatchOperations"
+          scope="col"
           class="apos-table__header"
-        />
+        >
+          <span class="apos-sr-only">{{ $t('apostrophe:selectAll') }}</span>
+        </th>
         <th
           v-for="header in headers"
           :key="header.label"
@@ -16,6 +19,7 @@
           <component
             :is="getEl(header)"
             class="apos-table__header-label"
+            :class="{ 'apos-sr-only': header.labelSrOnly }"
           >
             <component
               :is="icons[header.labelIcon]"
@@ -28,11 +32,12 @@
         </th>
         <th
           key="contextMenu"
+          scope="col"
           class="apos-table__header"
         >
           <component
             :is="getEl({})"
-            class="apos-table__header-label apos-is-hidden"
+            class="apos-table__header-label apos-sr-only"
           >
             {{ $t('apostrophe:moreOperations') }}
           </component>

package/modules/@apostrophecms/recently-edited/ui/apos/components/AposCellTitle.vue

@@ -15,6 +15,7 @@
       :href="item._url"
       class="apos-recently-edited__cell-link"
       data-apos-test="recently-edited-cell-link"
+      :aria-label="$t('apostrophe:preview')"
       @click.stop
     >
       <AposIndicator

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :id="widgetId"
-    :aria-controls="`insert-menu-${modelValue._id}`"
     :style="widgetStyles.inline"
     :class="widgetStyles.classes"
     @keyup="handleUIKeyup"
@@ -43,7 +42,12 @@
       ref="insertMenu"
       plugin-key="insertMenu"
       :class="insertMenuClasses"
-      :tippy-options="{ duration: 100, zIndex: 999, placement: 'bottom-start' }"
+      :tippy-options="{
+        duration: 100,
+        zIndex: 999,
+        placement: 'bottom-start',
+        aria: { content: null, expanded: false }
+      }"
       :should-show="showFloatingMenu"
       :editor="editor"
       role="listbox"
@@ -229,7 +233,11 @@ export default {
         inertia: true,
         placement: 'bottom',
         hideOnClick: false,
-        onHide: this.onBubbleHide
+        onHide: this.onBubbleHide,
+        aria: {
+          content: null,
+          expanded: false
+        }
       };
     },
     // Note that context menu class-list expects a string
@@ -264,7 +272,11 @@ export default {
         placement: 'top',
         offset: [ 0, 35 ],
         moveTransition: 'transform 0s ease-out',
-        appendTo: document.body
+        appendTo: document.body,
+        aria: {
+          content: null,
+          expanded: false
+        }
       };
     },
     moduleOptions() {
@@ -468,6 +480,11 @@ export default {
         autofocus: this.autofocus,
         onUpdate: this.editorUpdate,
         extensions,
+        editorProps: {
+          attributes: {
+            'aria-label': this.$t('apostrophe:richTextEditor')
+          }
+        },
 
         // The following events are triggered:
         //  - before the placeholder configuration function, when loading the page

package/modules/@apostrophecms/schema/ui/apos/components/AposArrayEditor.vue

@@ -58,6 +58,7 @@
             class="apos-modal-array-items__items"
             :selected="currentId"
             :model-value="withLabels(next)"
+            :draggable="field.draggable !== false"
             @update:model-value="update"
             @select="select"
           />

package/modules/@apostrophecms/schema/ui/apos/components/AposInputDateAndTime.vue

@@ -15,13 +15,17 @@
           @toggle="toggle"
         />
         <input
+          :id="uid"
           v-model="date"
           class="apos-input apos-input--date"
           :class="classes"
           type="date"
           @change="setDateAndTime"
         >
-        <span class="apos-input--label">
+        <span
+          :id="`${uid}-at`"
+          class="apos-input--label"
+        >
           {{ $t('apostrophe:at') }}
         </span>
         <input
@@ -29,6 +33,7 @@
           class="apos-input apos-input--time"
           :class="classes"
           type="time"
+          :aria-labelledby="`${uid} ${uid}-at`"
           @change="setDateAndTime"
         >
       </div>
@@ -60,7 +65,7 @@ export default {
     &--disabled {
       background-color: var(--a-white);
       border-color: var(--a-base-8);
-      color: var(--a-base-4);
+      color: var(--a-base-2);
     }
 
     &--label {

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSelect.vue

@@ -8,6 +8,7 @@
   >
     <template #body>
       <AposSelect
+        :uid="uid"
         :icon="icon"
         :choices="choices"
         :classes="classes"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue

@@ -211,7 +211,7 @@ export default {
   & {
     margin: 0 0 $spacing-base;
     line-height: var(--a-line-tall);
-    color: var(--a-base-3);
+    color: var(--a-base-2);
   }
 }
 

package/modules/@apostrophecms/schema/ui/apos/components/AposSubform.vue

@@ -74,6 +74,7 @@
       </div>
       <button
         class="apos-subform__preview-trigger"
+        :aria-label="editSubformLabel"
         @click="toggleExpanded"
         @mouseenter="triggerHover = true"
         @mouseleave="triggerHover = false"

package/modules/@apostrophecms/schema/ui/apos/logic/AposSubform.js

@@ -67,6 +67,16 @@ export default {
     },
     serverError() {
       return this.error || !!this.serverErrors;
+    },
+    subformLabel() {
+      return this.$t(
+        this.subform.label ||
+          this.subform.schema?.[0]?.label ||
+          'apostrophe:notAvailable'
+      );
+    },
+    editSubformLabel() {
+      return this.$t('apostrophe:editSubform', { label: this.subformLabel });
     }
   },
 

package/modules/@apostrophecms/styles/ui/apos/components/TheAposStyles.vue

@@ -19,6 +19,7 @@
                 v-if="currentPath.length"
                 key="btn"
                 class="apos-styles__header-navigate-btn"
+                :aria-label="$t('apostrophe:back')"
                 @mousedown.stop=""
                 @click="navigateLeft"
               >