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
pull/4596/head
Oliver Günther 8 years ago
parent a4c7c6c555
commit 62ca484428
  1. 11
      app/assets/stylesheets/content/_work_packages_table_edit.sass
  2. 25
      frontend/app/components/wp-edit/wp-edit-field/wp-edit-field.directive.ts
  3. 35
      spec/features/accessibility/work_packages/work_package_query_spec.rb

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

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

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

Loading…
Cancel
Save