Accessibility fixes
- Add tab index order to navigation.
- Minor CSS changes.
Change-Id: I402d3cb8c1ac14bd930a5efcf472c1d249cfe00a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/assets/images/icon-info.svg b/app/assets/images/icon-info.svg
deleted file mode 100644
index b06bd0b..0000000
--- a/app/assets/images/icon-info.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18 14h-6v2h2v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-more.svg b/app/assets/images/icon-more.svg
deleted file mode 100644
index aaabe10..0000000
--- a/app/assets/images/icon-more.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 24.3 24.6" style="enable-background:new 0 0 24.3 24.6;" xml:space="preserve">
-<path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7
- S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
-<g>
- <circle cx="6.7" cy="12.5" r="1.5"/>
- <circle cx="12.1" cy="12.5" r="1.5"/>
- <circle cx="17.4" cy="12.5" r="1.5"/>
-</g>
-</svg>
diff --git a/app/assets/images/icon-user.svg b/app/assets/images/icon-user.svg
deleted file mode 100644
index 24740f6..0000000
--- a/app/assets/images/icon-user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zM24 23H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
\ No newline at end of file
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index c07e136..661b4a5 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -3,16 +3,16 @@
<li>
<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/system" ng-click="change('overview')" tabindex="1">
<span class="">
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" class="nav-icon">
<path d="M23.9,18.2l3.3,3.3l1.1-1.1L23.9,16l-7.8,7.8l-3.3-3.3l-1.1,1.1l4.4,4.4L23.9,18.2z"/>
<path d="M5,8v24h30V8H5z M33,30H7V12h26V30z"/>
</svg>
Server overview</span></a>
</li>
<li>
- <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="9">
+ <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="2">
<span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" class="nav-icon">
<polyline class="st0" points="32,12.9 32,16 8,16 8,8 27,8 "/>
<rect x="8" y="16" class="st0" width="24" height="8"/>
<rect x="8" y="24" class="st0" width="24" height="8"/>
@@ -29,9 +29,9 @@
</button>
</li>
<li>
- <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
+ <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')" tabindex="3">
<span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" class="nav-icon">
<line class="st0" x1="8" y1="12" x2="32" y2="12"/>
<line class="st0" x1="8" y1="20" x2="32" y2="20"/>
<line class="st0" x1="8" y1="28" x2="32" y2="28"/>
@@ -44,9 +44,10 @@
</button>
</li>
<li>
- <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
+ <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')" tabindex="4">
<span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve" class="nav-icon">
<path d="M31.5,20c0-0.6-0.1-1.2-0.2-1.8L35,15l-3.1-5.1l-4.4,1.4c-1.1-0.9-2.3-1.6-3.6-2.1L23,5h-6l-1,4.2c-1.3,0.5-2.5,1.2-3.6,2.1
L8.1,9.9L5,15l3.7,3.2c-0.1,0.6-0.2,1.2-0.2,1.8c0,0.6,0.1,1.2,0.2,1.8L5,25l3.1,5.1l4.4-1.4c1.1,0.9,2.3,1.6,3.6,2.1l1,4.2h6l1-4.2
c1.3-0.5,2.5-1.2,3.6-2.1l4.4,1.4L35,25l-3.7-3.2C31.4,21.2,31.5,20.6,31.5,20z M32.4,25.4L31,27.7l-2.9-0.9l-1.1-0.4l-0.9,0.7
@@ -59,7 +60,7 @@
Configuration</span></button>
</li>
<li>
- <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
+ <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')" tabindex="5">
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zM24 23H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg></span>
<span>Users</span>
</button>
@@ -71,18 +72,18 @@
<!--</ul>-->
<ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
<li ng-class="{'active': (path == '/server-health/event-log')}">
- <a href="#/server-health/event-log" tabindex="7" ng-click="closeSubnav()">Event log</a></li>
+ <a href="#/server-health/event-log" tabindex="3" ng-click="closeSubnav()">Event log</a></li>
<li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}" ng-click="closeSubnav()">
- <a href="#/server-health/inventory-overview">Hardware inventory</a></li>
+ <a href="#/server-health/inventory-overview" tabindex="4">Hardware inventory</a></li>
<li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
- <a href="#/server-health/sensors-overview" ng-click="closeSubnav()">Sensor data</a></li>
+ <a href="#/server-health/sensors-overview" ng-click="closeSubnav()" tabindex="5">Sensor data</a></li>
<!--<li ng-class="{'active': (path == '/server-health/power-consumption')}"><a href="#/server-health/power-consumption" tabindex="4" ng-click="closeSubnav()">Power consumption</a></li>-->
<li ng-class="{'active': (path == '/server-health/unit-id')}">
<a href="#/server-health/unit-id" tabindex="6" ng-click="closeSubnav()">Server indicator</a></li>
<!--<li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics" ng-click="closeSubnav()">Diagnostics</a></li>-->
</ul>
<ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
- <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}" tabindex="3">
+ <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
<a href="#/server-control/power-operations" ng-click="closeSubnav()">Server power operations</a></li>
<li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
<a href="#/server-control/bmc-reboot" tabindex="8" ng-click="closeSubnav()">Reboot BMC</a></li>
@@ -94,9 +95,6 @@
<a href="#/configuration/network" ng-click="closeSubnav()">Network settings</a></li>
<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
<a href="#/configuration/firmware" ng-click="closeSubnav()">Firmware</a></li>
- <!--<li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time" ng-click="closeSubnav()">Date & Time</a></li>-->
- <!--<li ng-class="{'active': (path == '/configuration/security')}"><a href="#/configuration/security" ng-click="closeSubnav()">Security</a></li>-->
- <!--<li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file" ng-click="closeSubnav()">Configuration File</a></li>-->
</ul>
<ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
<li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index bf2cc1f..70d7dee 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -15,7 +15,7 @@
<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>
+ <div class="control__indicator"></div>
</label>
</div>
<div class="column small-9 large-9 event-log__event-info"
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 6bda87f..2f53391 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -3,7 +3,7 @@
@include fontFamilyBold;
text-transform: none;
border-radius: 3px;
- padding: .5rem 1rem .5rem;
+ padding: .5rem 2rem .5rem;
height: auto;
border: 0;
overflow: hidden;
@@ -55,7 +55,7 @@
}
.btn-secondary {
color: $secbtn__text;
- background: $white;
+ background: transparent;
border: 2px solid $secbtn__border;
min-height: 40px;
&:hover {
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 42fea1b..7308cec 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -13,15 +13,15 @@
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
-//Disabled table elements
-$disabled-row: #dddee0;
-$disabled-row-txt: #999999;
-
// Dark background
$darkbg__grey: #E3ECEC;
$darkbg__accent: #79a6f6;
$darkbg__primary: #19273c;
+//Disabled table elements
+$disabled-row: #dddee0;
+$disabled-row-txt: #999999;
+
// Light Background
$lightbg__grey: #b8c1c1;
$lightbg__accent: #d8e2fc;
@@ -72,7 +72,7 @@
$not-present: $medium-lightbg;
// Links
-$links: #3f71ec;
+$links: #648FFF;
$links__hover: $lightbg__primary;
$links__visited: #8ea7ea;
$links__disabled: rgba(27, 40, 52, 0.70);
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 9cf4b09..3dc8fea 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -12,7 +12,9 @@
a {
color: $links;
- text-decoration: none;
+ &:visited {
+ color: $links__visited;
+ }
&:hover {
text-decoration: underline;
}
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 8d61548..e499095 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -4,9 +4,6 @@
height: 20px;
position: relative;
speak: none;
- &:hover {
- cursor: pointer;
- }
&.icon-as-spacer {
text-indent: -9999px;
}
@@ -17,6 +14,9 @@
stroke: $medblue;
background: $white;
overflow: visible;
+ &:hover {
+ cursor: pointer;
+ }
}
.icon__more-dropdown {
@@ -45,24 +45,11 @@
}
.icon__warning{
- margin-right: .7em;
- margin-top: -2px;
- &:before {
- content: '!';
- color: $alert__error;
- position: absolute;
- left: 55%;
- top: 40%;
- font-size: .7em;
- }
- &:after {
- content: '\025b3';
- position: absolute;
- left: 0;
- top: -10%;
- color: $alert__error;
- font-size: 1.5em;
- }
+ width: 30px;
+ height: 30px;
+ background-image: url(/assets/images/icon-warning.svg);
+ background-repeat: no-repeat;
+ vertical-align: middle;
}
.icon__info{
@@ -84,6 +71,9 @@
top: -50%;
transform: rotate(90deg);
}
+ &.hide {
+ text-align: -9999px;
+ }
}
.icon__down-arrow {
margin-right: 1em;
diff --git a/app/common/styles/base/index.scss b/app/common/styles/base/index.scss
index 81d255d..b8a33b9 100644
--- a/app/common/styles/base/index.scss
+++ b/app/common/styles/base/index.scss
@@ -4,7 +4,7 @@
@import 'mixins';
@import 'core';
@import 'typography';
+@import 'utility';
@import 'buttons';
@import 'forms';
@import 'icons';
-@import 'utility';
\ No newline at end of file
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index d381101..33cf61a 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -34,7 +34,7 @@
justify-content: center;
flex-direction: column;
background: transparent;
- border: 0;
+ border: 0px;
margin: 0;
&:hover {
color: $lightbg__accent;
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index d50f125..6e061a4 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -11,7 +11,7 @@
margin-right: 2em;
margin-bottom: 1em;
button {
- margin: 3px -3px;
+ margin: 3px -4px;
padding: .6em 2em;
min-height: 2.1em;
font-size: .9em;
@@ -21,9 +21,6 @@
&.last {
border-radius: 3px;
}
- &.last {
- border-left: 0;
- }
}
.btn-primary {
border: 2px solid $primebtn__bg;
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 53e3d27..13dbe44 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -8,7 +8,6 @@
border-bottom: 1px solid $lightbg__grey;
margin: 1.625em 0 1.2em 0;
padding-left: 0;
- padding-right: 0;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index aaec5b4..fe06d0b 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -7,7 +7,7 @@
top: 0;
left: 0;
right: 0;
- z-index: 200;
+ z-index: 300;
}
.app__version {
