Skip to content

Commit 5197747

Browse files
author
GerganaKremenska
authored
Merge branch 'master' into card_refactoring
2 parents 080c252 + f4f5864 commit 5197747

File tree

98 files changed

+1409
-422
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1409
-422
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
Jh82i3fpuuAQEHSWZLSJ9IF817M=
1+
fwIH67OLD+hDOagFf4EY7oyPVEs=

‎packages/base/src/Keys.js

+6
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,10 @@ const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key ==
131131

132132
const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
133133

134+
const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
135+
136+
const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
137+
134138
const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
135139

136140
const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
@@ -208,6 +212,8 @@ export {
208212
isDownCtrl,
209213
isUpShift,
210214
isDownShift,
215+
isLeftShift,
216+
isRightShift,
211217
isUpShiftCtrl,
212218
isDownShiftCtrl,
213219
isHome,

‎packages/base/src/util/AriaLabelHelper.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import findNodeOwner from "./findNodeOwner.js";
22

33
const getEffectiveAriaLabelText = el => {
44
if (!el.ariaLabelledby) {
5-
if (el.ariaLabel) {
6-
return el.ariaLabel;
5+
if (el.accessibleName) {
6+
return el.accessibleName;
77
}
88

99
return undefined;

‎packages/fiori/src/NotificationListGroupItem.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@focusin="{{_onfocusin}}"
44
@focusout="{{_onfocusout}}"
55
@keydown="{{_onkeydown}}"
6-
role="option"
6+
role="listitem"
77
tabindex="{{_tabIndex}}"
88
dir="{{effectiveDir}}"
99
aria-expanded="{{ariaExpanded}}"
@@ -77,7 +77,7 @@
7777
<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
7878
</div>
7979

80-
<ui5-list class="ui5-nli-group-items">
80+
<ui5-list class="ui5-nli-group-items" accessible-role="list">
8181
<slot></slot>
8282
</ui5-list>
8383

‎packages/fiori/src/NotificationListItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@keydown="{{_onkeydown}}"
66
@keyup="{{_onkeyup}}"
77
@click="{{_onclick}}"
8-
role="option"
8+
role="listitem"
99
tabindex="{{_tabIndex}}"
1010
dir="{{effectiveDir}}"
1111
aria-labelledby="{{ariaLabelledBy}}"

‎packages/fiori/src/Timeline.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="ui5-timeline-root" @focusin={{_onfocusin}}>
2-
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
2+
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{accessibleName}}">
33
{{#each items}}
44
<li class="ui5-timeline-list-item" style="list-style-type: none;">
55
<slot name="{{this._individualSlot}}"></slot>

‎packages/fiori/src/Wizard.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,14 @@ const metadata = {
5858
managedSlots: true,
5959
properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
6060
/**
61-
* Defines the aria-label text of the <code>ui5-wizard</code>.
61+
* Sets the accessible aria name of the component.
6262
*
6363
* @type {String}
6464
* @defaultvalue undefined
65-
* @private
65+
* @public
66+
* @since 1.0.0-rc.15
6667
*/
67-
ariaLabel: {
68+
accessibleName: {
6869
type: String,
6970
defaultValue: undefined,
7071
},
@@ -805,7 +806,7 @@ class Wizard extends UI5Element {
805806
}
806807

807808
get ariaLabelText() {
808-
return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
809+
return this.accessibleName || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
809810
}
810811

811812
get effectiveStepSwitchThreshold() {

‎packages/fiori/src/WizardStep.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,14 @@ const metadata = {
103103
},
104104

105105
/**
106-
* Defines the aria-label of the step.
106+
* Sets the accessible aria name of the component.
107+
*
107108
* @type {boolean}
108109
* @defaultvalue ""
109-
* @private
110+
* @public
111+
* @since 1.0.0-rc.15
110112
*/
111-
ariaLabel: {
113+
accessibleName: {
112114
type: String,
113115
},
114116

‎packages/fiori/src/themes/ShellBar.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -231,13 +231,14 @@ slot[name="profile"] {
231231
}
232232

233233
.ui5-shellbar-overflow-container-left {
234-
max-width: calc(50% - 1.5rem);
234+
235235
justify-content: flex-start;
236236
margin-right: 0.5rem;
237237
}
238238

239239
.ui5-shellbar-with-coPilot .ui5-shellbar-overflow-container-left {
240240
flex-basis: 50%;
241+
max-width: calc(50% - 1.5rem);
241242
}
242243

243244
.ui5-shellbar-menu-button {
@@ -408,6 +409,7 @@ slot[name="profile"] {
408409
pointer-events: none;
409410
}
410411

412+
411413
/**
412414
* IE styles
413415
*/

‎packages/fiori/test/pages/FCL.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@
596596
<ui5-title level="H5">Rating:</ui5-title>
597597
<ui5-rating-indicator
598598
id="productRating"
599-
aria-label="Hello World"
599+
accessible-name="Hello World"
600600
value="3.5"
601601
></ui5-rating-indicator>
602602
</div>

‎packages/fiori/test/pages/NotificationListGroupItem.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h3>Events on ui5-list level</h3>
4848
<li>itemToggle</li>
4949
</ul>
5050

51-
<ui5-list id="notificationList" header-text="Notifications grouped">
51+
<ui5-list id="notificationList" header-text="Notifications grouped" accessible-role="list">
5252
<ui5-li-notification-group
5353
show-close
5454
show-counter
@@ -209,7 +209,7 @@ <h3>Events on ui5-list level</h3>
209209
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
210210

211211
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
212-
<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
212+
<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
213213
<ui5-li-notification-group
214214
show-close
215215
show-counter

‎packages/fiori/test/pages/NotificationListItem.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ <h3>Events on ui5-list level</h3>
4949
<li>itemClose</li>
5050
</ul>
5151

52-
<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'">
52+
<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'" accessible-role="list">
5353

5454
<ui5-li-notification
5555
busy
@@ -119,7 +119,7 @@ <h3>Events on ui5-list level</h3>
119119

120120
<br><br>
121121

122-
<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'">
122+
<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'" accessible-role="list">
123123

124124
<ui5-li-notification
125125
show-close
@@ -172,7 +172,7 @@ <h3>Events on ui5-list level</h3>
172172
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
173173

174174
<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
175-
<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
175+
<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
176176
<ui5-li-notification
177177
show-close
178178
heading="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."

‎packages/fiori/test/samples/Bar2.sample.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<header>
2+
<div class="control-header">Bar</div>
3+
<div class="component-heading-since">
4+
<span><!--since_tag_marker--></span>
5+
</div>
6+
</header>
7+
8+
<div class="component-package">@ui5/webcomponents-fiori</div>
9+
10+
<div class="control-tag">&lt;ui5-bar&gt;</div>
11+
12+
<section>
13+
<h3>Header Bar</h3>
14+
<div class="snippet">
15+
<ui5-bar design="Header">
16+
<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
17+
<ui5-label id="basic-label">Header Title</ui5-label>
18+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
19+
</ui5-bar>
20+
</div>
21+
<pre class="prettyprint lang-html"><xmp>
22+
<ui5-bar design="Header">
23+
<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
24+
<ui5-label>Header Title</ui5-label>
25+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
26+
</ui5-bar>
27+
</xmp></pre>
28+
</section>
29+
<section>
30+
<h3>Subheader Bar</h3>
31+
<div class="snippet">
32+
<ui5-bar design="Subheader">
33+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
34+
<ui5-label id="basic-label">Subheader Title</ui5-label>
35+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
36+
</ui5-bar>
37+
</div>
38+
<pre class="prettyprint lang-html"><xmp>
39+
<ui5-bar design="Subheader">
40+
<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
41+
<ui5-label>Subheader Title</ui5-label>
42+
<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
43+
</ui5-bar>
44+
</xmp></pre>
45+
</section>
46+
<section>
47+
<h3>Footer Bar</h3>
48+
<div class="snippet">
49+
<ui5-bar design="Footer">
50+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
51+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
52+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
53+
</ui5-bar>
54+
</div>
55+
<pre class="prettyprint lang-html"><xmp>
56+
<ui5-bar design="Footer">
57+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
58+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
59+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
60+
</ui5-bar>
61+
</xmp></pre>
62+
</section>
63+
<section>
64+
<h3>FloatingFooter Bar</h3>
65+
<div class="snippet">
66+
<ui5-bar design="FloatingFooter">
67+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
68+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
69+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
70+
</ui5-bar>
71+
</div>
72+
<pre class="prettyprint lang-html"><xmp>
73+
<ui5-bar design="FloatingFooter">
74+
<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
75+
<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
76+
<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
77+
</ui5-bar>
78+
</xmp></pre>
79+
</section>
80+
81+
<!-- JSDoc marker -->

‎packages/fiori/test/samples/FlexibleColumnLayout.sample.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
124124
<ui5-title level="H5">Rating:</ui5-title>
125125
<ui5-rating-indicator
126126
id="productRating"
127-
aria-label="Hello World"
127+
accessible-name="Hello World"
128128
value="3.5"
129129
></ui5-rating-indicator>
130130
</div>

‎packages/fiori/test/specs/NotificationList.spec.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -158,17 +158,7 @@ describe("Notification List Item Tests", () => {
158158
"The ariaLabelledBy text is correct.");
159159
});
160160

161-
it("tests List Item ACC invisible text", () => {
162-
const EXPECTED_RESULT = "Notification unread High Priority";
163-
const firstItem = $("#nli1");
164-
const invisibleText = firstItem.shadow$(".ui5-hidden-text");
165-
166-
// assert
167-
assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
168-
"The invisible text is correct.");
169-
});
170-
171-
it("tests List Group Item ACC ariaLabelledBy", () => {
161+
it("tests List Item ACC ariaLabelledBy", () => {
172162
const firstItem = $("#nli1");
173163
const firstItemRoot = firstItem.shadow$(".ui5-nli-root");
174164

@@ -182,4 +172,23 @@ describe("Notification List Item Tests", () => {
182172
assert.strictEqual(firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY,
183173
"The ariaLabelledBy text is correct.");
184174
});
175+
176+
it("tests List Item ACC invisible text", () => {
177+
const EXPECTED_RESULT = "Notification unread High Priority";
178+
const firstItem = $("#nli1");
179+
const invisibleText = firstItem.shadow$(".ui5-hidden-text");
180+
181+
// assert
182+
assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
183+
"The invisible text is correct.");
184+
});
185+
186+
it("tests List (Group) Item ACC role", () => {
187+
const firstItemRoot = $("#nli1").shadow$(".ui5-nli-root");
188+
const firstGroupItemRoot = $("#nlgi1").shadow$(".ui5-nli-group-root");
189+
const EXPECTED_ROLE = "listitem";
190+
191+
assert.strictEqual(firstGroupItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
192+
assert.strictEqual(firstItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
193+
});
185194
});

‎packages/main/src/Avatar.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
role="{{_role}}"
1111
aria-haspopup="{{_ariaHasPopup}}"
1212
>
13-
{{#if image}}
14-
<span class="ui5-avatar-img" style="{{styles.img}}" role="img" aria-label="{{accessibleNameText}}"></span>
13+
{{#if hasImage}}
14+
<slot></slot>
1515
{{else if icon}}
1616
<ui5-icon class="ui5-avatar-icon" name="{{icon}}" accessible-name="{{accessibleNameText}}"></ui5-icon>
1717
{{else if initials}}

0 commit comments

Comments
 (0)