apostrophe 4.30.0-alpha.1 → 4.30.0

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -128,6 +128,10 @@ module.exports = {
     defaultData: { content: '' },
     className: false,
     linkWithType: [ '@apostrophecms/any-page-type' ],
+    // Hostnames from which `<img>` tags in `import.html` may be fetched.
+    // The list is empty by default, which disables image fetching during
+    // rich text HTML import. Add hostnames here to opt in.
+    imageImportAllowedHostnames: [],
     tableOptions: {
       resizable: true,
       handleWidth: 10,
@@ -472,6 +476,31 @@ module.exports = {
         return widget.content;
       },
 
+      // Return the configured allowlist of hostnames from which images may
+      // be fetched during a rich text widget HTML import, normalized to
+      // lowercase. Returns an empty array if the option is unset, in which
+      // case any image fetch attempted during import is rejected.
+      getImageImportAllowedHostnames() {
+        const list = self.options.imageImportAllowedHostnames;
+        if (!Array.isArray(list)) {
+          return [];
+        }
+        return list
+          .filter(entry => typeof entry === 'string' && entry.length > 0)
+          .map(entry => entry.toLowerCase());
+      },
+
+      // Determine whether the given URL's hostname is permitted by the
+      // import allowlist. The protocol is also restricted to http/https
+      // to prevent fetches via file:, data:, or other schemes.
+      isImageImportHostnameAllowed(url, allowedHostnames) {
+        if (!url || (url.protocol !== 'http:' && url.protocol !== 'https:')) {
+          return false;
+        }
+        const hostname = (url.hostname || '').toLowerCase();
+        return allowedHostnames.includes(hostname);
+      },
+
       // Handle relationships to permalinks and inline images
       async load(req, widgets) {
         try {
@@ -1057,6 +1086,7 @@ module.exports = {
             if (input.import.baseUrl && ((typeof input.import.html) !== 'string')) {
               throw self.apos.error('invalid', 'If present, import.baseUrl must be a string');
             }
+            const allowedHostnames = self.getImageImportAllowedHostnames();
             const $ = cheerio.load(input.import.html);
             const $images = $('img');
             // Build an array of cheerio objects because
@@ -1071,6 +1101,12 @@ module.exports = {
               const src = $image.attr('src');
               const alt = $image.attr('alt') && self.apos.util.escapeHtml($image.attr('alt'));
               const url = new URL(src, input.import.baseUrl || self.apos.baseUrl);
+              if (!self.isImageImportHostnameAllowed(url, allowedHostnames)) {
+                throw self.apos.error(
+                  'forbidden',
+                  `Refusing to import image from disallowed hostname "${url.hostname}". Add it to the \`imageImportAllowedHostnames\` option of the \`@apostrophecms/rich-text-widget\` module to allow it.`
+                );
+              }
               const res = await fetch(url);
               if (res.status >= 400) {
                 self.apos.util.warn(`Error ${res.status} while importing ${src}, ignoring image`);

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

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     getChoiceId(uid, value) {
-      return (uid + JSON.stringify(value)).replace(/\s+/g, '');
+      return (uid + String(value)).replace(/[\s"'.]/g, '');
     },
     watchValue () {
       this.error = this.modelValue.error;

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

@@ -8,7 +8,7 @@ export default {
   mixins: [ AposInputMixin, AposInputChoicesMixin ],
   methods: {
     getChoiceId(uid, value) {
-      return (uid + JSON.stringify(value)).replace(/\s+/g, '');
+      return (uid + String(value)).replace(/[\s"'.]/g, '');
     },
     validate(value) {
       const validValue = this.choices.some((choice) => choice.value === value);

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

@@ -87,6 +87,22 @@ module.exports = {
     self.prependNodes('body', 'stylesheet');
     self.prependNodes('body', 'ui');
 
+    // Detect the layout gap field (carries `layoutGapDefault: true`,
+    // see the `layoutGap` preset). If present, layout-widget will use its
+    // value as the site-wide layout gap. Only one such field is allowed —
+    // the first match wins; subsequent ones are ignored with a warning.
+    const layoutGapFieldNames = self.fieldsWithMarker(
+      self.schema, 'layoutGapDefault'
+    );
+    if (layoutGapFieldNames.length > 1) {
+      self.apos.util.warn(
+        '[@apostrophecms/styles] Multiple fields are marked with ' +
+        `\`layoutGapDefault: true\` (${layoutGapFieldNames.join(', ')}). ` +
+        'Only the first one will be used.'
+      );
+    }
+    self.layoutGapFieldName = layoutGapFieldNames[0] || null;
+
     // Detect if any top-level style field uses a background preset
     // (which includes image relationships requiring attachment annotation).
     // A hack until we analyze the relationship/attachment racing

package/modules/@apostrophecms/styles/lib/handlers.js

@@ -34,6 +34,12 @@ node app @apostrophecms-pro/palette:migrate-to-styles
           stylesClasses: classes,
           stylesStylesheetVersion: createId()
         };
+        if (self.layoutGapFieldName) {
+          const value = self.apos.util.get(doc, self.layoutGapFieldName);
+          $set.aposLayoutGap = (value === null || value === undefined || value === '')
+            ? null
+            : value;
+        }
         return self.apos.doc.db.updateOne({
           type: '@apostrophecms/global',
           aposLocale: doc.aposLocale

package/modules/@apostrophecms/styles/lib/methods.js

@@ -353,6 +353,99 @@ module.exports = (self, options) => {
         throw new Error('Preset must be an object with a "type" property.');
       }
     },
+    // Walk an expanded styles schema (array of fields) and return the
+    // names of fields that emit the given CSS `property`. Recurses into
+    // object fields. Returns [] when no schema is provided.
+    // The field names are dot notation paths.
+    fieldsWithProperty(schema, property) {
+      if (!Array.isArray(schema) || !property) {
+        return [];
+      }
+      const matches = [];
+      for (const field of schema) {
+        const props = Array.isArray(field.property)
+          ? field.property
+          : (field.property ? [ field.property ] : []);
+        if (props.includes(property)) {
+          matches.push(field.name);
+        }
+        if (Array.isArray(field.schema) && field.schema.length) {
+          for (const sub of field.schema) {
+            const subProps = Array.isArray(sub.property)
+              ? sub.property
+              : (sub.property ? [ sub.property ] : []);
+            if (subProps.includes(property)) {
+              matches.push(`${field.name}.${sub.name}`);
+            }
+          }
+        }
+      }
+      return matches;
+    },
+    // Resolve a (possibly dotted) field path against an expanded styles
+    // schema and return the corresponding field definition, or null if
+    // not found. Supports one level of nesting through `object` fields,
+    // matching what `fieldsWithProperty` enumerates.
+    getFieldByPath(schema, path) {
+      if (!Array.isArray(schema) || !path) {
+        return null;
+      }
+      const segments = String(path).split('.');
+      let current = schema;
+      let field = null;
+      for (const segment of segments) {
+        if (!Array.isArray(current)) {
+          return null;
+        }
+        field = current.find(f => f.name === segment) || null;
+        if (!field) {
+          return null;
+        }
+        current = field.schema || [];
+      }
+      return field;
+    },
+    // Walk an expanded styles schema (array of fields) and return the
+    // names of fields carrying a given marker property set to `true`.
+    // Recurses into object fields (returns dotted paths for nested
+    // matches), matching the recursion shape of `fieldsWithProperty`.
+    fieldsWithMarker(schema, markerName) {
+      if (!Array.isArray(schema) || !markerName) {
+        return [];
+      }
+      const matches = [];
+      for (const field of schema) {
+        if (field[markerName] === true) {
+          matches.push(field.name);
+        }
+        if (Array.isArray(field.schema) && field.schema.length) {
+          for (const sub of field.schema) {
+            if (sub[markerName] === true) {
+              matches.push(`${field.name}.${sub.name}`);
+            }
+          }
+        }
+      }
+      return matches;
+    },
+    // Throw if any field in the given expanded schema is marked with
+    // `layoutGapDefault: true`. The `layoutGap` preset is reserved for
+    // @apostrophecms/styles schema.
+    rejectLayoutGapPresetOnSchema(schema, contextLabel) {
+      if (!Array.isArray(schema)) {
+        return;
+      }
+      const offenders = self.fieldsWithMarker(schema, 'layoutGapDefault');
+      if (offenders.length) {
+        throw new Error(
+          `${contextLabel}: the "layoutGap" preset (or a field carrying ` +
+          '`layoutGapDefault: true`) is reserved for the @apostrophecms/styles ' +
+          'module and cannot be used as a widget styles field. ' +
+          'Use a field with `property: "gap"` instead. ' +
+          `Offending field(s): ${offenders.join(', ')}.`
+        );
+      }
+    },
     addToAdminBar() {
       if (Object.keys(self.styles).length === 0) {
         return;

package/modules/@apostrophecms/styles/lib/presets.js

@@ -298,6 +298,23 @@ module.exports = (moduleOptions) => {
           }
         }
       }
+    },
+    // Site-wide layout gap for @apostrophecms/layout-widget instances.
+    // Writes a CSS custom property at :root; meant to be added to the
+    // @apostrophecms/styles module only.
+    // Use on widget styles is rejected at boot.
+    layoutGap: {
+      label: 'apostrophe:styleLayoutGap',
+      help: 'apostrophe:styleLayoutGapHelp',
+      type: 'range',
+      min: 0,
+      max: 64,
+      def: 24,
+      unit: 'px',
+      property: '--apos-layout-gap',
+      selector: ':root',
+      // Marker used to identify the site-wide layout gap field.
+      layoutGapDefault: true
     }
   };
 };

package/modules/@apostrophecms/styles/ui/apos/universal/render.mjs

@@ -369,7 +369,11 @@ function filter(field, doc) {
     return true;
   }
   if (!doc[field.name] && doc[field.name] !== 0) {
-    return false;
+    // Allow the field through when it declares a `def` so the
+    // normalizer can substitute the default.
+    if (field.def === null || field.def === undefined || field.def === '') {
+      return false;
+    }
   }
   if (field.customType) {
     return true;
@@ -437,6 +441,11 @@ function normalize(field, doc, {
   let selectors = [];
   let properties = [];
   let fieldValue = doc[field.name];
+  // Fall back to the field's declared `def` when the doc carries no
+  // value.
+  if (fieldValue === null || fieldValue === undefined) {
+    fieldValue = field.def;
+  }
   let canBeInline = true;
   const fieldUnit = field.unit || '';
   const fieldMediaQuery = field.mediaQuery || rootMediaQuery;

package/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue

@@ -7,6 +7,7 @@
     :tooltip="tooltip"
     :icon-only="true"
     :action="action"
+    :attrs="{ 'aria-label': $t(tooltip) }"
     @click="open"
   >
     <template #label>

package/modules/@apostrophecms/template/views/outerLayoutBase.html

@@ -2,6 +2,7 @@
 <html lang="{% block locale %}{{ data.locale }}{% endblock %}" dir="{% block direction %}{{ data.i18n.direction or 'ltr' }}{% endblock %}" {% block extraHtml %}{% endblock %}>
   <head>
     {% block encoding %}
+      {# Per spec (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta#charset) the only allowed value for this attribute is `utf-8` and this meta element must be in the first 1kb of the document #}
       <meta charset="utf-8">
     {% endblock %}
     {% block startHead %}
@@ -15,7 +16,6 @@
 
     {% block standardHead %}
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="{{ apos.i18n.encoding() }}">
     {% endblock %}
     {% component '@apostrophecms/template:inject' with { where: 'head', end: 'append', when: 'hmr' } %}
     {% component '@apostrophecms/template:inject' with { where: 'head', end: 'append' } %}

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -459,6 +459,15 @@ export default {
     }
   }
 
+  // Keyboard-focus indicator for the `quiet` modifier
+  .apos-button--quiet {
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--a-primary-light-40);
+      outline: none;
+      border-radius: var(--a-border-radius);
+    }
+  }
+
   .apos-button--subtle {
     padding: 11px 10px; // extra pixel keeps them aligned with border'd buttons
     color: var(--a-text-primary);
@@ -757,11 +766,14 @@ export default {
   }
 
   .apos-button--no-motion {
-    &:hover:not([disabled]),
-    &:focus:not([disabled]) {
+    &:hover:not([disabled]) {
       transform: none;
       box-shadow: none;
     }
+
+    &:focus:not([disabled]) {
+      transform: none;
+    }
   }
 
   .apos-button__wrapper {

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -19,15 +19,11 @@
         v-bind="button"
         ref="dropdownButton"
         class="apos-context-menu__btn"
-        role="button"
         :data-apos-test="identifier"
         :state="buttonState"
         :disabled="disabled"
         :tooltip="btnTooltip"
-        :attrs="{
-          'aria-haspopup': 'menu',
-          'aria-expanded': isOpen ? true : false
-        }"
+        :attrs="triggerAttrs"
         @icon="setIconToCenterTo"
         @click.stop="buttonClicked($event)"
       />
@@ -52,6 +48,7 @@
           :active-item="activeItem"
           :is-open="isOpen"
           :has-tip="hasTip"
+          :dialog-label="dialogLabel"
           @item-clicked="menuItemClicked"
           @set-arrow="setArrow"
         >
@@ -87,6 +84,7 @@
             :is-open="isOpen"
             :has-tip="hasTip"
             :ignore-unfocus="ignoreUnfocus"
+            :dialog-label="dialogLabel"
             @item-clicked="menuItemClicked"
             @set-arrow="setArrow"
           >
@@ -215,6 +213,21 @@ const props = defineProps({
   ignoreUnfocus: {
     type: Boolean,
     default: false
+  },
+  // Accessible name for the popover dialog. Pass an i18n key describing
+  // the menu's purpose. Defaults to a generic "Menu" label.
+  dialogLabel: {
+    type: String,
+    default: 'apostrophe:menu'
+  },
+  // Optional accessible name for the trigger button. When provided, it
+  // overrides the visible button label as the button's accessible name
+  // (useful when the visible label alone does not convey the trigger's
+  // purpose, e.g. when the label only shows the current value of a
+  // setting the menu changes). Pass an already-translated string.
+  triggerAriaLabel: {
+    type: String,
+    default: null
   }
 });
 
@@ -320,6 +333,17 @@ const menuAttrs = computed(() => {
   };
 });
 
+const triggerAttrs = computed(() => {
+  const attrs = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': isOpen.value
+  };
+  if (props.triggerAriaLabel) {
+    attrs['aria-label'] = props.triggerAriaLabel;
+  }
+  return attrs;
+});
+
 const teleportedStyle = computed(() => {
   // For teleported content, we need to ensure positioning is always fresh
   // The positioning is already calculated correctly by setDropdownPosition

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuDialog.vue

@@ -3,6 +3,7 @@
     class="apos-primary-scrollbar apos-context-menu__dialog"
     :class="classes"
     role="dialog"
+    :aria-label="$t(props.dialogLabel)"
     :data-apos-ignore-unfocus="props.ignoreUnfocus"
   >
     <AposContextMenuTip
@@ -71,6 +72,13 @@ const props = defineProps({
   activeItem: {
     type: String,
     default: null
+  },
+  // Accessible name for the dialog wrapper (role="dialog"). Pass an i18n
+  // key describing the menu's purpose for the most useful screen-reader
+  // announcement. Defaults to a generic "Menu" label.
+  dialogLabel: {
+    type: String,
+    default: 'apostrophe:menu'
   }
 });
 

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenuItem.vue

@@ -2,6 +2,7 @@
   <li
     class="apos-context-menu__item"
     :class="menuItem.separator ? 'apos-context-menu__item--separator' : null"
+    role="presentation"
   >
     <hr
       v-if="menuItem.separator"
@@ -178,7 +179,9 @@ export default {
   }
 
   &--disabled {
-    color: var(--a-base-3);
+    // Use --a-base-2 (#6f6f6f) so the disabled label still meets WCAG AA
+    // contrast against the menu background (--a-background-primary, #fff).
+    color: var(--a-base-2);
 
     &:focus,
     &:active {
@@ -189,7 +192,7 @@ export default {
     &:focus,
     &:active {
       cursor: not-allowed;
-      color: var(--a-base-5);
+      color: var(--a-base-2);
       background-color: var(--a-base-9);
     }
   }

package/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue

@@ -9,9 +9,14 @@
         type="text"
         class="apos-locales-picker__filter"
         :placeholder="$t('apostrophe:searchLocalesPlaceholder')"
+        :aria-label="$t('apostrophe:searchLocales')"
       >
     </div>
-    <ul class="apos-locales-picker__list">
+    <ul
+      class="apos-locales-picker__list"
+      role="menu"
+      :aria-label="$t('apostrophe:locale')"
+    >
       <li
         v-for="locale in filteredLocales"
         :key="locale.name"
@@ -19,11 +24,15 @@
         :class="localeClasses(locale)"
         class="apos-locale-picker__item"
         data-apos-test="localeItem"
+        role="presentation"
         @click="switchLocale(locale)"
       >
         <button
           :tabindex="isOpen ? '0' : '-1'"
           class="apos-locale-picker__locale-display"
+          role="menuitemradio"
+          :aria-checked="isActive(locale)"
+          :aria-disabled="isForbidden(locale) ? 'true' : null"
         >
           <AposIndicator
             v-if="isForbidden(locale)"
@@ -49,6 +58,10 @@
             v-if="showLocalized"
             class="apos-locale-picker__localized"
             :class="{ 'apos-state-is-localized': isLocalized(locale) }"
+            role="img"
+            :aria-label="isLocalized(locale)
+              ? $t('apostrophe:localizeLocalized')
+              : $t('apostrophe:localizeNotYetLocalized')"
           />
         </button>
       </li>

package/modules/@apostrophecms/ui/ui/apos/scss/global/_utilities.scss

@@ -1,6 +1,18 @@
+// Visually hidden but exposed to assistive technology and the
+// accessibility tree (unlike `visibility: hidden` or `display: none`,
+// which both remove the element from the a11y tree). Used to provide
+// accessible names for icon-only buttons, hidden labels, and visually
+// hidden form inputs that should remain focusable.
 .apos-sr-only {
-  visibility: hidden;
   position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px; 
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
 }
 
 .apos-ltr {

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

@@ -743,6 +743,7 @@ module.exports = {
       // in addition if the first component begins with `@xyz` the
       // sub-object within `o` with an `_id` property equal to `xyz`.
       // is found and returned, no matter how deeply nested it is.
+      // Returns `undefined` if any intermediate segment is null or undefined.
       get(o, path) {
         let i;
         path = path.split('.');
@@ -751,6 +752,9 @@ module.exports = {
           if ((i === 0) && (p.charAt(0) === '@')) {
             o = self.apos.util.findNestedObjectById(o, p.substring(1));
           } else {
+            if (o == null) {
+              return undefined;
+            }
             o = o[p];
           }
         }

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

@@ -355,6 +355,12 @@ module.exports = {
           addFields: self.apos.schema.fieldsToArray(`Module ${self.__meta.name}`, self.fields),
           arrangeFields: self.apos.schema.groupsToArray(self.fieldsGroups)
         }, self);
+        // The `layoutGap` preset (and any field carrying
+        // `layoutGapDefault: true`) is reserved for global styles.
+        self.apos.styles.rejectLayoutGapPresetOnSchema(
+          self.schema,
+          `Widget "${self.name}"`
+        );
         const forbiddenFields = [
           '_id',
           'type'

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -371,6 +371,9 @@ export default {
     this.areaDebounceUpdate.cancel?.();
     apos.area.widgetOptions = apos.area.widgetOptions.slice(1);
     this.stopWatchingWindowSize();
+    // Publish-side cleanup: tell live-preview consumers we're gone.
+    // Safe broadcast — consumers self-gate on widget id.
+    this.emitLivePreviewEnd('unmount');
   },
   created() {
     const defaults = this.getDefault();
@@ -561,6 +564,17 @@ export default {
           subset: this.moduleOptions.stylesFields
         });
         this.applyPreviewStyles(styles);
+        // Publish the live snapshot on the apos bus so consumers
+        // can react in real time.
+        // Gated by the widget module's `subscribesToLivePreview` browser-data
+        // flag so the bus stays quiet for widgets that don't subscribe.
+        if (this.moduleOptions.subscribesToLivePreview) {
+          apos.bus.$emit('apos-widget-live-preview', {
+            widgetId: this.getPreviewWidgetId(),
+            type: this.type,
+            data: value.data
+          });
+        }
 
         return;
       }
@@ -574,6 +588,7 @@ export default {
       }
     },
     removePreview() {
+      this.emitLivePreviewEnd(this.saving ? 'save' : 'cancel');
       if (!this.preview) {
         return;
       }
@@ -589,6 +604,20 @@ export default {
         });
       }
     },
+    emitLivePreviewEnd(reason) {
+      if (!this.moduleOptions.subscribesToLivePreview) {
+        return;
+      }
+      const widgetId = this.getPreviewWidgetId();
+      if (!widgetId) {
+        return;
+      }
+      apos.bus.$emit('apos-widget-live-preview-end', {
+        widgetId,
+        type: this.type,
+        reason
+      });
+    },
     applyPreviewStyles({
       inline = '', css = '', classes = []
     }) {
@@ -715,6 +744,9 @@ export default {
       };
     },
     getPreviewWidgetId() {
+      if (!this.preview) {
+        return null;
+      }
       if (!this.previewWidgetId) {
         if (this.preview.create) {
           // Deliberately different from the final widget's id, which will