Focus prioritized UI in on modal open (#4707)

* wip
* wip
* retry
* switch promise timeout for nexttick
* focus considerations for media uploader
* remove logs
* restore focus to last selected item after prop change
* make sure we have modal
* split button focus, widget priority button
* wip
* fix line
* lint
* remove conditional rendering
* flex media manager containers
* Fix media manager not handling search results properly (sometimes)
* cleanup
* changelog fix
---------

Co-authored-by: Miro Yovchev <[email protected]>

Author: stuartromanek

CHANGELOG.md

@@ -4,10 +4,13 @@
 
 ### Adds
 
+* Elements inside modals can have a `data-apos-focus-priority` attribute that prioritizes them inside the focusable elements list.
+* Modals will continute trying to find focusable elements until an element marked `data-apos-focus-priority` appears or the max retry threshold is reached.
+* Takes care of an edge case where Media Manager would duplicate search results.
 * Modules can now have a `before: "module-name"` property in their configuration to run (initialization) before another module.
 
 ### Fixes
-  
+
 * Modifies the `AposAreaMenu.vue` component to set the `disabled` attribute to `true` if the max number of widgets have been added in an area with `expanded: true`.
 * `pnpm: true` option in `app.js` is no longer breaking the application. 
 * Remove unused `vue-template-compiler` dependency.

modules/@apostrophecms/area/ui/apos/components/AposAreaExpandedMenu.vue

@@ -26,6 +26,7 @@
               <button
                 v-for="(item, itemIndex) in group.widgets"
                 :key="itemIndex"
+                :data-apos-focus-priority="itemIndex === 0 ? true : null"
                 class="apos-widget"
                 @click="add(item)"
               >
@@ -259,6 +260,7 @@ export default {
   & {
     padding: 0;
     border: none;
+    border-radius: var(--a-border-radius);
     background: none;
     text-align: inherit;
   }
@@ -294,6 +296,12 @@ export default {
     }
   }
 
+  &:focus,
+  &:active {
+    outline: 2px solid var(--a-primary-light-40);
+    outline-offset: 4px;
+  }
+
   &:hover {
     cursor: pointer;
     // stylelint-disable max-nesting-depth

modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue

@@ -12,6 +12,7 @@
           <header class="apos-modal__header">
             <div class="apos-modal__header__main">
               <AposButton
+                :attrs="{'data-apos-focus-priority': true}"
                 type="default"
                 :title="$t('apostrophe:commandMenuEsc')"
                 :icon-only="true"

modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -12,6 +12,7 @@
       <AposButton
         type="default"
         label="apostrophe:cancel"
+        :attrs="{'data-apos-focus-priority': isPriorityButton('cancel')}"
         @click="confirmAndCancel"
       />
     </template>
@@ -42,6 +43,7 @@
         :label="saveLabel"
         :disabled="saveDisabled"
         :tooltip="errorTooltip"
+        :attrs="{'data-apos-focus-priority': isPriorityButton('save')}"
         @click="onRestore"
       />
       <AposButtonSplit
@@ -51,6 +53,7 @@
         :disabled="saveDisabled"
         :tooltip="errorTooltip"
         :selected="savePreference"
+        :attrs="{'data-apos-focus-priority': isPriorityButton('splitSave')}"
         @click="saveHandler($event)"
       />
     </template>
@@ -883,6 +886,12 @@ export default {
       }
 
       return body;
+    },
+    isPriorityButton(name) {
+      const priority = this.restoreOnly ? 'save'
+        : this.saveMenu ? 'splitSave'
+          : this.saveDisabled ? 'cancel' : null;
+      return name === priority || null;
     }
   }
 };

modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -261,13 +261,15 @@
         <template #footer>
           <AposButton
             v-if="isLastStep()"
+            :attrs="{'data-apos-focus-priority': true}"
             type="primary"
             label="apostrophe:localizeContent"
             :disabled="!complete() || wizard.busy"
             @click="submit"
           />
           <AposButton
             v-else
