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-upload-collection): make empty upload collection focusable #9403

Merged
merged 5 commits into from
Jul 22, 2024
Merged

fix(ui5-upload-collection): make empty upload collection focusable #9403

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ade4d6b
fix(ui5-upload-collection): make empty upload collection focusable
dimovpetar Jul 5, 2024
bcad678
test: add test
dimovpetar Jul 5, 2024
6de5694
Merge branch 'main' of github.com:SAP/ui5-webcomponents into fix_uc_n…
dimovpetar Jul 8, 2024
ad14382
fix: make list item inactive
dimovpetar Jul 18, 2024
fc20ed4
Merge branch 'main' of github.com:SAP/ui5-webcomponents into fix_uc_n…
dimovpetar Jul 19, 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
16 changes: 8 additions & 8 deletions packages/fiori/src/UploadCollection.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
{{!-- forward slot header to inner list slot header --}}
<slot slot="header" name="header"></slot>
<slot></slot>
{{#if _showNoData}}
<ui5-li-custom class="{{classes.noFiles}}">
<ui5-illustrated-message name="Tent" class="uc-no-files-illustration">
<ui5-title slot="title" wrapping-type="None" level="H2">{{_noDataText}}</ui5-title>
<span slot="subtitle">{{_noDataDescription}}</span>
</ui5-illustrated-message>
</ui5-li-custom>
{{/if}}
</ui5-list>
{{#if _showNoData}}
<div class="{{classes.noFiles}}">
<ui5-illustrated-message name="Tent">
<ui5-title slot="title" wrapping-type="None" level="H2">{{_noDataText}}</ui5-title>
<span slot="subtitle">{{_noDataDescription}}</span>
</ui5-illustrated-message>
</div>
{{/if}}
{{#if _showDndOverlay}}
<div
class="{{classes.dndOverlay}}"
Expand Down
2 changes: 2 additions & 0 deletions packages/fiori/src/UploadCollection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import Icon from "@ui5/webcomponents/dist/Icon.js";
import Label from "@ui5/webcomponents/dist/Label.js";
import List from "@ui5/webcomponents/dist/List.js";
import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js";
import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
import Title from "@ui5/webcomponents/dist/Title.js";
import IllustratedMessage from "./IllustratedMessage.js";
Expand Down Expand Up @@ -72,6 +73,7 @@ type UploadCollectionItemDeleteEventDetail = {
Icon,
Label,
List,
ListItemCustom,
Title,
IllustratedMessage,
],
Expand Down
4 changes: 4 additions & 0 deletions packages/fiori/src/themes/UploadCollection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
background-color: var(--sapGroup_ContentBackground);
}

.uc-no-files-illustration {
pointer-events: none;
dimovpetar marked this conversation as resolved.
Show resolved Hide resolved
}

/* Drag and Drop */
.uc-dnd-overlay {
position: absolute;
Expand Down
4 changes: 4 additions & 0 deletions packages/fiori/test/pages/UploadCollection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@
</ui5-upload-collection-item>
</ui5-upload-collection>

<button id="tabStop1">Tab stop helper</button>

<ui5-upload-collection id="uploadCollectionDnD">
<div class="header" slot="header">
<ui5-title>Attachments (0)</ui5-title>
Expand All @@ -120,6 +122,8 @@
</div>
</ui5-upload-collection>

<button id="tabStop2">Tab stop helper</button>

<div class="header">
<ui5-label id="uploadStateEvent"></ui5-label>
</div>
Expand Down
32 changes: 24 additions & 8 deletions packages/fiori/test/specs/UploadCollection.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,14 +211,14 @@ describe("UploadCollection", () => {
});

describe("Keyboard handling", () => {
it("Tab chain", async () => {
const isActiveElement = (element) => {
return browser.executeAsync((expectedActiveElem, done) => {
const activeElement = document.activeElement;
done(activeElement.shadowRoot.activeElement === expectedActiveElem);
}, element);
};

const isActiveElement = (element) => {
return browser.executeAsync((expectedActiveElem, done) => {
const activeElement = document.activeElement;
done(activeElement.shadowRoot.activeElement === expectedActiveElem);
}, element);
};

it("Item tab order", async () => {
const item = await browser.$("#hiddenFileName");

await item.click();
Expand All @@ -233,6 +233,22 @@ describe("UploadCollection", () => {
await browser.keys("Tab");
assert.ok(await isActiveElement(await item.shadow$(".ui5-upload-collection-deletebtn")), "Delete button should be focused");
});

it("Tab through empty upload collection", async () => {
const tabStop1 = await browser.$("#tabStop1");
const tabStop2 = await browser.$("#tabStop2");
const uploadCollection = await browser.$("#uploadCollectionDnD");

await tabStop1.click();
await browser.keys("Tab");
await browser.keys("Tab");

assert.ok(await isActiveElement(await uploadCollection.shadow$(".uc-no-files")), "No files item should be focused");

await browser.keys("Tab");

assert.ok(await tabStop2.isFocused(), "Should have passed the upload collection and focused the next tab stop");
});
});

describe("Edit - various file names", async () => {
Expand Down