Allow tab read-only display fields, but highlight them

This styles the background of read-only values when focussing or
hovering them.

Also, all fields regain a tabindex value of 0 to make them reachable.

https://community.openproject.com/work_packages/23546/activity

app/assets/stylesheets/content/_work_packages_table_edit.sass

@@ -82,13 +82,16 @@
     .work-package--placeholder
       padding: 0 10px 0 0px
 
+// Mark focused, non-editable read-values
+.inplace-edit--read-value.-read-only
+  &:focus, &:hover
+    color: $inplace-edit--color--disabled
+    background: $inplace-edit--bg-color--disabled
+  cursor: not-allowed
+
 // Default cursor on non-editable and id fields
 .wp-table--cell-span
   padding: 0 5px 0 5px
-  cursor: not-allowed
-
-  &.id
-    cursor: pointer
 
 // Animations on leaving work packages
 .wp--row.-animated-leave

frontend/app/components/wp-edit/wp-edit-field/wp-edit-field.directive.ts

@@ -144,9 +144,11 @@ export class WorkPackageEditFieldController {
     if (this.isEditable) {
       this.handleUserActivate();
     }
+
     event.stopImmediatePropagation();
   }
 
+
   public get isEditable(): boolean {
     return this._editable && this.workPackage.isEditable;
   }
@@ -270,14 +272,21 @@ export class WorkPackageEditFieldController {
   protected updateDisplayAttributes() {
     this.__d__inplaceEditReadValue = this.__d__inplaceEditReadValue || this.$element.find(".__d__inplace-edit--read-value");
 
-    if (this.isEditable) {
-      this.__d__inplaceEditReadValue.attr("role", "button");
-      this.__d__inplaceEditReadValue.attr("tabindex", "0");
-    }
-    else {
-      this.__d__inplaceEditReadValue.removeAttr("role");
-      this.__d__inplaceEditReadValue.removeAttr("tabindex");
-    }
+    // Unfortunately, ID fields are Edit fields at the moment
+    // and we need to treat them differently
+    const isIDField = this.fieldName === 'id';
+
+    // Usability: Highlight non-editable fields
+    const readOnly = !(this.isEditable || isIDField );
+    this.__d__inplaceEditReadValue.toggleClass("-read-only", readOnly);
+
+    // Accessibility: Mark editable fields as button role
+    const role = this.isEditable ? 'button' : null;
+    this.__d__inplaceEditReadValue.attr("role", role);
+
+    // Accessibility: Allow tab on all fields except id
+    const tabIndex = isIDField ? -1 : 0;
+    this.__d__inplaceEditReadValue.attr("tabindex", tabIndex);
   }
 }
 

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -237,29 +237,20 @@ describe 'Work package index accessibility', type: :feature, selenium: true do
     end
 
     shared_examples_for 'context menu' do
-      describe 'activate' do
-        before do
-          expect(page).to have_selector(source_link)
-          element = find(source_link)
-          element.native.send_keys(keys)
-        end
+      it 'resets the context menu focus properly' do
+        expect(page).to have_selector(source_link)
+        element = find(source_link)
+        element.native.send_keys(keys)
 
-        it {
-          expect(page).to have_focus_on(target_link) if sets_focus
-        }
-
-        describe 'reset' do
-          before do
-            expect(page).to have_selector(target_link)
-            element = find(target_link)
-            element.native.send_keys(:escape)
-            expect(page).not_to have_selector(target_link)
-          end
-
-          it {
-            expect(page).to have_focus_on(source_link) if sets_focus
-          }
-        end
+        # Expect to open and focus the menu
+        expect(page).to have_focus_on(target_link) if sets_focus
+        element = find(target_link)
+
+        element.native.send_keys(:escape)
+        expect(page).not_to have_selector(target_link)
+
+        # Expect reset focus on originating element
+        expect(page).to have_focus_on(source_link) if sets_focus
       end
     end