+            :attrs="{'data-apos-focus-priority': true}"
             type="primary"
             icon="arrow-right-icon"
             :modifiers="['icon-right']"

modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue

@@ -19,6 +19,7 @@
         type="primary"
         label="apostrophe:update"
         :disabled="docFields.hasErrors"
+        :attrs="{'data-apos-focus-priority': true}"
         @click="submit"
       />
     </template>
@@ -94,7 +95,6 @@
     <template #main>
       <div ref="cropperContainer" class="apos-image-cropper__container">
         <AposImageCropper
-          v-if="containerHeight"
           :attachment="item.attachment"
           :doc-fields="docFields"
           :aspect-ratio="aspectRatio"

modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -37,6 +37,7 @@
         type="primary"
         :label="saveRelationshipLabel"
         :disabled="!!relationshipErrors"
+        :attrs="{'data-apos-focus-priority': true}"
         @click="saveRelationship"
       />
     </template>
@@ -373,6 +374,7 @@ export default {
       if (Array.isArray(tagList)) {
         this.tagList = tagList;
       }
+      this.items = [];
       this.currentPage = currentPage;
       this.totalPages = totalPages;
       for (const item of items) {
@@ -610,7 +612,8 @@ export default {
   }
 
   :deep(.apos-modal__body-inner) {
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
     height: 100%;
   }
 

modules/@apostrophecms/image/ui/apos/components/AposMediaManagerDisplay.vue

@@ -35,7 +35,7 @@
           />
         </div>
         <button
-          :id="`btn-${item._id}`"
+          :id="`btn-${item._id.replaceAll(':', '-')}`"
           :disabled="
             item._id === 'placeholder' || canSelect(item._id) === false
           "
@@ -168,6 +168,13 @@ export default {
     async isLastPage(val) {
       await this.$nextTick();
       this.$emit('set-load-ref', this.$refs.scrollLoad);
+    },
+    async checked(newVal) {
+      if (newVal.length) {
+        await this.$nextTick();
+        const target = newVal[newVal.length - 1];
+        this.$el.querySelector(`#btn-${target.replaceAll(':', '-')}`).focus();
+      }
     }
   },
   mounted() {

modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue

@@ -2,7 +2,7 @@
   <label
     class="apos-media-manager-display__cell apos-media-uploader"
     :class="{'apos-media-uploader--enabled': !disabled}"
-    :disabled="disabled"
+    :disabled="disabled ? disabled : null"
     @drop.prevent="uploadMedia"
     @dragover.prevent=""
     @dragenter="incrementDragover"
@@ -12,6 +12,7 @@
       class="apos-media-uploader__inner"
       :class="{'apos-is-dragging': dragover}"
       tabindex="0"
+      data-apos-focus-priority
       @keydown="onUploadDragAndDropKeyDown"
     >
       <AposCloudUploadIcon
@@ -231,6 +232,10 @@ export default {
       const isEnterPressed = e.key === 'Enter' || e.code === 'Enter' || e.code === 'NumpadEnter';
       const isSpaceBarPressed = e.keyCode === 32 || e.code === 'Space';
 
+      if (isSpaceBarPressed) {
+        e.preventDefault();
+      }
+
       if (isEnterPressed || isSpaceBarPressed) {
         this.create();
       }

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

@@ -6,7 +6,7 @@
     @leave="onLeave"
   >
     <section
-      v-if="modal.active"
+      v-show="modal.active"
       ref="modalEl"
       :class="classes"
       role="dialog"
@@ -39,7 +39,11 @@
               <AposSpinner :weight="'heavy'" class="apos-busy__spinner" />
             </div>
           </template>
-          <template v-else>
+          <div
+            v-show="!renderingElements && !modal.busy"
+            class="apos-modal__content"
+            data-apos-test="modal-content"
+          >
             <header v-if="!modal.disableHeader" class="apos-modal__header">
               <div class="apos-modal__header__main">
                 <div v-if="hasSlot('secondaryControls')" class="apos-modal__controls--secondary">
@@ -72,17 +76,23 @@
                 <slot class="apos-modal__breadcrumbs" name="breadcrumbs" />
               </div>
             </header>
-            <div class="apos-modal__main" :class="gridModifier">
+            <div
+              class="apos-modal__main"
+              :class="gridModifier"
+            >
               <slot name="leftRail" />
               <slot name="main" />
               <slot name="rightRail" />
             </div>
-            <footer v-if="hasSlot('footer')" class="apos-modal__footer">
+            <footer
+              v-if="hasSlot('footer')"
+              class="apos-modal__footer"
+            >
               <div class="apos-modal__footer__inner">
                 <slot name="footer" />
               </div>
             </footer>
-          </template>
+          </div>
         </div>
       </transition>
     </section>
@@ -110,8 +120,8 @@ const {
   cycleElementsToFocus,
   focusElement,
   focusLastModalFocusedElement,
-  isElementVisible,
-  storeFocusedElement
+  storeFocusedElement,
+  findPriorityElementOrFirst
 } = useAposFocus();
 
 const props = defineProps({
@@ -134,6 +144,9 @@ const store = useModalStore();
 const slots = useSlots();
 const emit = defineEmits([ 'inactive', 'esc', 'show-modal', 'no-modal', 'ready' ]);
 const modalEl = ref(null);
+const findPriorityFocusElementRetryMax = ref(3);
+const currentPriorityFocusElementRetry = ref(0);
+const renderingElements = ref(true);
 const currentLocale = ref(store.activeModal?.locale || apos.i18n.locale);
 
 const transitionType = computed(() => {
@@ -216,6 +229,8 @@ onMounted(async () => {
   await nextTick();
   if (shouldTrapFocus.value) {
     trapFocus();
+  } else {
+    renderingElements.value = false;
   }
   store.updateModalData(props.modalData.id, { modalEl: modalEl.value });
   window.addEventListener('keydown', onKeydown);
@@ -249,29 +264,44 @@ function onLeave() {
   emit('no-modal');
 }
 
-function trapFocus() {
-  const elementSelectors = [
-    '[tabindex]',
-    '[href]',
-    'input',
-    'select',
-    'textarea',
-    'button'
-  ];
-
-  const selector = elementSelectors
-    .map(addExcludingAttributes)
-    .join(', ');
-
-  const elementsToFocus = [ ...modalEl.value.querySelectorAll(selector) ]
-    .filter(isElementVisible);
-
-  store.updateModalData(props.modalData.id, { elementsToFocus });
-
-  focusElement(props.modalData.focusedElement, props.modalData.elementsToFocus[0]);
+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) ];
+
+    store.updateModalData(props.modalData.id, { elementsToFocus });
+
+    const firstElementToFocus = findPriorityElementOrFirst(elementsToFocus);
+    const foundPriorityElement = firstElementToFocus?.hasAttribute('data-apos-focus-priority');
+
+    // // Components render at various times and can't be counted on to be available on modal's mount
+    // // Update the trap focus list until a data-apos-focus-priority element is found or the retry limit is reached
+    if (!foundPriorityElement && findPriorityFocusElementRetryMax.value > currentPriorityFocusElementRetry.value) {
+      await new Promise(resolve => setTimeout(resolve, 50));
+      currentPriorityFocusElementRetry.value++;
+      trapFocus();
+      return;
+    }
+    renderingElements.value = false;
+    await nextTick();
+    focusElement(props.modalData.focusedElement, firstElementToFocus);
+  }
 
   function addExcludingAttributes(element) {
-    return `${element}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden])`;
+    return `${element}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden]):not(.apos-sr-only)`;
   }
 }
 
@@ -372,6 +402,12 @@ function close() {
     height: 100%;
   }
 
+  .apos-modal__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
   .apos-modal__main {
     display: grid;
     flex-grow: 1;