[latest] A11y fixes part 3

.changeset/itchy-zoos-kick.md

@@ -0,0 +1,5 @@
+---
+"apostrophe": patch
+---
+
+Fix more admin UI a11y issues

packages/apostrophe/modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

@@ -119,7 +119,6 @@ export default {
         icon: 'plus-icon',
         type: 'group',
         modifiers: [ 'small', 'inline' ],
-        role: 'menuitem',
         class: 'apos-area-modify-controls__button',
         iconSize: 16,
         disableFocus: !this.isFocused

packages/apostrophe/modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

@@ -90,7 +90,6 @@ export default {
         icon: 'plus-icon',
         type: 'group',
         modifiers: [ 'small', 'inline' ],
-        role: 'menuitem',
         class: 'apos-area-modify-controls__button',
         iconSize: 16,
         disableFocus: !this.tabbable

packages/apostrophe/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js

@@ -273,13 +273,13 @@ export default {
       });
     },
     moduleName() {
-      if (apos.modules[this.context.type].action === apos.modules['@apostrophecms/page'].action) {
+      if (apos.modules[this.context.type]?.action === apos.modules['@apostrophecms/page'].action) {
         return '@apostrophecms/page';
       }
       return this.context.type;
     },
     moduleOptions() {
-      return apos.modules[this.moduleName];
+      return apos.modules[this.moduleName] || {};
     },
     isUpdateOperation() {
       return !!this.context._id;
@@ -482,7 +482,9 @@ export default {
       );
     },
     preview(doc) {
-      window.open(doc._url, '_blank').focus();
+      // window.open() returns null when a popup blocker intercepts it,
+      // so guard before calling focus().
+      window.open(doc._url, '_blank')?.focus();
     },
     async copy(doc) {
       // If there are changes warn the user before discarding them before

packages/apostrophe/modules/@apostrophecms/i18n/i18n/en.json

@@ -205,6 +205,7 @@
   "editImageRelationshipTitle": "Adjust Image",
   "editRelationship": "Edit Relationship",
   "editRelationshipFor": "Edit Relationship for {{ title }}",
+  "editSubform": "Edit {{ label }}",
   "editType": "Edit {{ type }}",
   "editWidget": "Edit Widget",
   "editWidgetForeignTooltip": "Click to edit this content in its natural context",
@@ -569,6 +570,7 @@
   "richTextHighlight": "Mark",
   "richTextHorizontalRule": "Horizontal Rule",
   "richTextHorizontalRuleDescription": "Add a horizontal separator",
+  "richTextEditor": "Rich text editor",
   "richTextInsertMenuHeading": "Insert element...",
   "richTextItalic": "Italic",
   "richTextLink": "Link",
@@ -632,6 +634,7 @@
   "slugInUse": "Slug already in use",
   "someoneElseTookControl": "{{ who }} took control of this document in another tab or window. A document can only be edited in one place at a time.",
   "splitCell": "Split Cell",
+  "status": "Status",
   "style": "Style",
   "styleAlignment": "Alignment",
   "styleBackground": "Background",

packages/apostrophe/modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue

@@ -14,7 +14,7 @@
           v-if="activeMedia.attachment && activeMedia.attachment._urls"
           class="apos-media-editor__thumb"
           :src="activeMedia.attachment._urls[restoreOnly ? 'one-sixth' : 'one-third']"
-          :alt="activeMedia.description"
+          :alt="activeMedia.description || ''"
         >
       </div>
       <ul class="apos-media-editor__details">
@@ -484,7 +484,7 @@ export default {
 
     & {
       line-height: var(--a-line-tallest);
-      color: var(--a-base-4);
+      color: var(--a-base-2);
     }
   }
 

packages/apostrophe/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"

packages/apostrophe/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="{

packages/apostrophe/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;
     }

packages/apostrophe/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);
     }
   }
 

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

@@ -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" />

packages/apostrophe/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"
         >

packages/apostrophe/modules/@apostrophecms/piece-type/index.js

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

packages/apostrophe/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>

packages/apostrophe/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

packages/apostrophe/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

packages/apostrophe/modules/@apostrophecms/schema/ui/apos/components/AposInputDateAndTime.vue

@@ -15,20 +15,25 @@
           @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
           v-model="time"
           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 {

packages/apostrophe/modules/@apostrophecms/schema/ui/apos/components/AposInputSelect.vue

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

packages/apostrophe/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);
   }
 }
 

packages/apostrophe/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"

packages/apostrophe/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 });
     }
   },