Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-notification-list-item): focus is no longer trapped in loading item #8969

Merged
merged 15 commits into from
Jul 8, 2024
Merged

fix(ui5-notification-list-item): focus is no longer trapped in loading item #8969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f3925ed
fix(ui5-notification-list-item): focus is no longer trapped in loadin…
dimovpetar May 15, 2024
0a33b8c
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jun 19, 2024
cd49084
fix: only add loading span to aria-labelledby
dimovpetar Jun 20, 2024
41e202b
fix: make busy indicator non-interactive
dimovpetar Jun 20, 2024
bde5e38
refactor: replace hbs partials with busy indicator active attribute
dimovpetar Jun 20, 2024
e3479dc
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jun 20, 2024
19cca8e
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jun 20, 2024
3b3b956
fix: template typo
dimovpetar Jun 20, 2024
a79d0e2
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jul 1, 2024
ac3103d
test: adapt failing tests
dimovpetar Jul 1, 2024
4e393d2
test: add test
dimovpetar Jul 1, 2024
b2bb95a
fix: getEnabledItems now excludes children of busy groups
dimovpetar Jul 1, 2024
dd474b3
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jul 2, 2024
b6bb5b6
Merge branch 'main' of github.com:SAP/ui5-webcomponents into busy_not…
dimovpetar Jul 8, 2024
5ad98e5
test: add title before every list in the test page
dimovpetar Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 39 additions & 41 deletions packages/fiori/src/NotificationListGroupItem.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,45 @@
aria-description="{{accInvisibleText}}"
aria-level="1"
>
<div class="ui5-nli-group-header"
@click="{{_onHeaderToggleClick}}"
@keydown="{{_onkeydown}}"
role="button"
aria-expanded="{{_ariaExpanded}}"
aria-controls="{{_id}}-notificationsList"
title="{{toggleIconAccessibleName}}">
<ui5-icon
name={{groupCollapsedIcon}}
class="ui5-nli-group-toggle-icon"
mode="Decorative"
></ui5-icon>
<div
id="{{_id}}-title-text"
class="ui5-nli-group-title-text"
part="title-text"
role="heading"
aria-level="2">
{{titleText}}
</div>

