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

Accessibility: "Save and publish" has a drop down that can't be accessed via keyboard #5884

Merged
merged 13 commits into from
Sep 5, 2019
Merged

Accessibility: "Save and publish" has a drop down that can't be accessed via keyboard #5884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
81f1ee5
Change the <a> to a <button> in order to improve semantics
BatJan Jul 13, 2019
327ab7c
Add aria-expanded attribute for communicating the expanded state to s…
BatJan Jul 13, 2019
c6a2cfb
Add the aria-controls attribute with a reference to the id of the dro…
BatJan Jul 13, 2019
b1e643e
Extend directive with label and labelKey attributes
BatJan Jul 13, 2019
d8410d6
Add button text to language files
BatJan Jul 13, 2019
354cfc6
Convert <a> tags to <button> tags for better semantics ensuring the s…
BatJan Jul 13, 2019
44e116d
Hide the ellipsis from screen readers
BatJan Jul 13, 2019
a39092c
add role "menu" to improve screen reader accessibility
BatJan Jul 15, 2019
83bff94
Add role="menuitem" in order to improve screen reader accessibility
BatJan Jul 15, 2019
2e12529
refactor aria attributes to properly follow the "menu" pattern for be…
BatJan Jul 15, 2019
6158ecc
Merge branch 'v8/dev' into pr/5884
nul800sebastiaan Sep 5, 2019
0e88aed
visuallyhidden class has changed to sr-only
nul800sebastiaan Sep 5, 2019
da4fc0a
Don't think 12 is necessary here ;)
nul800sebastiaan Sep 5, 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
4 changes: 3 additions & 1 deletion ...mbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,9 @@ Use this directive to render a button with a dropdown of alternative actions.
float: "@?",
buttonStyle: "@?",
size: "@?",
icon: "@?"
icon: "@?",
label: "@?",
labelKey: "@?"
},
link: link
};
Expand Down
33 changes: 22 additions & 11 deletions src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="btn-group umb-button-group" ng-class="{'dropup': direction === 'up'}">

<umb-button
ng-if="defaultButton"
alias="{{defaultButton.alias ? defaultButton.alias : 'groupPrimary' }}"
Expand All @@ -16,21 +16,32 @@
add-ellipsis={{defaultButton.addEllipsis}}>
</umb-button>

<a data-element="button-group-toggle"
href="#"
<button data-element="button-group-toggle"
type="button"
prevent-default
class="btn btn-{{buttonStyle}} dropdown-toggle umb-button-group__toggle umb-button--{{size}}"
class="btn btn-{{buttonStyle}} dropdown-toggle umb-button-group__toggle umb-button--{{size}}"
ng-if="subButtons.length > 0"
ng-click="toggleDropdown()">
<span class="caret"></span>
</a>
ng-click="toggleDropdown()"
aria-haspopup="true"
aria-expanded="{{dropdown.isOpen}}">
<span class="caret">
<span class="sr-only">
<localize key="{{labelKey}}">{{label}}</localize>
</span>
</span>
</button>

<umb-dropdown ng-show="subButtons.length > 0 && dropdown.isOpen" class="umb-button-group__sub-buttons" on-close="closeDropdown()" ng-class="{'-align-right': float === 'right'}">
<umb-dropdown-item ng-repeat="subButton in subButtons">
<a data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}" href="#" ng-click="executeMenuItem(subButton)" hotkey="{{subButton.hotKey}}" hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}" prevent-default>
<localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
<span ng-if="subButton.addEllipsis === 'true'">...</span>
</a>
<button
data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}"
type="button" ng-click="executeMenuItem(subButton)"
hotkey="{{subButton.hotKey}}"
hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}"
prevent-default>
<localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
<span ng-if="subButton.addEllipsis === 'true'" aria-hidden="true">...</span>
</button>
</umb-dropdown-item>
</umb-dropdown>

Expand Down
4 changes: 3 additions & 1 deletion src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@
sub-buttons="subButtons"
state="page.buttonGroupState"
direction="up"
float="right">
float="right"
label-key="buttons_morePublishingOptions"
label="More publishing options">
</umb-button-group>

<umb-button
Expand Down
2 changes: 1 addition & 1 deletion src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<li ng-transclude></li>
<li role="menuitem" ng-transclude></li>
2 changes: 1 addition & 1 deletion src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<ul class="dropdown-menu" on-outside-click="close()" ng-transclude></ul>
<ul class="dropdown-menu" role="menu" on-outside-click="close()" ng-transclude></ul>
1 change: 1 addition & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
<key alias="deleteTag">Slet tag</key>
<key alias="confirmActionCancel">Fortryd</key>
<key alias="confirmActionConfirm">Bekræft</key>
<key alias="morePublishingOptions">Flere publiseringsmuligheder</key>
</area>
<area alias="auditTrails">
<key alias="atViewingFor">For</key>
Expand Down
1 change: 1 addition & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
<key alias="deleteTag">Delete tag</key>
<key alias="confirmActionCancel">Cancel</key>
<key alias="confirmActionConfirm">Confirm</key>
<key alias="morePublishingOptions">More publishing options</key>
</area>
<area alias="auditTrails">
<key alias="atViewingFor">Viewing for</key>
Expand Down
1 change: 1 addition & 0 deletions src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
<key alias="deleteTag">Delete tag</key>
<key alias="confirmActionCancel">Cancel</key>
<key alias="confirmActionConfirm">Confirm</key>
<key alias="morePublishingOptions">More publishing options</key>
</area>
<area alias="auditTrails">
<key alias="atViewingFor">Viewing for</key>
Expand Down