yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use aria attributes in dialog markup (#6402)

Browse Source
This commit is contained in:
Jan Skovgaard
2019-09-29 15:54:04 +02:00
committed by Sebastiaan Janssen
parent cb5b9ed7e4
commit 2cd92e7394
2 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/less/components/overlays.less
View File

@@ -6,6 +6,10 @@
animation: fadeIn 0.2s;
box-shadow: 0 10px 50px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.16);
text-align: left;
.scoped-view{
display: none;
}
}
.umb-overlay__form {
@@ -20,7 +24,6 @@
margin-top: 0;
flex-grow: 0;
flex-shrink: 0;
padding: 20px 30px 0;
}
@@ -28,11 +31,11 @@
width: 100%;
margin-top:30px;
margin-bottom: 10px;
h5 {
display: inline;
}
button {
display: inline;
float: right;
@@ -47,6 +50,7 @@
.umb-overlay__title {
font-size: @fontSizeLarge;
color: @black;
line-height: 20px;
font-weight: bold;
margin: 7px 0;
}
@@ -62,8 +66,7 @@
flex-shrink: 1;
flex-basis: auto;
position: relative;
padding: 0px 30px;
padding: 0 30px;
margin-bottom: 10px;
max-height: calc(100vh - 170px);
overflow-y: auto;
@@ -75,7 +78,6 @@
flex-basis: 31px;
padding: 10px 20px;
margin: 0;
background: @gray-10;
border-top: 1px solid @purple-l3;
}
@@ -124,11 +126,7 @@
max-height: 100vh;
box-sizing: border-box;
border-radius: @baseBorderRadius;
/* default:
&.umb-overlay--small {
width: 400px;
}
*/
&.umb-overlay--medium {
width: 480px;
}
@@ -228,12 +226,12 @@
}
.umb-overlay__item-details-title {
margin-top: 0;
margin-bottom: 0;
margin: 0;
font-size: 15px;
}
.umb-overlay__item-details-description {
margin-top: 10px;
margin: 10px 0 0;
font-size: 12px;
}

23
src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
View File

@@ -1,33 +1,32 @@
<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()">
<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
<ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
<div data-element="overlay-header" class="umb-overlay-header">
<h4 class="umb-overlay__title">{{model.title}}</h4>
<p class="umb-overlay__subtitle">{{model.subtitle}}</p>
<h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>
<p class="umb-overlay__subtitle" id="umb-overlay-description" ng-if="model.subtitle">{{model.subtitle}}</p>
</div>
<div data-element="overlay-content" class="umb-overlay-container form-horizontal">
<ng-transclude></ng-transclude>
<div ng-if="view && !parentScope" ng-include="view"></div>
<div class="scoped-view" style="display: none;"></div>
<div class="scoped-view"></div>
</div>
<!-- If model contains the property of "itemDetails" we render the relevant content here -->
<div class="umb-overlay__item-details" ng-if="model.itemDetails">
<div class="umb-overlay__item-details-title-wrapper" ng-if="model.itemDetails.icon || model.itemDetails.title">
<i class="{{ model.itemDetails.icon }} umb-overlay__item-details-icon" ng-if="model.itemDetails.icon"></i>
<h5 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ model.itemDetails.title }}</h5>
<i class="{{ model.itemDetails.icon }} umb-overlay__item-details-icon" ng-if="model.itemDetails.icon" aria-hidden="true"></i>
<h2 class="umb-overlay__item-details-title" ng-if="model.itemDetails.title">{{ model.itemDetails.title }}</h2>
</div>
<div class="umb-overlay__item-details-description" ng-if="model.itemDetails.description">{{ model.itemDetails.description }}</div>
<p class="umb-overlay__item-details-description" ng-if="model.itemDetails.description">{{ model.itemDetails.description }}</p>
</div>
<div data-element="overlay-footer" class="umb-overlay-drawer" ng-class="{'-auto-height': model.confirmSubmit.show}">
<div ng-if="model.confirmSubmit.show">
<h5 class="red" ng-if="model.confirmSubmit.title"><i class="icon-alert"></i> {{ model.confirmSubmit.title }}</h5>
<h2 class="red" ng-if="model.confirmSubmit.title">
<i class="icon-alert" aria-hidden="true"></i> {{ model.confirmSubmit.title }}
</h2>
<p ng-if="model.confirmSubmit.description">{{ model.confirmSubmit.description }}</p>
<label class="checkbox no-indent">