{{#if isLoading}}
<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
{{/if}}

<div class="ui5-nli-group-divider"></div>
</div>

<ui5-notification-group-list
id="{{_id}}-notificationsList"
class="ui5-nli-group-items"
role="list"
aria-labelledby="{{_id}}-title-text">
<slot></slot>
</ui5-notification-group-list>

{{#if loading}}
<ui5-busy-indicator
delay="{{loadingDelay}}"
active
class="ui5-nli-loading"
></ui5-busy-indicator>
<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
{{/if}}
<ui5-busy-indicator
delay="{{loadingDelay}}"
?active="{{loading}}"
?inert="{{loading}}"
class="ui5-nli-loading"
>
<div class="ui5-nli-group-content-wrapper">
<div class="ui5-nli-group-header"
@click="{{_onHeaderToggleClick}}"
@keydown="{{_onkeydown}}"
role="button"
aria-expanded="{{_ariaExpanded}}"
aria-controls="{{_id}}-notificationsList"
title="{{toggleIconAccessibleName}}">
<ui5-icon
name={{groupCollapsedIcon}}
class="ui5-nli-group-toggle-icon"
mode="Decorative"
></ui5-icon>
<div
id="{{_id}}-title-text"
class="ui5-nli-group-title-text"
part="title-text"
role="heading"
aria-level="2">
{{titleText}}
</div>
<div class="ui5-nli-group-divider"></div>
</div>
<ui5-notification-group-list
id="{{_id}}-notificationsList"
class="ui5-nli-group-items"
role="list"
aria-labelledby="{{_id}}-title-text">
<slot></slot>
</ui5-notification-group-list>
</div>
</ui5-busy-indicator>
</li>
7 changes: 4 additions & 3 deletions packages/fiori/src/NotificationListGroupItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,12 +145,13 @@ class NotificationListGroupItem extends NotificationListItemBase {

get ariaLabelledBy() {
const id = this._id;
const ids = [];

if (this.isLoading) {
ids.push(`${id}-loading`);
if (this.loading) {
return `${id}-loading`;
}

const ids = [];

if (this.hasTitleText) {
ids.push(`${id}-title-text`);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/NotificationListInternal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class NotificationListInternal extends List {
this.getItems().forEach(item => {
items.push(item);

if (item instanceof NotificationListGroupItem && !item.collapsed) {
if (item instanceof NotificationListGroupItem && !item.collapsed && !item.loading) {
item.items.forEach(subItem => {
items.push(subItem);
});
Expand Down
183 changes: 89 additions & 94 deletions packages/fiori/src/NotificationListItem.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,106 +8,101 @@
aria-labelledby="{{ariaLabelledBy}}"
aria-level="2"
>
{{#if loading}}
<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
{{/if}}
<ui5-busy-indicator
id="{{_id}}-busyIndicator"
delay="{{loadingDelay}}"
?active="{{loading}}"
?inert="{{loading}}"
class="ui5-nli-loading"
>
<div class="ui5-nli-content-wrapper">
<div class="{{contentClasses}}">
{{#if hasImportance}}
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
<ui5-icon name="high-priority" slot="icon"></ui5-icon>
{{importanceText}}
</ui5-tag>
{{/if}}

<div class="{{contentClasses}}">

{{#if hasImportance}}
<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2" wrapping-type="None">
<ui5-icon name="high-priority" slot="icon"></ui5-icon>
{{importanceText}}
</ui5-tag>
{{/if}}
<div class="ui5-nli-title-text-wrapper">
{{#if hasState}}
<ui5-icon
class="ui5-state-icon"
name="{{statusIconName}}"
show-tooltip="true"
accessible-name={{stateText}}
design="{{statusIconDesign}}">
</ui5-icon>
{{/if}}
<div class="ui5-nli-title-text-wrapper">
{{#if hasState}}
<ui5-icon
class="ui5-state-icon"
name="{{statusIconName}}"
show-tooltip="true"
accessible-name={{stateText}}
design="{{statusIconDesign}}">
</ui5-icon>
{{/if}}

<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
<span class="ui5-hidden-text">{{stateText}}</span>
{{titleText}}
</div>
</div>
<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
<span class="ui5-hidden-text">{{stateText}}</span>
{{titleText}}
</div>
</div>

{{#if isLoading}}
<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
{{/if}}
<span id="{{_id}}-read" class="ui5-hidden-text">{{readText}}</span>

<span id="{{_id}}-read" class="ui5-hidden-text">{{readText}}</span>
{{#if hasDesc}}
<div id="{{_id}}-description" class="ui5-nli-description">
<slot></slot>
</div>
{{/if}}

{{#if hasDesc}}
<div id="{{_id}}-description" class="ui5-nli-description">
<slot></slot>
<div class="ui5-nli-footer">
<div id="{{_id}}-footnotes" class="ui5-nli-footnotes">
{{#each footerItems}}
<slot name="{{slotName}}"></slot>
{{#if showDivider}}
<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
{{/if}}
{{/each}}
</div>
<ui5-link
class="ui5-nli-footer-showMore"
?hidden="{{hideShowMore}}"
@ui5-click="{{_onShowMoreClick}}"
wrapping-type="None"
href="#" {{!--without href ENTER does not trigger click --}}
showMore-btn
accessible-name="{{moreLinkAccessibleName}}"
accessible-role="Button"
.accessibilityAttributes={{accInfoLink.accessibilityAttributes}}
>
{{showMoreText}}
</ui5-link>
</div>
</div>
{{/if}}

<div class="ui5-nli-footer">
<div id="{{_id}}-footnotes" class="ui5-nli-footnotes">
{{#each footerItems}}
<slot name="{{slotName}}"></slot>
{{#if showDivider}}
<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
{{/if}}
{{/each}}
<div class="ui5-nli-actions">
{{#if showMenu}}
<ui5-button
icon="overflow"
design="Transparent"
@click="{{_onBtnMenuClick}}"
class="ui5-nli-menu-btn"
tooltip="{{menuBtnAccessibleName}}"
.accessibilityAttributes={{accInfoButton.accessibilityAttributes}}
></ui5-button>
{{/if}}
{{#if showClose}}
<ui5-button
icon="decline"
class="ui5-nli-close-btn"
design="Transparent"
@click="{{_onBtnCloseClick}}"
tooltip="{{closeBtnAccessibleName}}"
accessible-name="{{closeBtnAccessibleName}}"
close-btn
></ui5-button>
{{/if}}
</div>
<ui5-link
class="ui5-nli-footer-showMore"
?hidden="{{hideShowMore}}"
@ui5-click="{{_onShowMoreClick}}"
wrapping-type="None"
href="#" {{!--without href ENTER does not trigger click --}}
showMore-btn
accessible-name="{{moreLinkAccessibleName}}"
accessible-role="Button"
.accessibilityAttributes={{accInfoLink.accessibilityAttributes}}
>
{{showMoreText}}
</ui5-link>
<div class="ui5-nli-avatar" aria-hidden="true">
<slot name="avatar"></slot>
</div>
<slot name="menu"></slot>
</div>

</div>

<div class="ui5-nli-actions">
{{#if showMenu}}
<ui5-button
icon="overflow"
design="Transparent"
@click="{{_onBtnMenuClick}}"
class="ui5-nli-menu-btn"
tooltip="{{menuBtnAccessibleName}}"
.accessibilityAttributes={{accInfoButton.accessibilityAttributes}}
></ui5-button>
{{/if}}
{{#if showClose}}
<ui5-button
icon="decline"
class="ui5-nli-close-btn"
design="Transparent"
@click="{{_onBtnCloseClick}}"
tooltip="{{closeBtnAccessibleName}}"
accessible-name="{{closeBtnAccessibleName}}"
close-btn
></ui5-button>
{{/if}}
</div>

<div class="ui5-nli-avatar" aria-hidden="true">
<slot name="avatar"></slot>
</div>

<slot name="menu"></slot>

{{#if loading}}
<ui5-busy-indicator
delay="{{loadingDelay}}"
active
class="ui5-nli-loading"
data-sap-focus-ref
></ui5-busy-indicator>
{{/if}}
</ui5-busy-indicator>
</li>
9 changes: 5 additions & 4 deletions packages/fiori/src/NotificationListItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,11 @@ class NotificationListItem extends NotificationListItemBase {

get ariaLabelledBy() {
const id = this._id;

if (this.loading) {
return `${id}-loading`;
}

const ids = [];

if (this.hasImportance) {
Expand All @@ -388,10 +393,6 @@ class NotificationListItem extends NotificationListItemBase {
ids.push(`${id}-title-text`);
}

if (this.isLoading) {
ids.push(`${id}-loading`);
}

ids.push(`${id}-read`);

if (this.hasDesc) {
Expand Down
4 changes: 0 additions & 4 deletions packages/fiori/src/NotificationListItemBase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,6 @@ class NotificationListItemBase extends ListItemBase {
return NotificationListItemBase.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOADING);
}

get isLoading() {
return this.loading;
}

/**
* Event handlers
*/
Expand Down
12 changes: 10 additions & 2 deletions packages/fiori/src/themes/NotificationListGroupItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,19 @@
}

.ui5-nli-group-root {
width: 100%;
}

.ui5-nli-group-content-wrapper {
position: relative;
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}

[ui5-busy-indicator] {
width: 100%;
box-sizing: border-box;
}

.ui5-nli-group-header {
Expand Down
Loading