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

"Actions" is identified as a button, but behaves like a drop down #6303

Merged
merged 7 commits into from
Sep 15, 2019
Merged

"Actions" is identified as a button, but behaves like a drop down #6303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
461b1dc
Refactor empty <a> tag to <button> and make sure to hide the non-sema…
BatJan Sep 7, 2019
f2cfeea
Add aria parameters and add missing documentation for autoFocus while…
BatJan Sep 7, 2019
3c3185c
Add new attributes to the button directive view
BatJan Sep 7, 2019
101b7b7
Add new attributes to the directive call
BatJan Sep 7, 2019
ab89add
Remember to use the correct attribute format and fix the bindings
BatJan Sep 7, 2019
1d18dfb
Add aria-hidden attributes for non-visual elements
BatJan Sep 7, 2019
b64e18d
Add deep-blur directive
BatJan Sep 7, 2019
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
11 changes: 8 additions & 3 deletions src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
@param {boolean=} disabled Set to <code>true</code> to disable the button.
@param {string=} addEllipsis Adds an ellipsis character (…) to the button label which means the button will open a dialog or prompt the user for more information.
@param {string=} showCaret Shows a caret on the right side of the button label
@param {string=} autoFocus add autoFocus to the button
@param {string=} hasPopup Used to expose to the accessibility API whether the button will trigger a popup or not
@param {string=]} isExpanded Used to add an aria-expanded attribute and expose whether the button has expanded a popup or not

**/

Expand Down Expand Up @@ -96,7 +99,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
alias: "@?",
addEllipsis: "@?",
showCaret: "@?",
autoFocus: "@?"
autoFocus: "@?",
hasPopup: "@?",
isExpanded: "<?"
}
});

Expand Down Expand Up @@ -126,13 +131,13 @@ Use this directive to render an umbraco button. The directive can be used to gen

// make it possible to pass in multiple styles
if(vm.buttonStyle.startsWith("[") && vm.buttonStyle.endsWith("]")) {

// when using an attr it will always be a string so we need to remove square brackets
// and turn it into and array
var withoutBrackets = vm.buttonStyle.replace(/[\[\]']+/g,'');
// split array by , + make sure to catch whitespaces
var array = withoutBrackets.split(/\s?,\s?/g);

angular.forEach(array, function(item){
vm.style = vm.style + " " + "btn-" + item;
if(item === "block") {
Expand Down
25 changes: 18 additions & 7 deletions src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,36 @@

<a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</a>

<button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<button
ng-if="vm.type === 'button'"
type="button"
class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}"
ng-click="vm.clickButton($event)"
hotkey="{{vm.shortcut}}"
hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
ng-disabled="vm.disabled"
umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}"
aria-haspopup="{{vm.hasPopup}}"
aria-expanded="{{vm.isExpanded}}"
>
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</button>

<button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
<span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
<i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
{{vm.buttonLabel}}
<span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
<span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
</span>
</button>

Expand Down
13 changes: 8 additions & 5 deletions src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,18 @@
button-style="white"
action="dropdown.isOpen = !dropdown.isOpen"
label-key="general_actions"
show-caret="true">
show-caret="true"
has-popup="true"
is-expanded="dropdown.isOpen"
>
</umb-button>

<umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false">
<umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false" deep-blur="dropdown.isOpen = false">
<umb-dropdown-item class="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
<a href="" ng-click="executeMenuItem(action)" prevent-default>
<i class="icon icon-{{action.cssclass}}"></i>
<button type="button" ng-click="executeMenuItem(action)">
<i class="icon icon-{{action.cssclass}}" aria-hidden="true"></i>
<span class="menu-label">{{action.name}}</span>
</a>
</button>
</umb-dropdown-item>
</umb-dropdown>

Expand Down