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

feat(ui5-upload-collection): Added "accessibleName" property #3917

Merged
merged 5 commits into from
Sep 14, 2021
Merged

feat(ui5-upload-collection): Added "accessibleName" property #3917

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7996d7a
fix(ui5-upload-collection): Fixed header screen reading
TeodorTaushanov Sep 13, 2021
b44a29e
code cleanup
TeodorTaushanov Sep 14, 2021
821657f
Merge remote-tracking branch 'upstream/master' into UploadCollectionG…
TeodorTaushanov Sep 14, 2021
68c17e6
Merge remote-tracking branch 'upstream/master' into UploadCollectionG…
TeodorTaushanov Sep 14, 2021
fb99c6a
improved documentation
TeodorTaushanov Sep 14, 2021
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
8 changes: 5 additions & 3 deletions packages/fiori/src/UploadCollection.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
role="region"
aria-roledescription="{{_roleDescription}}"
@drop="{{_ondrop}}">
<div class="ui5-uc-header">
<slot name="header"></slot>
</div>
TeodorTaushanov marked this conversation as resolved.
Show resolved Hide resolved
<div class="{{classes.content}}">
<ui5-list
accessible-name="{{accessibleName}}"
mode="{{mode}}"
@ui5-selection-change="{{_onSelectionChange}}"
@ui5-item-delete="{{_onItemDelete}}"
>
{{!-- forward slot header to inner list slot header --}}
{{#if header.length}}
TeodorTaushanov marked this conversation as resolved.
Show resolved Hide resolved
<slot slot="header" name="header"></slot>
{{/if}}
<slot></slot>
</ui5-list>
{{#if _showNoData}}
Expand Down
15 changes: 15 additions & 0 deletions packages/fiori/src/UploadCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,17 @@ const metadata = {
type: String,
defaultValue: UploadCollectionDnDOverlayMode.None,
},

/**
* Sets the accessible aria name of the component.
*
* @type {string}
* @defaultvalue ""
* @public
*/
TeodorTaushanov marked this conversation as resolved.
Show resolved Hide resolved
accessibleName: {
type: String,
},
},
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.fiori.UploadCollection.prototype */ {
Expand All @@ -122,6 +133,10 @@ const metadata = {

/**
* Defines the <code>ui5-upload-collection</code> header.
* <br><br>
* <b>Note:</b> If <code>header</code> slot is provided,
* the labelling of the <code>UploadCollection</code> is a responsibility of the application developer.
* <code>accessibleName</code> should be used.
*
* @type {HTMLElement[]}
* @slot
Expand Down
8 changes: 4 additions & 4 deletions packages/fiori/test/pages/UploadCollection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@

<p id="draggableElement" draggable="true">This element is draggable</p>

<ui5-upload-collection id="uploadCollection">
<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (4)">
<div slot="header" class="header">
<ui5-title>Uploaded (4)</ui5-title>
<ui5-title id="uploadCollectionTitle">Uploaded (4)</ui5-title>
<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
<ui5-button id="startUploading">Start</ui5-button>
<div class="spacer"></div>
Expand Down Expand Up @@ -183,12 +183,12 @@
</ui5-upload-collection-item>
</ui5-upload-collection>


<ui5-upload-collection id="uploadCollection3">
<div class="header" slot="header">
<ui5-title>Hidden buttons</ui5-title>
</div>

<ui5-upload-collection-item id="uc3-default" file-name="File name">
<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
Default, delete button always visible
Expand Down
16 changes: 8 additions & 8 deletions packages/fiori/test/samples/UploadCollection.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2 class="control-header">UploadCollection</h2>
<section>
<h3>UploadCollection</h3>
<div class="snippet">
<ui5-upload-collection id="uploadCollection">
<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (2)">
<div slot="header" class="header">
<ui5-title>Uploaded (2)</ui5-title>
<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
Expand Down Expand Up @@ -88,7 +88,7 @@ <h3>UploadCollection</h3>
// if there is a file ready to be uploaded send request
if (item.uploadState === "Ready" && item.file) {
var oXHR = new XMLHttpRequest();

oXHR.open("POST", "/upload", true);
oXHR.onreadystatechange = function () {
if (this.status !== 200) {
Expand All @@ -103,7 +103,7 @@ <h3>UploadCollection</h3>
</script>
</div>
<pre class="prettyprint lang-html"><xmp>
<ui5-upload-collection id="uploadCollection">
<ui5-upload-collection id="uploadCollection" accessible-name="Uploaded (2)">
<div slot="header" class="header">
<ui5-title>Uploaded (2)</ui5-title>
<ui5-label>Add new files and press to start uploading pending files:</ui5-label>
Expand All @@ -128,7 +128,7 @@ <h3>UploadCollection</h3>
<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
</ui5-upload-collection-item>
</ui5-upload-collection>
</ui5-upload-collection>

<script>
const createThumbnail = fileName => {
Expand Down Expand Up @@ -162,7 +162,7 @@ <h3>UploadCollection</h3>
// if there is a file ready to be uploaded send request
if (item.uploadState === "Ready" && item.file) {
const oXHR = new XMLHttpRequest();

oXHR.open("POST", "/upload", true);
oXHR.onreadystatechange = function () {
if (this.status !== 200) {
Expand Down Expand Up @@ -203,7 +203,7 @@ <h3>UploadCollection With File Renaming Enabled</h3>
<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
</ui5-upload-collection-item>
</ui5-upload-collection>
</ui5-upload-collection>

<script>
uploadCollectionWithRenaming.addEventListener("rename", function(event) {
Expand Down Expand Up @@ -234,7 +234,7 @@ <h3>UploadCollection With File Renaming Enabled</h3>
<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
Uploaded By: John Smith · Uploaded On: 2014-09-02 · File Size: 226.6 KB ·
</ui5-upload-collection-item>
</ui5-upload-collection>
</ui5-upload-collection>

<script>
uploadCollectionWithRenaming.addEventListener("rename", event => {
Expand Down Expand Up @@ -287,7 +287,7 @@ <h3>UploadCollection With Different Uploading States of Items</h3>
uploadCollectionStates.addEventListener("retry", function(event) {
alert("Retry uploading: " + event.target.fileName);
});

uploadCollectionStates.addEventListener("terminate", function(event) {
alert("Terminate uploading of: " + event.target.fileName);
});
Expand Down
12 changes: 12 additions & 0 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 @@ -80,6 +80,18 @@ describe("UploadCollection", () => {
assert.strictEqual(uploadingItemHiddenTerminate.shadow$(".ui5-li-deletebtn").isDisplayed(), false, "delete button is not visible");
assert.strictEqual(uploadingItemHiddenTerminate.shadow$("ui5-button[icon=stop]").isDisplayed(), false, "terminate button is visible");
});

it("should forward 'header' and 'accessible-name' to the inner list", () => {
const uploadCollection = browser.$("#uploadCollection");
const innerList = uploadCollection.shadow$("ui5-list");

const headerInnerListSlotContent = browser.execute(() => {
return document.getElementById("uploadCollection").shadowRoot.querySelector("ui5-list").shadowRoot.querySelector("slot[name='header']").assignedNodes()[0].assignedNodes()[0].querySelector("#uploadCollectionTitle");
});

assert.strictEqual(uploadCollection.getAttribute("accessible-name"), innerList.getAttribute("accessible-name"), "accessible-name is forwarded");
assert.ok(headerInnerListSlotContent, "header is forwarded");
});
});

describe("Events", () => {
Expand Down