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

Jump to bottom

Use aria attributes in dialog markup #6402

Merged
merged 7 commits into from
Sep 29, 2019
Merged

Use aria attributes in dialog markup #6402

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
c288258
Add role, aria-labbelledby, aria-describedby and some id's for the he…
BatJan Sep 22, 2019
9867106
Change the overlay headline from h4 to h1 since when the dialog is op…
BatJan Sep 22, 2019
d9460bd
Adjust line-height since the default for h1 is too much
BatJan Sep 22, 2019
e33518d
Improve semantics by taking care of the sub headlines being h2 not h5…
BatJan Sep 22, 2019
a5b0112
Don't fallback to the content text after all - since it's the same th…
BatJan Sep 22, 2019
511330c
Optimize semantics and style them accordingly
BatJan Sep 22, 2019
e3061bd
Remove stuff that is uneccessary
BatJan Sep 22, 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
26 changes: 12 additions & 14 deletions src/Umbraco.Web.UI.Client/src/less/components/overlays.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -20,19 +24,18 @@
margin-top: 0;
flex-grow: 0;
flex-shrink: 0;

padding: 20px 30px 0;
}

.umb-overlay__section-header {
width: 100%;
margin-top:30px;
margin-bottom: 10px;

h5 {
display: inline;
}

button {
display: inline;
float: right;
Expand All @@ -47,6 +50,7 @@
.umb-overlay__title {
font-size: @fontSizeLarge;
color: @black;
line-height: 20px;
font-weight: bold;
margin: 7px 0;
}
Expand All @@ -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;
Expand All @@ -75,7 +78,6 @@
flex-basis: 31px;
padding: 10px 20px;
margin: 0;

background: @gray-10;
border-top: 1px solid @purple-l3;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand Down
23 changes: 11 additions & 12 deletions src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down