Resolve accessibility isssues
- Remove unecessary aria-roles
- Associate label elements with form elements
- Remove extraneous markup on Network settings page
- Update generic markup to use definition list when appropriate
- Add aria-labels and aria-expanded to accordion triggers
Tested: Accessibility issues tested in using Lighthouse in Chrome
Developer tools Audit section and Dequeue Axe extension. Manually tested clicking on labels
set focus on the form elements. Visually tested of the Network
Settings page in Chrome, Firefox, and Safari to verify layout changes.
Resolves openbmc/phosphor-webui#76
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ib974c623e9d3b74e74e1f374c21e8191732ec26a
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 8d6a2ad..050ac05 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -1,10 +1,10 @@
-<div id="header__wrapper">
+<header id="header" class="header">
<!-- HEADER -->
- <header id="header">
- <span class="header__title float-left">OpenBMC</span>
+ <div class="header__info-section">
+ <span class="header__title">OpenBMC</span>
<a href="" class="header__logout" ng-click="logout()">Log out</a>
- </header>
- <div class="header__functions-wrapper" role="heading">
+ </div>
+ <div class="header__functions-section">
<div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
<div class="inline header__server-name">
<p class="header__hostname">{{dataService.hostname}}</p>
@@ -26,4 +26,4 @@
</button>
</div>
</div>
-</div>
+</header>
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index c1272de..baa8c8b 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -42,8 +42,7 @@
}
if ($scope.showNavigation) {
- paddingTop =
- document.getElementById('header__wrapper').offsetHeight;
+ paddingTop = document.getElementById('header').offsetHeight;
}
dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
$scope.navStyle = {'top': paddingTop + 'px'};
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 344dccb..5a183ed 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -31,7 +31,7 @@
</div>
<div class="column small-1 large-1">
<button class="accord-trigger" ng-class="{'active': event.meta}"
- ng-click="event.meta = ! event.meta"></button>
+ ng-click="event.meta = ! event.meta" aria-label="{{event.meta ? 'collapse' : 'expand'}}"></button>
</div>
</div>
<div class="row event__metadata-row" ng-class="{'active': event.meta}">
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 91c60d5..7a19475 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -15,7 +15,11 @@
float: right;
}
.clear-float {
- clear: both;
+ &::after {
+ content: " ";
+ display: block;
+ clear: both;
+ }
}
.error {
color: $error-color;
@@ -91,11 +95,14 @@
}
.accessible-text {
- height: 0;
- width: 0;
- position: absolute;
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ width: 1px;
+ margin: -1px;
overflow: hidden;
- display: block;
+ padding: 0;
+ position: absolute;
}
.show-scroll {
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index bb326fd..56460c6 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -8,7 +8,7 @@
border-radius: 6px 6px;
}
-#header__wrapper {
+.header {
position: fixed;
top: 0;
left: 0;
@@ -19,6 +19,7 @@
.header__title {
margin-left: 1em;
display: none;
+ float: left;
@include mediaQuery(x-small) {
display: inline-block;
position: absolute;
@@ -27,7 +28,7 @@
}
}
-header {
+.header__info-section {
position: relative;
background: $black;
color: $white;
@@ -36,7 +37,6 @@
.header__logout {
float: right;
- display: inline-block;
color: $white;
font-size: .9em;
text-decoration: none;
@@ -47,7 +47,7 @@
}
}
-.header__functions-wrapper {
+.header__functions-section {
color: $white;
padding: 0 1.1em;
box-sizing: border-box;
@@ -235,4 +235,4 @@
}
}
-// end header__functions-wrapper
+// end header__functions-section