Merge pull request #5423 from apostrophecms/a11y-part-3-latest

[latest] A11y fixes part 3

Author: myovchev

.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);
     }
   }