accessibility fixes and minor css changes.
- added aria-hidden = "true" to prevent icons to be read by screen readers
- moved code on pages into "page-header" for better consistency
Change-Id: I3f497b2707991f7f628892a05734eea183a0d01d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index 8dc33c0..db5bdd7 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -25,7 +25,8 @@
h1, .h1 {
font-size: 3rem;
font-weight: 500;
- padding-top: .5em;
+ padding-top: .5rem;
+ margin-bottom: .6em;
}
h2, .h2 {
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 1131d82..91c60d5 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -95,6 +95,7 @@
width: 0;
position: absolute;
overflow: hidden;
+ display: block;
}
.show-scroll {
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 5225284..ad5e74f 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -6,7 +6,7 @@
.page-header {
position: relative;
border-bottom: 1px solid $lightbg__grey;
- margin: 1.625em 0 1.2em 0;
+ margin: .5em 0 2.2em;
padding-left: 0;
.h4 {
padding: .1em 0 0 0;
@@ -22,6 +22,10 @@
@include mediaQuery(x-small){
padding: 1rem 2rem;
}
+ section.row,
+ .column.row.row, .row.row.columns{
+ margin-left: 0;
+ }
}
.content-header {
diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html
index 76dbfe2..1d89138 100644
--- a/app/configuration/controllers/firmware-controller.html
+++ b/app/configuration/controllers/firmware-controller.html
@@ -1,11 +1,7 @@
-<div id="firmware">
- <div class="row column">
- <h1>Firmware</h1>
- </div>
-</div>
<div class="row column">
+ <h1>Firmware</h1>
<div class="column small-12 page-header">
- <h1 class="inline h4">Manage BMC and server firmware</h1>
+ <h2 class="inline h4">Manage BMC and server firmware</h2>
</div>
</div>
<div class="row column">
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index 321bb3f..1c50dc0 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -1,5 +1,3 @@
-
-
.firmware__ready {
font-weight: 300;
}
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 8d40745..9446a35 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -77,48 +77,6 @@
</div>
</div>
<!-- Power metadata -->
- <div class="row column overview__event-log event-log__events" ng-show="logs.length">
- <div class="page-header">
- <h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
- <a href="#/server-health/event-log/high" class="inline float-right">View all event logs</a>
- </div>
- <!-- show when there are no critical events from event log -->
- <!-- <p class="disabled">No high priority events</p> -->
-
- <!-- single event -->
- <a href="#/server-health/event-log/high/{{event.Id}}" ng-repeat="event in logs|orderBy:'+Id'">
- <div class="row column event-log__single-event">
- <div class="row">
- <div class="column small-1 large-1 event-log__col-check">
- <label class="control-check">
- <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
- ng-checked="event.selected"/>
- <span class="control__indicator"></span>
- </label>
- </div>
- <div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
- <p class="inline event__id">#{{event.Id}}</p>
- <p class="inline event__priority high-priority">High</p>
- <p class="inline event__severity high-priority">{{event.severity_code}}</p>
- <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p>
- <div>
- <p class="inline event__description">{{event.Severity}}</p>
- </div>
- </div>
- <div class="column small-1 large-1">
- <span class="button accord-trigger"></span>
- </div>
- </div>
- </div>
- </a>
- </div>
-
- <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
- <div class="page-header">
- <h3 class="bold h4">High priority events (0)</h3>
- </div>
- <p>There are no high priority events to display at this time.</p>
- </div>
</div>
<div class="column large-4 no-padding">
<div class="quick-links">
@@ -143,7 +101,7 @@
</div>
</div>
<a href="#/server-control/remote-console" class="no-icon quick-links__item">
- <p class="inline quick-links__label">Launch Serial Over Lan</p>
+ <p class="inline quick-links__label">Serial Over Lan</p>
<span class="btn-pop-out inline float-right"></span>
</a>
<a href="#/configuration/network" class="quick-links__item">
@@ -152,4 +110,48 @@
</div>
</div>
</section>
+ <section class="row">
+ <div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
+ <div class="page-header">
+ <h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
+ <a href="#/server-health/event-log/high" class="inline float-right">View all event logs</a>
+ </div>
+ <!-- show when there are no critical events from event log -->
+ <!-- <p class="disabled">No high priority events</p> -->
+
+ <!-- single event -->
+ <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'+Id'">
+ <div class="row column event-log__single-event">
+ <div class="row">
+ <div class="column small-1 large-1 event-log__col-check">
+ <label class="control-check">
+ <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
+ ng-checked="event.selected"/>
+ <span class="control__indicator"></span>
+ </label>
+ </div>
+ <div class="column small-9 large-10 event-log__event-info" ng-click=""><!-- click will go to specific event in event log page-->
+ <p class="inline event__id">#{{event.Id}}</p>
+ <p class="inline event__priority high-priority">High</p>
+ <p class="inline event__severity high-priority">{{event.severity_code}}</p>
+ <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p>
+ <div>
+ <p class="inline event__description">{{event.Severity}}</p>
+ </div>
+ </div>
+ <div class="column small-1 large-1">
+ <button class="accord-trigger" aria-hidden="true"></button>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+
+ <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
+ <div class="page-header">
+ <h3 class="bold h4">High priority events (0)</h3>
+ </div>
+ <p>There are no high priority events to display at this time.</p>
+ </div>
+ </section>
</div>
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index bb2655e..308546b 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -2,10 +2,7 @@
<div class="row column">
<h1>Server power operations</h1>
- </div>
-
- <div class="row column">
- <div class="power__current-status ">
+ <div class="power__current-status page-header">
<h2 class="inline h4">Current status</h2>
<div class="power__status-log inline float-right">Last power operation at <span class="courier-bold">{{dataService.last_updated |date:'h:mm:ss on MMM dd yyyy'}}</span></div>
</div>
@@ -23,28 +20,28 @@
<!-- Power on displays only when server is shutdown -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Running' || dataService.server_state == 'Quiesced'" ng-class="{disabled: dataService.server_unreachable || (confirm && !power_confirm) || dataService.loading, transitionAll: confirm && power_confirm}">
- <button id="power__power-on" class="btn-secondary inline" ng-click="togglePower()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" alt="power on">Power on</button>
+ <button id="power__power-on" class="btn-secondary inline" ng-click="togglePower()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" alt="power on" aria-hidden="true">Power on</button>
<p class="inline">Attempts to power on the server</p>
</div>
<!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !warmboot_confirm) || dataService.loading, transitionAll: confirm && warmboot_confirm}">
- <button id="power__warm-boot" class="btn-secondary inline" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Warm reboot</button>
+ <button id="power__warm-boot" class="btn-secondary inline" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i aria-hidden="true">↻</i> Warm reboot</button>
<p class="inline">Attempts to perform an orderly shutdown before restarting the server</p>
<confirm title="warm reboot" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !coldboot_confirm) || dataService.loading, transitionAll: confirm && coldboot_confirm}">
- <button id="power__cold-boot" class="btn-secondary inline" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Cold reboot</button>
+ <button id="power__cold-boot" class="btn-secondary inline" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i aria-hidden="true">↻</i> Cold reboot</button>
<p class="inline">Shuts down the server immediately, then restarts it</p>
<confirm title="cold reboot" confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="coldReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !orderly_confirm) || dataService.loading, transitionAll: confirm && orderly_confirm}">
- <button id="power__soft-shutdown" class="btn-secondary inline" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Orderly shutdown</button>
+ <button id="power__soft-shutdown" class="btn-secondary inline" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img aria-hidden="true" src="assets/images/icon-power.svg" />Orderly shutdown</button>
<p class="inline">Attempts to stop all software on the server before removing power</p>
<confirm title="orderly shutdown" confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="orderlyShutdown"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !immediately_confirm) || dataService.loading, transitionAll: confirm && immediately_confirm}">
- <button id="power__hard-shutdown" class="btn-secondary inline" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Immediate shutdown</button>
+ <button id="power__hard-shutdown" class="btn-secondary inline" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img aria-hidden="true" src="assets/images/icon-power.svg" />Immediate shutdown</button>
<p class="inline">Removes power from the server without waiting for software to stop</p>
<confirm title="immediate shutdown" confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="immediateShutdown"></confirm>
</div>
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index ddc751e..419d3bc 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -49,8 +49,8 @@
<button class="btn-primary" ng-click="confirm = false">No</button>
</div>
</div>
- <p class="inline" ng-show="selectedEvents.length"><span class="event__select-count">{{selectedEvents.length}}</span> Events are Selected</p>
- <p class="inline" ng-hide="selectedEvents.length"><span class="event__select-count">{{filteredLogs.length}}</span> Events are Logged</p>
+ <p class="inline" ng-show="selectedEvents.length"><span class="event__select-count">{{selectedEvents.length}}</span> Events are selected</p>
+ <p class="inline" ng-hide="selectedEvents.length"><span class="event__select-count">{{filteredLogs.length}}</span> Events are logged</p>
<!-- when logs are selected, this text changes to show how many logs are checked -->
<div class="event__actions">
<button class="inline btn-delete" ng-show="selectedEvents.length || all" ng-click="confirm= ! confirm">
@@ -70,6 +70,6 @@
multi-selected="selectedEvents.length > 1"
>
</log-event>
+ <dir-pagination-controls template-url="common/directives/dirPagination.tpl.html"></dir-pagination-controls>
</section>
- <dir-pagination-controls template-url="common/directives/dirPagination.tpl.html"></dir-pagination-controls>
</div> <!-- end event log -->
diff --git a/app/server-health/controllers/unit-id-controller.html b/app/server-health/controllers/unit-id-controller.html
index 98b0bd5..23f5b1b 100644
--- a/app/server-health/controllers/unit-id-controller.html
+++ b/app/server-health/controllers/unit-id-controller.html
@@ -1,10 +1,9 @@
<div id="uid-switch">
<div class="row column">
<h1>Server LED</h1>
- </div>
-
- <div class="row column">
- <h2 class="h4">LED light control</h2>
+ <div class="page-header">
+ <h2 class="h4">LED light control</h2>
+ </div>
</div>
<div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}">
diff --git a/app/server-health/styles/unit-id.scss b/app/server-health/styles/unit-id.scss
index cd7a9fe..4b59437 100644
--- a/app/server-health/styles/unit-id.scss
+++ b/app/server-health/styles/unit-id.scss
@@ -9,11 +9,4 @@
margin: 0;
&:first-child {font-weight: 700;}
}
- .h4 {
- border-bottom: 1px solid $lightbg__grey;
- margin: 2.625em 0 1.2em 0;
- padding: 0 0 .85em;
- font-weight: 700;
- }
-
}
\ No newline at end of file
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index ea3d6e3..3f05bff 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -1,11 +1,11 @@
<div id="user-accounts">
<div class="row column">
<h1>Manage user account</h1>
- </div>
- <section class="row column" aria-label="change password form">
<div class="column small-12 page-header">
<h2 class="h4">Change password</h2>
</div>
+ </div>
+ <section class="row column" aria-label="change password form">
<form class="user-manage__form" role="form" action="">
<fieldset>
<legend aria-label="user manager" class="accessible-text">Change password form</legend>