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/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 @@
</div>
</li>
<li class="date-time__metadata-block">
- <label class="content-label">Time Owner</label>
- <select ng-model="time.owner" class="date-time__owner-dropdown">
- <option class="courier-bold" ng-repeat="owner in timeOwners">{{owner}}</option>
- </select>
+ <label for="date-time-owner" class="content-label">Time Owner</label>
+ <select id="date-time-owner" ng-model="time.owner" class="date-time__owner-dropdown">
+ <option class="courier-bold" ng-repeat="owner in timeOwners">{{owner}}</option>
+ </select>
</li>
</ul>
</div>
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 @@
<h1>BMC network settings</h1>
</div>
<form class="net-config__form" role="form" action="">
- <section class="row column">
- <div class="column small-12 page-header">
- <h2 class="inline">Common settings</h2>
- </div>
- <fieldset>
+ <fieldset class="net-config__fieldset row column">
+ <legend class="column small-12 page-header h2">
+ Common settings
+ </legend>
+ <div class="net-config__fieldset-content">
<div class="column small-12 large-3">
<label for="net-config__mac">Hostname</label>
- <input id="net-config__mac" type="text" ng-model="hostname"/>
+ <input id="net-config__mac" type="text" ng-model="hostname" />
</div>
<div class="column small-12 large-3">
<label for="netinterface-select">Network interface</label>
<div id="netinterface-select" class="dropdown__wrapper">
- <button type="button" class="dropdown__button" ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
+ <button type="button" class="dropdown__button"
+ ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
<ul class="dropdown__list inline" ng-show="networkDevice">
<li ng-repeat="interface_id in network.interface_ids">
<button type="button" ng-click="selectInterface(interface_id);">{{interface_id}}</button>
@@ -26,45 +27,51 @@
</div>
<div class="column small-12 large-3">
<label for="net-config__host">MAC address</label>
- <input id="net-config__host" type="text" ng-model="interface.MACAddress"/>
+ <input id="net-config__host" type="text" ng-model="interface.MACAddress" />
</div>
<div class="column small-12 large-3">
<label for="net-config__domain">Default Gateway</label>
- <input id="net-config__domain" type="text" ng-model="defaultGateway"/>
+ <input id="net-config__domain" type="text" ng-model="defaultGateway" />
</div>
- </fieldset>
- </section>
- <section class="row column">
- <div class="column small-12 page-header">
- <h2 class="inline">IPV4 settings</h2>
</div>
- <fieldset>
+ </fieldset>
+ <fieldset class="net-config__fieldset row column">
+ <legend class="column small-12 page-header h2">
+ IPV4 settings
+ </legend>
+ <div class="net-config__fieldset-content">
<div class="row column">
<label class="control-radio" for="dhcp-address">Obtain an IP address automatically using DHCP
- <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled" ng-value="true">
+ <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled"
+ ng-value="true">
<span class="control__indicator control__indicator-on"></span>
</label>
</div>
<div class="row column">
<label class="control-radio" for="static-ip-address">Assign a static IP address
- <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled" ng-value="false"/>
+ <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled"
+ ng-value="false" />
<span class="control__indicator control__indicator-on"></span>
</label>
</div>
<div class="row column network-config__ipv4-wrap">
- <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
+ <fieldset class="net-config__fieldset net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
<div class="column small-12 large-3">
- <label>IPV4 address</label>
- <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
+ <label for="ipv4-address-{{$index+1}}">IPV4 address</label>
+ <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text"
+ ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address" />
</div>
<div class="column small-12 large-3">
- <label>Gateway</label>
- <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
+ <label for="ipv4-gateway-{{$index+1}}">Gateway</label>
+ <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text"
+ ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway" />
</div>
<!-- This netmask prefix length max only works with IPV4 -->
<div class="column small-12 large-6">
- <label>Netmask Prefix Length</label>
- <input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true" type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.PrefixLength"/>
+ <label for="ipv4-prefix-{{$index+1}}">Netmask Prefix Length</label>
+ <input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true"
+ type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled"
+ ng-model="ipv4.PrefixLength" />
<button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
</div>
</fieldset>
@@ -74,39 +81,42 @@
</div>
</div>
</div>
- </fieldset>
- </section>
- <section class="row column">
- <div class="column small-12 page-header">
- <h2 class="inline">DNS settings</h2>
</div>
- <fieldset>
+ </fieldset>
+ <fieldset class="net-config__fieldset row column">
+ <legend class="column small-12 page-header h2">
+ DNS settings
+ </legend>
+ <div class="net-config__fieldset-content">
<!-- Call Nameservers "DNS Servers" on the GUI -->
- <fieldset class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
+ <div class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
<div class="column small-12">
<label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
- <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline" type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input/>
+ <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline"
+ type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input />
<button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
</div>
- </fieldset>
+ </div>
<div class="row column">
<div class="column small-12">
<button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add DNS server</button>
</div>
</div>
- </fieldset>
- <div class="network-config__submit-wrapper">
- <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
- <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
</div>
- </section>
+ </fieldset>
+ <div class="network-config__submit-wrapper">
+ <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
+ <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+ </div>
</form>
</div>
<div class="modal-overlay" tabindex="-1" ng-class="{'active': confirmSettings}"></div>
-<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}">
+<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog"
+ ng-class="{'active': confirmSettings}">
<div class="modal__tftp-unreachable" role="document">
- <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
- <div class="page-header ">
+ <div class="screen-reader-offscreen modal-description">Change network settings</div>
+ <!-- accessibility only; used for screen readers -->
+ <div class="page-header">
<span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
<h3 class="modal-title inline">Change network settings</h3>
</div>
@@ -119,4 +129,4 @@
<button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
</div>
</div>
-</section>
+</section>
\ 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 @@
<div class="small-8">
<div class="row column manager_group">
<div class="small-5 snmp__address">
- <h3>Host name or IP Address</h3>
+ <h3 id="host-name-ip-label">Host name or IP Address</h3>
</div>
<div class="small-5 snmp__port label">
- <h3>Port</h3>
+ <h3 id="port-label">Port</h3>
</div>
</div>
- <div class="row column manager_group empty" ng-if="managers.length <1">
+ <div class="row column manager_group empty" ng-if="managers.length < 1">
No managers have been added yet.
</div>
<form id="snmp__form" name="snmp__form" novalidate>
@@ -28,40 +28,45 @@
<div class="row column">
<div class="small-10">
<div class="row column">
- <div class="small-offset-6 small-6 help__text snmp__port">
+ <div id="snmp-manager{{$index+1}}-port-description" class="small-offset-6 small-6 help__text snmp__port">
Value must be between 0-65,535
</div>
</div>
- <div class="row column" ng-class="{'submitted':submitted}">
- <div class="small-6 snmp__address">
- <input id="snmp-manager{{$index+1}}-address"
- name="snmp-manager{{$index+1}}-address"
- type="text"
- ng-change="manager.updateAddress=true"
- ng-model="manager.address"
- required />
- <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
- <p ng-message="required" role="alert">Field is required</p>
- </div>
- </div>
- <div class="small-6 snmp__port">
- <input id="snmp-manager{{$index+1}}-port"
- name="snmp-manager{{$index+1}}-port"
- type="number"
- min="0"
- max="65535"
- step="1"
- ng-change="manager.updatePort=true"
- ng-model="manager.port"
- required/>
- <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
- <div ng-message-exp="['min', 'max', 'number', 'step']">
- Invalid format
+ <fieldset>
+ <div class="row column" ng-class="{'submitted':submitted}">
+ <div class="small-6 snmp__address">
+ <input id="snmp-manager{{$index+1}}-address"
+ name="snmp-manager{{$index+1}}-address"
+ type="text"
+ ng-change="manager.updateAddress=true"
+ ng-model="manager.address"
+ required
+ aria-labeledby="host-name-ip-label"/>
+ <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
+ <p ng-message="required" role="alert">Field is required</p>
</div>
- <p ng-message="required" role="alert">Field is required</p>
+ </div>
+ <div class="small-6 snmp__port">
+ <input id="snmp-manager{{$index+1}}-port"
+ name="snmp-manager{{$index+1}}-port"
+ type="number"
+ min="0"
+ max="65535"
+ step="1"
+ ng-change="manager.updatePort=true"
+ ng-model="manager.port"
+ required
+ aria-labeledby="port-label"
+ aria-describedby="snmp-manager{{$index+1}}-port-description"/>
+ <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
+ <div ng-message-exp="['min', 'max', 'number', 'step']">
+ Invalid format
+ </div>
+ <p ng-message="required" role="alert">Field is required</p>
+ </div>
</div>
</div>
- </div>
+ </fieldset>
</div>
<div class="small-2 align-self-center snmp__buttons">
<button class="edit_button" type="button">