Update toggle component
- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations
- Add page, section, and list-pair layout patterns established
on the power usage page to begin a pattern for consistent
page layout
- Add form__field and form__actions to help with form layout
consistency.
Tested: Verified toggle functions in the GUI and tested with screen reader. Passes DAP.
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Iaa8646b1179cc307971065c455f4b9448095d1ec
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 34e5611..ffbf0a1 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -110,16 +110,21 @@
<dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd>
</dl>
<div class="quick-links__item no-icon">
- <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span
- ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
- <div class="toggle inline float-right">
- <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
- tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
- ng-disabled="dataService.server_unreachable">
- <label for="toggle__switch-round" tabindex="0">Server LED is <span
- class="led-switch__status">{{dataService.LED_state}}</span></label>
- </div>
+ <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span>
+ <span ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
+ <div class="toggle-container">
+ <div class="toggle">
+ <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
+ tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
+ ng-disabled="dataService.server_unreachable">
+ <label for="toggle__switch-round" tabindex="0">Server LED is <span
+ class="uid-switch__status">{{dataService.LED_state}}</span></label>
+ </div>
+ <span>
+ {{ dataService.LED_state == 'on' ? "On" : "Off" }}
+ </span>
</div>
+ </div>
<a href="#/server-control/remote-console" class="no-icon quick-links__item">
<p class="inline quick-links__label">Serial over LAN console</p>
<icon file="icon-launch.svg" class="float-right"></icon>