From afea9bacb364b75f3a2d9b2bec4720c0913cd1cf Mon Sep 17 00:00:00 2001 From: GerganaKremenska Date: Tue, 24 Nov 2020 18:17:02 +0200 Subject: [PATCH 1/3] fix arialabeledBy of card header --- packages/main/src/Card.hbs | 2 +- packages/main/src/Card.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs index d2970289be24..9aef5732751f 100644 --- a/packages/main/src/Card.hbs +++ b/packages/main/src/Card.hbs @@ -10,7 +10,7 @@ @keydown="{{_headerKeydown}}" @keyup="{{_headerKeyup}}" role="{{ariaHeaderRole}}" - aria-labelledby="{{_id}}-subheading {{_id}}-status" + aria-labelledby="{{ariaLabelledByHeader}}" aria-level="{{ariaLevel}}" aria-roledescription="{{ariaCardHeaderRoleDescription}}" tabindex="0"> diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index a3aecf675072..b330f6f32885 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -258,6 +258,21 @@ class Card extends UI5Element { return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT); } + get ariaLabelledByHeader() { + const labels = []; + + if (this.subheading) { + labels.push(`${this._id}-subheading`); + } + + if (this.status) { + labels.push(`${this._id}-status`); + } + + return labels.join(" "); + + } + get hasAvatar() { return !!this.avatar.length; } From 0b2b3f144d0accf9292fed9d6ef41938f8e57f33 Mon Sep 17 00:00:00 2001 From: GerganaKremenska Date: Tue, 24 Nov 2020 18:17:02 +0200 Subject: [PATCH 2/3] fix arialabeledBy of card header --- packages/main/src/Card.hbs | 6 +++--- packages/main/src/Card.js | 22 ++++++++++++++++++++++ packages/main/test/pages/Card.html | 2 +- packages/main/test/specs/Card.spec.js | 25 ++++++++++++++++++++++++- 4 files changed, 50 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Card.hbs b/packages/main/src/Card.hbs index d2970289be24..5b7ef5f6ca6a 100644 --- a/packages/main/src/Card.hbs +++ b/packages/main/src/Card.hbs @@ -3,20 +3,20 @@ dir="{{effectiveDir}}" role="region" aria-label="{{ariaLabelText}}" - aria-labelledby="{{_id}}-desc {{_id}}-heading"> + aria-labelledby="{{ariaLabelledByCard}}"> {{#if hasHeader}}
{{#if hasAvatar}} -
+
{{/if}} diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index a3aecf675072..9b2a903836ce 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -258,6 +258,28 @@ class Card extends UI5Element { return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT); } + get ariaLabelledByHeader() { + const labels = []; + + if (this.subheading) { + labels.push(`${this._id}-subheading`); + } + + if (this.status) { + labels.push(`${this._id}-status`); + } + + if (this.hasAvatar) { + labels.push(`${this._id}-avatar`); + } + + return labels.length !== 0 ? labels.join(" ") : undefined; + } + + get ariaLabelledByCard() { + return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`; + } + get hasAvatar() { return !!this.avatar.length; } diff --git a/packages/main/test/pages/Card.html b/packages/main/test/pages/Card.html index efb7d5238752..f8ecc4280052 100644 --- a/packages/main/test/pages/Card.html +++ b/packages/main/test/pages/Card.html @@ -49,7 +49,7 @@ - + Template Based Segmentation Segmentation Models diff --git a/packages/main/test/specs/Card.spec.js b/packages/main/test/specs/Card.spec.js index d70306a558b5..b3b79c87748b 100644 --- a/packages/main/test/specs/Card.spec.js +++ b/packages/main/test/specs/Card.spec.js @@ -33,7 +33,7 @@ describe("Card general interaction", () => { assert.strictEqual(field.getProperty("value"), "3", "The events count should remain 3 as the header is not interactive."); }); - it("Tests aria-label and aria-labelledby", () => { + it("Tests aria-label", () => { const card1 = browser.$("#textAreaAriaLabel").shadow$(".ui5-card-root"); const card2 = browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-card-root"); const EXPECTED_ARIA_LABEL1 = "Hello World"; @@ -44,4 +44,27 @@ describe("Card general interaction", () => { assert.strictEqual(card2.getAttribute("aria-label"), EXPECTED_ARIA_LABEL2, "The aria-label is correctly set internally."); }); + + it("Tests internal aria-labelledby labeling", () => { + const card1 = browser.$("#card2").shadow$(".ui5-card-root"); + const header = browser.$("#card2").shadow$(".ui5-card-header"); + const card2 = browser.$("#card3").shadow$(".ui5-card-root"); + const header2 = browser.$("#card3").shadow$(".ui5-card-header"); + const EXPECTED_ARIA_LABELLEDBY_CARD = "ui5wc_20-heading ui5wc_20-desc"; + const EXPECTED_ARIA_LABELLEDBY_HEADER = "ui5wc_20-subheading ui5wc_20-status ui5wc_20-avatar"; + const EXPECTED_ARIA_LABELLEDBY_CARD2 = "ui5wc_21-heading ui5wc_21-desc"; + const EXPECTED_ARIA_LABELLEDBY_HEADER2 = "ui5wc_21-subheading"; + + + + + assert.strictEqual(card1.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_CARD, + "The aria-labelledby of card is correctly set internally."); + assert.strictEqual(header.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER, + "The aria-labelledby is correctly set internally."); + assert.strictEqual(card2.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_CARD2, + "The aria-labelledby of card is correctly set internally."); + assert.strictEqual(header2.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLEDBY_HEADER2, + "The aria-labelledby is correctly set internally."); + }); }); From 96cb9ea585b75ceb71f0555155fbbe1c5ef2f758 Mon Sep 17 00:00:00 2001 From: GerganaKremenska Date: Thu, 7 Jan 2021 15:18:10 +0200 Subject: [PATCH 3/3] Title is added to drop down button --- packages/main/src/TabContainer.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 55195c74649e..c15ee152f99a 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -43,7 +43,7 @@ {{/if}}