Skip to content

Commit 185851a

Browse files
ilhan007ilhan007
authored
fix(ui5-shellbar): enable items keyboard handling (#1473)
All ui5-icon elements now become ui5-button, the ui5-button has tabindex=0 and also can be triggered with SPACE and ENTER. To ensure the correct tab order, the layout of the items is changed in such way that their DOM order is the same as their display order.
1 parent 27435ee commit 185851a

File tree

4 files changed

+250
-175
lines changed

4 files changed

+250
-175
lines changed

‎packages/fiori/src/ShellBar.hbs

+83-34
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div
22
class="{{classes.wrapper}}"
33
dir="{{rtl}}"
4-
@keydown={{_onkeydown}}
54
>
65
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
76

@@ -14,7 +13,7 @@
1413
{{/unless}}
1514

1615
{{#if showArrowDown}}
17-
<button tabindex="0" class="{{classes.button}}" @click="{{_header.press}}">
16+
<button tabindex="{{menuBtnTabindex}}" class="{{classes.button}}" @click="{{_header.press}}">
1817
{{#if interactiveLogo}}
1918
<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
2019
{{/if}}
@@ -34,42 +33,18 @@
3433

3534
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
3635
{{#if showCoPilot}}
37-
{{> coPilot}}
36+
<div class="ui5-shellbar-copilot-wrapper"
37+
tabindex="0"
38+
@keydown="{{_coPilotKeydown}}"
39+
@keyup="{{_coPilotKeyup}}"
40+
?active="{{coPilotActive}}">
41+
{{> coPilot}}
42+
</div>
3843
{{else}}
3944
<span class="ui5-shellbar-co-pilot-placeholder"></span>
4045
{{/if}}
4146
</div>
4247

43-
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
44-
45-
<div class="ui5-shellbar-overflow-container-right-child">
46-
{{#each _itemsInfo}}
47-
{{#if this.icon}}
48-
<ui5-icon
49-
tabindex="{{this._tabIndex}}"
50-
data-count="{{this.count}}"
51-
data-ui5-notification-count="{{../notificationCount}}"
52-
data-ui5-external-action-item-id="{{this.refItemid}}"
53-
class="{{this.classes}}"
54-
name="{{this.icon}}"
55-
id="{{this.id}}"
56-
style="{{this.style}}"
57-
@click={{this.press}}>
58-
</ui5-icon>
59-
{{else}}
60-
<slot
61-
name="profile"
62-
id="{{this.id}}"
63-
style="{{this.style}}"
64-
class="{{this.classes}}"
65-
tabindex="{{this._tabIndex}}"
66-
@click={{this.press}}
67-
></slot>
68-
{{/if}}
69-
{{/each}}
70-
</div>
71-
</div>
72-
7348
<div id="{{_id}}-searchfield-wrapper"
7449
class="ui5-shellbar-search-field"
7550
style="{{styles.searchField}}"
@@ -78,10 +53,84 @@
7853
<slot name="searchField"></slot>
7954
{{/if}}
8055
</div>
56+
57+
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
58+
59+
<div class="ui5-shellbar-overflow-container-right-child">
60+
61+
{{#if hasSearchField}}
62+
<ui5-button
63+
id="{{this._id}}-item-1"
64+
class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
65+
icon="sap-icon://search"
66+
data-ui5-text="Search"
67+
data-ui5-notification-count="{{notificationCount}}"
68+
@click={{_handleSearchIconPress}}
69+
></ui5-button>
70+
{{/if}}
71+
72+
{{#each customItemsInfo}}
73+
<ui5-button
74+
id="{{this.id}}"
75+
style="{{this.style}}"
76+
class="{{this.classes}}"
77+
icon="{{this.icon}}"
78+
data-count="{{this.count}}"
79+
data-ui5-notification-count="{{../notificationCount}}"
80+
data-ui5-external-action-item-id="{{this.refItemid}}"
81+
@click={{this.press}}
82+
></ui5-button>
83+
{{/each}}
84+
85+
{{#if showNotifications}}
86+
<ui5-button
87+
id="{{this._id}}-item-2"
88+
style="{{styles.items.notification}}"
89+
class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
90+
icon="sap-icon://bell"
91+
data-ui5-text="Notifications"
92+
data-ui5-notification-count="{{notificationCount}}"
93+
@click={{_handleNotificationsPress}}
94+
></ui5-button>
95+
{{/if}}
96+
97+
<ui5-button
98+
id="{{this._id}}-item-5"
99+
style="{{styles.items.overflow}}"
100+
class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
101+
icon="sap-icon://overflow"
102+
@click="{{_handleOverflowPress}}"
103+
></ui5-button>
104+
105+
{{#if hasProfile}}
106+
<ui5-button
107+
profile-btn
108+
id="{{this._id}}-item-3"
109+
@click={{_handleProfilePress}}
110+
style="{{styles.items.profile}}"
111+
class="ui5-shellbar-button ui5-shellbar-image-button">
112+
<slot
113+
name="profile"
114+
></slot>
115+
</ui5-button>
116+
{{/if}}
117+
118+
{{#if showProductSwitch}}
119+
<ui5-button
120+
id="{{this._id}}-item-4"
121+
style="{{styles.items.product}}"
122+
class="{{classes.items.product}} ui5-shellbar-button ui5-shellbar-button-product-switch"
123+
icon="sap-icon://grid"
124+
data-ui5-text="Product Switch"
125+
@click={{_handleProductSwitchPress}}
126+
></ui5-button>
127+
{{/if}}
128+
</div>
129+
</div>
81130
</div>
82131

83132
{{#*inline "coPilot"}}
84-
<svg @click="{{_coPilotPress}}" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
133+
<svg @click="{{_coPilotClick}}" focusable="false" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
85134
<defs>
86135
<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#c0d9f2" stop-opacity=".87"/><stop offset="80%" stop-color="#fff" stop-opacity=".87"/></linearGradient>
87136
<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".16"/><stop offset="80%" stop-color="#fff" stop-opacity=".16"/></linearGradient>

0 commit comments

Comments
 (0)