From 710053b63f01540032c10546c2cff597c8e56789 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 21 Apr 2020 13:54:10 +0300 Subject: [PATCH] feat(ui5-panel): enable configuring the heading level (#1504) **Background** Our native title used to be "h1", which is indeed wrong. In openui5 it is "h2" and it is not configurable. But, in the related issue the author wants to be able to change the title level in general. Although we provide the possibility of a custom header, the author is asking for this feature to make use of the fact that the the entire native header is clickable and focusable, which is not the case with the custom one. **Options** So, we either reject this and (1) hardcode it to "h2" as in openui5, (2) introduce a property as in this change, or (3) make another slot for the title, but then we will have the current "header" slot and "headerTitle" slot and it might be confusing. **In this change:** - [refactoring] Use div with role="heading" and "aria-level" attrs, instead of "h" tag to enable the configuration of the level. Reuse the existing TitleLevel enum ("H1" to "H6") and extract the number part, but AriaLevel type ("1" - "6") is also an option. - [FIX] sync the parameters in the latest visual design and change few variables - [FIX] title now truncates, previously it used to wrap. Fixes: https://github.com/SAP/ui5-webcomponents/issues/1495 --- packages/main/src/Panel.hbs | 8 ++++++-- packages/main/src/Panel.js | 19 +++++++++++++++++++ packages/main/src/themes/Panel.css | 12 ++++++++++-- .../main/src/themes/base/Panel-parameters.css | 1 - .../themes/sap_fiori_3/Panel-parameters.css | 1 - .../sap_fiori_3_dark/Panel-parameters.css | 1 - packages/main/test/pages/Panel.html | 4 ++-- packages/main/test/specs/Panel.spec.js | 3 +++ 8 files changed, 40 insertions(+), 9 deletions(-) diff --git a/packages/main/src/Panel.hbs b/packages/main/src/Panel.hbs index 7fedc097416e..f6dd3fc2bcdf 100644 --- a/packages/main/src/Panel.hbs +++ b/packages/main/src/Panel.hbs @@ -30,8 +30,12 @@ {{#if _hasHeader}} {{else}} -
-

{{headerText}}

+
+ {{headerText}}
{{/if}}
diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js index 1dc3c68f9e10..a19cb348bfcc 100644 --- a/packages/main/src/Panel.js +++ b/packages/main/src/Panel.js @@ -8,6 +8,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import "@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js"; import Button from "./Button.js"; +import TitleLevel from "./types/TitleLevel.js"; import PanelAccessibleRole from "./types/PanelAccessibleRole.js"; import PanelTemplate from "./generated/templates/PanelTemplate.lit.js"; @@ -102,6 +103,20 @@ const metadata = { defaultValue: PanelAccessibleRole.Form, }, + /** + * Defines the "aria-level" of ui5-panel heading, + * set by the headerText. + *

+ * Available options are: "H6" to "H1". + * @type {TitleLevel} + * @defaultvalue "H2" + * @public + */ + headerLevel: { + type: TitleLevel, + defaultValue: TitleLevel.H2, + }, + /** * @private */ @@ -347,6 +362,10 @@ class Panel extends UI5Element { }; } + get headerAriaLevel() { + return this.headerLevel.slice(1); + } + get headerTabIndex() { return (this.header.length || this.fixed) ? "-1" : "0"; } diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index 83f0f80a7304..ae28c294b188 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -54,9 +54,17 @@ transform: rotate(90deg); } +:host([fixed]) .ui5-panel-header-title { + width: 100%; +} + .ui5-panel-header-title { - font-family: var(--sapFontFamily); - font-size: var(--_ui5_panel_header_title_size); + width: calc(100% - var(--_ui5_panel_button_root_width)); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--sapFontHeaderFamily); + font-size: var(--sapFontHeader5Size); font-weight: normal; color: var(--sapGroup_TitleTextColor); } diff --git a/packages/main/src/themes/base/Panel-parameters.css b/packages/main/src/themes/base/Panel-parameters.css index 889ff8d6a26b..edb7e12671bb 100644 --- a/packages/main/src/themes/base/Panel-parameters.css +++ b/packages/main/src/themes/base/Panel-parameters.css @@ -1,6 +1,5 @@ :root { --_ui5_panel_focus_border: 1px dotted var(--sapContent_FocusColor); --_ui5_panel_header_height: 3rem; - --_ui5_panel_header_title_size: var(--sapMFontHeader4Size); --_ui5_panel_button_root_width: 3rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css index 1f6da56f2e51..9e9545d4536c 100644 --- a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css @@ -2,6 +2,5 @@ :root { --_ui5_panel_header_height: 2.75rem; - --_ui5_panel_header_title_size: var(--sapMFontHeader5Size); --_ui5_panel_button_root_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css index 1f6da56f2e51..9e9545d4536c 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css @@ -2,6 +2,5 @@ :root { --_ui5_panel_header_height: 2.75rem; - --_ui5_panel_header_title_size: var(--sapMFontHeader5Size); --_ui5_panel_button_root_width: 2.75rem; } \ No newline at end of file diff --git a/packages/main/test/pages/Panel.html b/packages/main/test/pages/Panel.html index ceb6662ee6fd..8e1be5bc7c71 100644 --- a/packages/main/test/pages/Panel.html +++ b/packages/main/test/pages/Panel.html @@ -104,7 +104,7 @@
- + @@ -160,7 +160,7 @@
- + This is a demo how to use the "expand" event. diff --git a/packages/main/test/specs/Panel.spec.js b/packages/main/test/specs/Panel.spec.js index 5b4af9972da3..e5907f9238f7 100644 --- a/packages/main/test/specs/Panel.spec.js +++ b/packages/main/test/specs/Panel.spec.js @@ -101,6 +101,7 @@ describe("Panel general interaction", () => { it("tests whether aria attributes are set correctly with native header", () => { const header = browser.$("#panel1").shadow$(".ui5-panel-header"); + const title = browser.$("#panel1").shadow$(".ui5-panel-header-title"); const button = browser.$("#panel1").shadow$(".ui5-panel-header-button"); assert.ok(!button.getAttribute("aria-expanded"), "aria-expanded shouldn't be set on the button"); @@ -109,6 +110,8 @@ describe("Panel general interaction", () => { 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.strictEqual(title.getAttribute("aria-level"), "3", "title aria-level is set to 3 correctly"); }); it("tests whether aria attributes are set correctly in case of custom header", () => {