From ee5c90871a26f06b3d62344b121125d9d5a5a18c Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Thu, 17 Oct 2019 13:18:15 +0300 Subject: [PATCH] [ADF-4958] [ADF-4959] Info Drawer - Buttons don't have role and accessible by keyboard alone (#5161) * actions accessibility * lint * access setEditMode by keyboard * fix test * update action automation id reference * update element finder reference * update automation id reference --- e2e/core/card-view/card-view-component.e2e.ts | 6 +-- e2e/pages/adf/cardViewComponentPage.ts | 12 ++--- e2e/pages/adf/metadataViewPage.ts | 14 ++--- .../adf/process-services/taskDetailsPage.ts | 4 +- .../card-view-textitem.component.html | 51 ++++++++++++------- .../card-view-textitem.component.scss | 35 +++++++------ 6 files changed, 68 insertions(+), 54 deletions(-) diff --git a/e2e/core/card-view/card-view-component.e2e.ts b/e2e/core/card-view/card-view-component.e2e.ts index c26ffaaa25..642ec86a82 100644 --- a/e2e/core/card-view/card-view-component.e2e.ts +++ b/e2e/core/card-view/card-view-component.e2e.ts @@ -287,9 +287,9 @@ describe('CardView Component', () => { it('[C279936] Should not be possible edit any parameter when editable property is false', async () => { await cardViewPageComponent.disableEdit(); - const editIconText = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-name"]')); - const editIconInt = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-int"]')); - const editIconFloat = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-float"]')); + const editIconText = element(by.css('button[data-automation-id="card-textitem-edit-icon-name"]')); + const editIconInt = element(by.css('button[data-automation-id="card-textitem-edit-icon-int"]')); + const editIconFloat = element(by.css('button[data-automation-id="card-textitem-edit-icon-float"]')); const editIconKey = element(by.css('mat-icon[data-automation-id="card-key-value-pairs-button-key-value-pairs"]')); const editIconData = element(by.css('mat-datetimepicker-toggle')); diff --git a/e2e/pages/adf/cardViewComponentPage.ts b/e2e/pages/adf/cardViewComponentPage.ts index 8b0f3750da..a9928717da 100644 --- a/e2e/pages/adf/cardViewComponentPage.ts +++ b/e2e/pages/adf/cardViewComponentPage.ts @@ -52,12 +52,12 @@ export class CardViewComponentPage { } async clickOnTextClearIcon(): Promise { - const clearIcon: ElementFinder = element(by.css(`mat-icon[data-automation-id="card-textitem-reset-name"]`)); + const clearIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-reset-name"]`)); await BrowserActions.click(clearIcon); } async clickOnTextSaveIcon(): Promise { - const saveIcon: ElementFinder = element(by.css(`mat-icon[data-automation-id="card-textitem-update-name"]`)); + const saveIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-update-name"]`)); await BrowserActions.click(saveIcon); } @@ -78,12 +78,12 @@ export class CardViewComponentPage { } async clickOnIntClearIcon(): Promise { - const clearIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-reset-int"]')); + const clearIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-reset-int"]')); await BrowserActions.click(clearIcon); } async clickOnIntSaveIcon(): Promise { - const saveIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-update-int"]')); + const saveIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-update-int"]')); await BrowserActions.click(saveIcon); } @@ -109,12 +109,12 @@ export class CardViewComponentPage { } async clickOnFloatClearIcon(): Promise { - const clearIcon: ElementFinder = element(by.css(`mat-icon[data-automation-id="card-textitem-reset-float"]`)); + const clearIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-reset-float"]`)); await BrowserActions.click(clearIcon); } async clickOnFloatSaveIcon(): Promise { - const saveIcon: ElementFinder = element(by.css(`mat-icon[data-automation-id="card-textitem-update-float"]`)); + const saveIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-update-float"]`)); await BrowserActions.click(saveIcon); } diff --git a/e2e/pages/adf/metadataViewPage.ts b/e2e/pages/adf/metadataViewPage.ts index a1aed59ebf..7612d7266c 100644 --- a/e2e/pages/adf/metadataViewPage.ts +++ b/e2e/pages/adf/metadataViewPage.ts @@ -136,22 +136,22 @@ export class MetadataViewPage { } async editPropertyIconIsDisplayed(propertyName: string) { - const editPropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); + const editPropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); await BrowserVisibility.waitUntilElementIsPresent(editPropertyIcon); } async updatePropertyIconIsDisplayed(propertyName: string) { - const updatePropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-update-' + propertyName + '"]')); + const updatePropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-update-' + propertyName + '"]')); await BrowserVisibility.waitUntilElementIsVisible(updatePropertyIcon); } async clickUpdatePropertyIcon(propertyName: string): Promise { - const updatePropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-update-' + propertyName + '"]')); + const updatePropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-update-' + propertyName + '"]')); await BrowserActions.click(updatePropertyIcon); } async clickClearPropertyIcon(propertyName: string): Promise { - const clearPropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-reset-' + propertyName + '"]')); + const clearPropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-reset-' + propertyName + '"]')); await BrowserActions.click(clearPropertyIcon); } @@ -183,17 +183,17 @@ export class MetadataViewPage { } async clearPropertyIconIsDisplayed(propertyName: string): Promise { - const clearPropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-reset-' + propertyName + '"]')); + const clearPropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-reset-' + propertyName + '"]')); await BrowserVisibility.waitUntilElementIsVisible(clearPropertyIcon); } async clickEditPropertyIcons(propertyName: string): Promise { - const editPropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); + const editPropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); await BrowserActions.click(editPropertyIcon); } async getPropertyIconTooltip(propertyName: string): Promise { - const editPropertyIcon: ElementFinder = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); + const editPropertyIcon: ElementFinder = element(by.css('button[data-automation-id="card-textitem-edit-icon-' + propertyName + '"]')); return await editPropertyIcon.getAttribute('title'); } diff --git a/e2e/pages/adf/process-services/taskDetailsPage.ts b/e2e/pages/adf/process-services/taskDetailsPage.ts index 3bf7db2f6a..b6cc271eee 100644 --- a/e2e/pages/adf/process-services/taskDetailsPage.ts +++ b/e2e/pages/adf/process-services/taskDetailsPage.ts @@ -75,12 +75,12 @@ export class TaskDetailsPage { } async checkEditDescriptionButtonIsNotDisplayed(): Promise { - const editDescriptionButton = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-description"]')); + const editDescriptionButton = element(by.css('button[data-automation-id="card-textitem-edit-icon-description"]')); await BrowserVisibility.waitUntilElementIsNotVisible(editDescriptionButton); } async checkEditPriorityButtonIsNotDisplayed(): Promise { - const editPriorityButton = element(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-priority"]')); + const editPriorityButton = element(by.css('button[data-automation-id="card-textitem-edit-icon-priority"]')); await BrowserVisibility.waitUntilElementIsNotVisible(editPriorityButton); } diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html index 2154aac7a0..4748915e63 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -5,7 +5,7 @@ {{ property.displayValue }} -
+
{{ property.displayValue }} @@ -13,14 +13,26 @@ -
+
{{ property.displayValue }} - create + [attr.data-automation-id]="'card-textitem-edit-icon-' + property.key"> + + create +
@@ -42,21 +54,24 @@ (input)="onTextAreaInputChange()" [attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"> - done - clear + + +
- +
  • {{ errorMessage | translate }}
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss index 3d822bca14..82a4fa3ed1 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -1,15 +1,20 @@ @mixin adf-card-view-textitem-theme($theme) { $foreground: map-get($theme, foreground); + $outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default; .adf { &-textitem-icon { font-size: 16px; width: 16px; height: 16px; - position: relative; - top: 4px; - padding-left: 8px; - opacity: 0.3; + } + + &-textitem-action { + color: mat-color($foreground, text, 0.25); + } + + &-textitem-action:hover, &-textitem-action:focus { + color: mat-color($foreground, text); } &-update-icon { @@ -19,14 +24,15 @@ &-textitem-readonly { cursor: pointer !important; - &:hover mat-icon { - opacity: 1; + &:hover .adf-textitem-action, + &:focus .adf-textitem-action { + color: mat-color($foreground, text); } } &-textitem-clickable { - &:hover mat-icon { - opacity: 1; + &:hover .adf-textitem-action { + color: mat-color($foreground, text); } } @@ -39,9 +45,10 @@ &-controls { display: flex; + align-items: center; mat-icon:not(.adf-button-disabled):hover { - opacity: 1; + color: mat-color($foreground, text); cursor: pointer !important;; } @@ -51,7 +58,7 @@ input:focus, textarea:focus { - border: 1px solid mat-color($foreground, text, 0.15); + border: $outline; } } @@ -126,12 +133,4 @@ display: block; } } - - .mat-button.adf-update-icon { - min-width: 40px; - line-height: 0; - margin-top: -4px; - padding: 0; - } - }