feat(ui5-dynamic-page): add focus span

SAP · Dec 12, 2023 · 71fe7bb · 71fe7bb
1 parent 1d4c74b
commit 71fe7bb
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 75 deletions.
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
@@ -215,14 +215,7 @@ class DynamicPage extends UI5Element {
  }
 
  updateMediaRange() {
- const mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
- this.mediaRange = mediaRange;
- if (this.dynamicPageTitle) {
- this.dynamicPageTitle.mediaRange = mediaRange;
- }
- if (this.dynamicPageHeader) {
- this.dynamicPageHeader.mediaRange = mediaRange;
- }
+ this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
  }
 }
 

diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts
@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -37,15 +36,6 @@ class DynamicPageHeader extends UI5Element {
  DynamicPageHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
  }
 
- /**
- * Defines the current media query size.
- *
- * @type {string}
- * @protected
- */
- @property()
- mediaRange!: string;
-
  @slot({ "default": true, type: HTMLElement })
  content!: HTMLElement[];
  get classes() {

diff --git a/packages/fiori/src/DynamicPageHeaderActions.hbs b/packages/fiori/src/DynamicPageHeaderActions.hbs
@@ -1,14 +1,8 @@
 <div class="{{classes.root}}">
  <div class="{{classes.wrapper}}">
- <ui5-button
- @click="{{onExpandClick}}"
- icon="{{arrowButtonIcon}}"
- class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand"></ui5-button>
+ <ui5-button @click="{{onExpandClick}}" icon="{{arrowButtonIcon}}" class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand"></ui5-button>
  {{#unless snapped}}
- <ui5-button
- @click="{{onPinClick}}"
- icon="{{pinButtonIcon}}"
- class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin"></ui5-button>
+ <ui5-button @click="{{onPinClick}}" icon="{{pinButtonIcon}}" class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin"></ui5-button>
  {{/unless}}
  </div>
 </div>
diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
@@ -1,8 +1,11 @@
-<div class="{{classes.root}}"
- data-sap-focus-ref
- tabindex="0"
- @keydown="{{_onkeydown}}"
- @click="{{_onclick}}">
+<div class="{{classes.root}}">
+ <span class="{{classes.focusArea}}"
+ data-sap-focus-ref
+ tabindex="0"
+ @focusout={{_onfocusout}}
+ @focusin={{_onfocusin}}
+ @keydown="{{_onkeydown}}">
+ </span>
  <div class="{{classes.topArea}}">
  {{#if hasBreadcrumb}}
  <div class="{{classes.breadcrumbs}}">

diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts
@@ -73,19 +73,17 @@ class DynamicPageTitle extends UI5Element {
  @property({ type: Boolean })
  snapped!: boolean;
 
- /**
- * Defines the current media query size.
- *
- * @type {string}
- * @protected
- */
- @property()
- mediaRange!: string;
-
  // private properties
  @property({ type: Boolean })
  mobileNavigationActions!: boolean;
 
+ /**
+ * Indicates if the elements is on focus
+ * @private
+ */
+ @property({ type: Boolean })
+ focused!: boolean;
+
  _handleResize: ResizeObserverCallback;
  minContentWidth?: number;
  minActionsWidth?: number;
@@ -126,6 +124,9 @@ class DynamicPageTitle extends UI5Element {
  root: {
  "ui5-dynamic-page-title-root": true,
  },
+ focusArea: {
+ "ui5-dynamic-page-title-focus-area": true,
+ },
  topArea: {
  "ui5-dynamic-page-title--top-area": true,
  },
@@ -197,14 +198,16 @@ class DynamicPageTitle extends UI5Element {
  }
  }
 
- _onclick(e: PointerEvent) {
- if (e.target === this.getDomRef()) {
- this.fireEvent("_toggle-title");
- }
+ _onfocusout() {
+ this.focused = false;
+ }
+
+ _onfocusin() {
+ this.focused = true;
  }
 
  _onkeydown(e: KeyboardEvent) {
- if (e.target === this.getDomRef() && (isEnter(e) || isSpace(e))) {
+ if (isEnter(e) || isSpace(e)) {
  e.preventDefault();
  this.fireEvent("_toggle-title");
  }

diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -82,15 +82,27 @@
 
 /* Responsive paddings */
 
-:host([media-range="S"]) .ui5-dynamic-page-content {
+:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) ::slotted([slot="titleArea"]),
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
  padding: 0 1rem;
 }
 
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
+ padding-top: 0.5rem;
+}
+
 :host([media-range="M"]) .ui5-dynamic-page-content,
-:host([media-range="L"]) .ui5-dynamic-page-content {
+:host([media-range="M"]) ::slotted([slot="titleArea"]),
+:host([media-range="M"]) ::slotted([slot="headerArea"]),
+:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) ::slotted([slot="titleArea"]),
+:host([media-range="L"]) ::slotted([slot="headerArea"]) {
  padding: 0 2rem;
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-content {
+:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) ::slotted([slot="titleArea"]),
+:host([media-range="XL"]) ::slotted([slot="headerArea"]) {
  padding: 0 3rem;
 }
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -7,19 +7,4 @@
  background: inherit;
  padding-top: var(--_ui5_dynamic_page_header_padding_top);
  padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
-}
-
-/* Responsive paddings */
-
-:host([media-range="S"]) .ui5-dynamic-page-header-root {
- padding: 0.5rem 1rem 0 1rem;
-}
-
-:host([media-range="M"]) .ui5-dynamic-page-header-root,
-:host([media-range="L"]) .ui5-dynamic-page-header-root {
- padding: 0 2rem;
-}
-
-:host([media-range="XL"]) .ui5-dynamic-page-header-root {
- padding: 0 3rem;
 }
diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css
@@ -7,7 +7,6 @@
  word-wrap: break-word;
  padding-top: var(--_ui5_dynamic_page_title_padding_top);
  padding-bottom: var(--_ui5_dynamic_page_title_padding_bottom);
- box-sizing: border-box;
 }
 
 :host .ui5-dynamic-page-title-root {
@@ -122,17 +121,13 @@
  width: 100%;
 }
 
-/* Responsive paddings */
-
-:host([media-range="S"]) .ui5-dynamic-page-title-root {
- padding: 0 1rem;
-}
-
-:host([media-range="M"]) .ui5-dynamic-page-title-root,
-:host([media-range="L"]) .ui5-dynamic-page-title-root {
- padding: 0 2rem;
+/* focus */
+:host([focused]) {
+ /* separate change adds proper parameters */
+ outline: 0.0625rem dotted black;
+ outline-offset: -0.0625rem;
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-title-root {
- padding: 0 3rem;
+.ui5-dynamic-page-title-focus-area {
+ outline: none;
 }