From 1ffa209e99da608e225df0a3a3caf47036b3a793 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Mon, 1 Apr 2019 17:57:27 -0500 Subject: 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 Change-Id: Ib974c623e9d3b74e74e1f374c21e8191732ec26a --- app/common/directives/app-header.html | 12 +-- app/common/directives/app-navigation.js | 3 +- app/common/directives/log-event.html | 2 +- app/common/styles/base/utility.scss | 17 ++-- app/common/styles/layout/header.scss | 10 +-- .../controllers/date-time-controller.html | 8 +- .../controllers/network-controller.html | 94 ++++++++++++---------- app/configuration/controllers/snmp-controller.html | 65 ++++++++------- app/configuration/styles/network.scss | 24 ++++-- app/configuration/styles/snmp.scss | 6 +- .../controllers/system-overview-controller.html | 84 +++++++++++-------- .../controllers/power-usage-controller.html | 2 +- .../controllers/inventory-overview-controller.html | 2 +- 13 files changed, 192 insertions(+), 137 deletions(-) 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 @@ -
+
+ 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 @@ window.angular && (function(angular) { } 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 @@
+ ng-click="event.meta = ! event.meta" aria-label="{{event.meta ? 'collapse' : 'expand'}}">
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 @@ $logoMaxWidth: 125px; border-radius: 6px 6px; } -#header__wrapper { +.header { position: fixed; top: 0; left: 0; @@ -19,6 +19,7 @@ $logoMaxWidth: 125px; .header__title { margin-left: 1em; display: none; + float: left; @include mediaQuery(x-small) { display: inline-block; position: absolute; @@ -27,7 +28,7 @@ $logoMaxWidth: 125px; } } -header { +.header__info-section { position: relative; background: $black; color: $white; @@ -36,7 +37,6 @@ header { .header__logout { float: right; - display: inline-block; color: $white; font-size: .9em; text-decoration: none; @@ -47,7 +47,7 @@ header { } } -.header__functions-wrapper { +.header__functions-section { color: $white; padding: 0 1.1em; box-sizing: border-box; @@ -235,4 +235,4 @@ header { } } -// end header__functions-wrapper +// end header__functions-section diff --git a/app/configuration/controllers/date-time-controller.html b/app/configuration/controllers/date-time-controller.html index 6e1e24d..8ea478a 100644 --- a/app/configuration/controllers/date-time-controller.html +++ b/app/configuration/controllers/date-time-controller.html @@ -50,10 +50,10 @@
  • - - + +
    • diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html index 0a8b7c7..343d4fd 100644 --- a/app/configuration/controllers/network-controller.html +++ b/app/configuration/controllers/network-controller.html @@ -4,19 +4,20 @@

    BMC network settings

    -
    -
    -

    Common settings

    -
    -
    +
    + + Common settings + +
    - +
    - +
    • @@ -26,45 +27,51 @@
    - +
    - +
    -
    -
    -
    -
    -

    IPV4 settings

    -
    +
    +
    + + IPV4 settings + +
    -
    +
    - - + +
    - - + +
    - - + +
    @@ -74,39 +81,42 @@
    -
    -
    -
    -
    -

    DNS settings

    -
    +
    +
    + + DNS settings + +
    -
    +
    - +
    -
    +
    -
    -
    - -
    -
    + +
    + + +
    - \ No newline at end of file diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html index ee3d0d0..35cd1f4 100644 --- a/app/configuration/controllers/snmp-controller.html +++ b/app/configuration/controllers/snmp-controller.html @@ -13,13 +13,13 @@
    -

    Host name or IP Address

    +

    Host name or IP Address

    -

    Port

    +

    Port

    -
    +
    No managers have been added yet.
    @@ -28,40 +28,45 @@
    -
    +
    Value must be between 0-65,535
    -
    -
    - -
    -

    Field is required

    +
    +
    +
    + +
    +

    Field is required

    +
    -
    -
    - -
    -
    - Invalid format +
    + +
    +
    + Invalid format +
    +

    Field is required

    -

    Field is required

    -
    +
    +
    -- cgit v1.2.1