From 5b96e0700c584f567a5420d2bf61331ebfcd2b7d Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Thu, 17 Oct 2019 15:36:40 +0300 Subject: [PATCH 1/2] chore(ui5-panel): implement accessibility --- packages/main/src/Button.hbs | 3 +++ packages/main/src/Button.js | 8 ++++++++ packages/main/src/Panel.hbs | 14 ++++++++------ packages/main/src/Panel.js | 17 ++++++++++++++++- packages/main/test/specs/Panel.spec.js | 18 ++++++++++++++++++ 5 files changed, 53 insertions(+), 7 deletions(-) diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs index 6605edd5a84d..33ba40694d27 100644 --- a/packages/main/src/Button.hbs +++ b/packages/main/src/Button.hbs @@ -10,6 +10,9 @@ @click={{_onclick}} @mousedown={{_onmousedown}} tabindex={{tabIndexValue}} + aria-expanded="{{accInfo.ariaExpanded}}" + aria-controls="{{accInfo.ariaControls}}" + title="{{accInfo.title}}" > {{#if icon}} -
@@ -32,10 +34,10 @@

{{headerText}}

{{/if}} -
+ -
+
\ No newline at end of file diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js index 69c2013b7504..d4ca08287ad7 100644 --- a/packages/main/src/Panel.js +++ b/packages/main/src/Panel.js @@ -104,7 +104,6 @@ const metadata = { _hasHeader: { type: Boolean, }, - _header: { type: Object, }, @@ -116,6 +115,9 @@ const metadata = { type: Boolean, noAttribute: true, }, + _buttonAccInfo: { + type: Object, + }, }, events: { @@ -310,6 +312,19 @@ class Panel extends UI5Element { return this.accessibleRole.toLowerCase(); } + get accInfo() { + return { + "button": { + "ariaExpanded": this._hasHeader ? this.expanded : undefined, + "ariaControls": this._hasHeader ? `${this._id}-content` : undefined, + "title": this.toggleButtonTitle, + }, + "ariaExpanded": !this._hasHeader ? this.expanded : undefined, + "ariaControls": !this._hasHeader ? `${this._id}-content` : undefined, + "role": !this._hasHeader ? "button" : undefined, + }; + } + get headerTabIndex() { return (this.header.length || this.fixed) ? "-1" : "0"; } diff --git a/packages/main/test/specs/Panel.spec.js b/packages/main/test/specs/Panel.spec.js index 498053225af5..c5d97772270a 100644 --- a/packages/main/test/specs/Panel.spec.js +++ b/packages/main/test/specs/Panel.spec.js @@ -34,4 +34,22 @@ describe("Panel general interaction", () => { assert.strictEqual(field.getProperty("value"), "3", "Press should be called 3 times"); }); + + describe("Accessibility", () => { + + it("tests whether aria attributes are set correctly without custom header", () => { + const header = browser.$("#panel1").shadow$(".ui5-panel-header"); + + assert.ok(header.getAttribute("aria-expanded"), "Aria-expanded should be set on the header"); + assert.ok(header.getAttribute("aria-controls"), "Aria-controls should be set on the header"); + }); + + it("tests whether aria attributes are set correctly in case of custom header", () => { + const button = browser.$("#panel2").shadow$(".ui5-panel-header-button").shadow$(".ui5-button-root"); + + assert.ok(button.getAttribute("aria-expanded"), "Aria-expanded should be set on the button"); + assert.ok(button.getAttribute("aria-controls"), "Aria-controls should be set on the button"); + assert.ok(button.getAttribute("title"), "Title should be set on the button"); + }); + }); }); From 7a35606af38b1baf72e62e6a3c549b0b7fd154b2 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Fri, 18 Oct 2019 13:11:53 +0300 Subject: [PATCH 2/2] correct tests --- packages/main/test/specs/Panel.spec.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/main/test/specs/Panel.spec.js b/packages/main/test/specs/Panel.spec.js index c5d97772270a..60382d49e31d 100644 --- a/packages/main/test/specs/Panel.spec.js +++ b/packages/main/test/specs/Panel.spec.js @@ -37,19 +37,28 @@ describe("Panel general interaction", () => { describe("Accessibility", () => { - it("tests whether aria attributes are set correctly without custom header", () => { + it("tests whether aria attributes are set correctly with native header", () => { const header = browser.$("#panel1").shadow$(".ui5-panel-header"); + const button = browser.$("#panel1").shadow$(".ui5-panel-header-button"); - assert.ok(header.getAttribute("aria-expanded"), "Aria-expanded should be set on the header"); - assert.ok(header.getAttribute("aria-controls"), "Aria-controls should be set on the header"); + assert.ok(!button.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the button"); + assert.ok(!button.getAttribute("aria-controls"), "aria-controls shouldn't be set on the button"); + assert.ok(!button.getAttribute("title"), "title shouldn't be set on the button"); + + assert.ok(header.getAttribute("aria-expanded"), "aria-expanded should be set on the header"); + assert.ok(header.getAttribute("aria-controls"), "aria-controls should be set on the header"); }); it("tests whether aria attributes are set correctly in case of custom header", () => { const button = browser.$("#panel2").shadow$(".ui5-panel-header-button").shadow$(".ui5-button-root"); + const header = browser.$("#panel2").shadow$(".ui5-panel-header"); + + assert.ok(!header.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the header"); + assert.ok(!header.getAttribute("aria-controls"), "aria-controls shouldn't be set on the header"); - assert.ok(button.getAttribute("aria-expanded"), "Aria-expanded should be set on the button"); - assert.ok(button.getAttribute("aria-controls"), "Aria-controls should be set on the button"); - assert.ok(button.getAttribute("title"), "Title should be set on the button"); + assert.ok(button.getAttribute("aria-expanded"), "aria-expanded should be set on the button"); + assert.ok(button.getAttribute("aria-controls"), "aria-controls should be set on the button"); + assert.ok(button.getAttribute("title"), "title should be set on the button"); }); }); });