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-shellbar): enable items keyboard handling #1473

Merged
merged 9 commits into from
Apr 14, 2020
+250 −175
Merged

fix(ui5-shellbar): enable items keyboard handling #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d85b5a3
fix(ui5-shellbar): enable items navigation with TAB
ilhan007 Apr 13, 2020
0028964
update tests
ilhan007 Apr 13, 2020
bb37a9a
use ui5-buttons only
ilhan007 Apr 13, 2020
2923514
fix IE visual issues
ilhan007 Apr 14, 2020
863b4bb
fix test
ilhan007 Apr 14, 2020
b4b4862
fix menu popover initial focus
ilhan007 Apr 14, 2020
e86aac0
enable keyboard handling for coPilot
ilhan007 Apr 14, 2020
79d4bce
extract duplicated code
ilhan007 Apr 14, 2020
4cd28df
adjust menu btn tabindex
ilhan007 Apr 14, 2020
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
117 changes: 83 additions & 34 deletions packages/fiori/src/ShellBar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<div
class="{{classes.wrapper}}"
dir="{{rtl}}"
@keydown={{_onkeydown}}
>
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">

Expand All @@ -14,7 +13,7 @@
{{/unless}}

{{#if showArrowDown}}
<button tabindex="0" class="{{classes.button}}" @click="{{_header.press}}">
<button tabindex="{{menuBtnTabindex}}" class="{{classes.button}}" @click="{{_header.press}}">
{{#if interactiveLogo}}
<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
{{/if}}
Expand All @@ -34,42 +33,18 @@

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
{{#if showCoPilot}}
{{> coPilot}}
<div class="ui5-shellbar-copilot-wrapper"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When this is focused, the focus is blue and only seen on the sides, not on top/bottom. Is this expected?

tabindex="0"
@keydown="{{_coPilotKeydown}}"
@keyup="{{_coPilotKeyup}}"
?active="{{coPilotActive}}">
{{> coPilot}}
</div>
{{else}}
<span class="ui5-shellbar-co-pilot-placeholder"></span>
{{/if}}
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">

<div class="ui5-shellbar-overflow-container-right-child">
{{#each _itemsInfo}}
{{#if this.icon}}
<ui5-icon
tabindex="{{this._tabIndex}}"
data-count="{{this.count}}"
data-ui5-notification-count="{{../notificationCount}}"
data-ui5-external-action-item-id="{{this.refItemid}}"
class="{{this.classes}}"
name="{{this.icon}}"
id="{{this.id}}"
style="{{this.style}}"
@click={{this.press}}>
</ui5-icon>
{{else}}
<slot
name="profile"
id="{{this.id}}"
style="{{this.style}}"
class="{{this.classes}}"
tabindex="{{this._tabIndex}}"
@click={{this.press}}
></slot>
{{/if}}
{{/each}}
</div>
</div>

<div id="{{_id}}-searchfield-wrapper"
class="ui5-shellbar-search-field"
style="{{styles.searchField}}"
Expand All @@ -78,10 +53,84 @@
<slot name="searchField"></slot>
{{/if}}
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">

<div class="ui5-shellbar-overflow-container-right-child">

{{#if hasSearchField}}
<ui5-button
id="{{this._id}}-item-1"
class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
icon="sap-icon://search"
data-ui5-text="Search"
data-ui5-notification-count="{{notificationCount}}"
@click={{_handleSearchIconPress}}
></ui5-button>
{{/if}}

{{#each customItemsInfo}}
<ui5-button
id="{{this.id}}"
style="{{this.style}}"
class="{{this.classes}}"
icon="{{this.icon}}"
data-count="{{this.count}}"
data-ui5-notification-count="{{../notificationCount}}"
data-ui5-external-action-item-id="{{this.refItemid}}"
@click={{this.press}}
></ui5-button>
{{/each}}

{{#if showNotifications}}
<ui5-button
id="{{this._id}}-item-2"
style="{{styles.items.notification}}"
class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
icon="sap-icon://bell"
data-ui5-text="Notifications"
data-ui5-notification-count="{{notificationCount}}"
@click={{_handleNotificationsPress}}
></ui5-button>
{{/if}}

<ui5-button
id="{{this._id}}-item-5"
style="{{styles.items.overflow}}"
class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
icon="sap-icon://overflow"
@click="{{_handleOverflowPress}}"
></ui5-button>

{{#if hasProfile}}
<ui5-button
profile-btn
id="{{this._id}}-item-3"
@click={{_handleProfilePress}}
style="{{styles.items.profile}}"
class="ui5-shellbar-button ui5-shellbar-image-button">
<slot
name="profile"
></slot>
</ui5-button>
{{/if}}

{{#if showProductSwitch}}
<ui5-button
id="{{this._id}}-item-4"
style="{{styles.items.product}}"
class="{{classes.items.product}} ui5-shellbar-button ui5-shellbar-button-product-switch"
icon="sap-icon://grid"
data-ui5-text="Product Switch"
@click={{_handleProductSwitchPress}}
></ui5-button>
{{/if}}
</div>
</div>
</div>

{{#*inline "coPilot"}}
<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">
<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">
<defs>
<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>
<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>
Expand Down
Loading