Add some accessibility attributes to context menus

- Add optional label to context menu.
- Add menuitem and separator role attribute to context menu items.
- Use capybara accessible selectors to interact with them in tests.

config/locales/js-en.yml

@@ -566,6 +566,7 @@ en:
     label_watcher_added_successfully: "Watcher successfully added!"
     label_watcher_deleted_successfully: "Watcher successfully deleted!"
     label_work_package_details_you_are_here: "You are on the %{tab} tab for %{type} %{subject}."
+    label_work_package_context_menu: "Work package context menu"
     label_unwatch: "Unwatch"
     label_unwatch_work_package: "Unwatch work package"
     label_uploaded_by: "Uploaded by"

frontend/src/app/shared/components/op-context-menu/op-context-menu.html

@@ -3,13 +3,15 @@
      ng-class="{'dropdown-anchor-right': locals.showAnchorRight}">
   <ul class="dropdown-menu "
       role="menu"
+      [attr.aria-label]="locals.label"
       [ngClass]="{'-empty': items.length === 0 }">
     <ng-container *ngFor="let item of items">
-      <li *ngIf="item.divider" class="dropdown-divider"></li>
+      <li *ngIf="item.divider" class="dropdown-divider" role="separator"></li>
       <li *ngIf="!item.divider">
         <a
           *ngIf="item.href"
           class="menu-item"
+          role="menuitem"
           [ngClass]="item.class"
           [class.inactive]="item.disabled"
           [attr.href]="item.href"
@@ -27,6 +29,7 @@
         <button
           *ngIf="!item.href"
           class="menu-item"
+          role="menuitem"
           [ngClass]="item.class"
           [class.inactive]="item.disabled"
           [attr.aria-disabled]="item.disabled"

frontend/src/app/shared/components/op-context-menu/op-context-menu.types.ts

@@ -2,12 +2,6 @@ import { InjectionToken } from '@angular/core';
 
 export const OpContextMenuLocalsToken = new InjectionToken<any>('CONTEXT_MENU_LOCALS');
 
-export interface OpContextMenuLocalsMap {
-  items:OpContextMenuItem[];
-  contextMenuId?:string;
-  [key:string]:any;
-}
-
 export interface OpContextMenuItem {
   disabled?:boolean;
   hidden?:boolean;
@@ -20,3 +14,11 @@ export interface OpContextMenuItem {
   divider?:boolean;
   onClick?:($event:JQuery.TriggeredEvent|MouseEvent) => boolean;
 }
+
+export interface OpContextMenuLocalsMap {
+  items:OpContextMenuItem[];
+  showAnchorRight?:boolean;
+  contextMenuId?:string;
+  label?:string;
+  [key:string]:any;
+}

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts

@@ -59,17 +59,23 @@ export class WorkPackageViewContextMenu extends OpContextMenuHandler {
 
   private copyToClipboardService:CopyToClipboardService;
 
-  constructor(public injector:Injector,
+  constructor(
+    public injector:Injector,
     protected workPackageId:string,
     protected $element:JQuery,
     protected additionalPositionArgs:any = {},
-    protected allowSplitScreenActions:boolean = true) {
+    protected allowSplitScreenActions:boolean = true,
+  ) {
     super(injector.get(OPContextMenuService));
     this.copyToClipboardService = injector.get(CopyToClipboardService);
   }
 
   public get locals():OpContextMenuLocalsMap {
-    return { contextMenuId: 'work-package-context-menu', items: this.items };
+    return {
+      contextMenuId: 'work-package-context-menu',
+      label: I18n.t('js.label_work_package_context_menu'),
+      items: this.items,
+    };
   }
 
   public positionArgs(evt:JQuery.TriggeredEvent) {

spec/support/components/work_packages/context_menu.rb

@@ -61,15 +61,17 @@ def open_for(work_package, card_view: nil)
       end
 
       def expect_open
-        expect(page).to have_selector(selector)
+        expect(page).to have_selector(:menu, work_package_context_menu_label)
       end
 
       def expect_closed
-        expect(page).not_to have_selector(selector)
+        expect(page).not_to have_selector(:menu, work_package_context_menu_label)
       end
 
       def choose(target)
-        find("#{selector} .menu-item", text: target, exact_text: true).click
+        within_menu do
+          find(:menuitem, text: target, exact_text: true).click
+        end
       end
 
       def choose_delete_and_confirm_deletion
@@ -83,22 +85,30 @@ def choose_delete_and_confirm_deletion
 
       def expect_no_options(*options)
         expect_open
-        options.each do |text|
-          expect(page).not_to have_selector("#{selector} .menu-item", text:)
+        within_menu do
+          options.each do |text|
+            expect(page).not_to have_selector(:menuitem, text:)
+          end
         end
       end
 
       def expect_options(options)
         expect_open
-        options.each do |text|
-          expect(page).to have_selector("#{selector} .menu-item", text:)
+        within_menu do
+          options.each do |text|
+            expect(page).to have_selector(:menuitem, text:)
+          end
         end
       end
 
       private
 
-      def selector
-        '#work-package-context-menu'
+      def within_menu(&)
+        within(:menu, work_package_context_menu_label, &)
+      end
+
+      def work_package_context_menu_label
+        I18n.t('js.label_work_package_context_menu')
       end
     end
   end