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/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html
index 2901d76..c5a56e1 100644
--- a/app/server-control/controllers/server-led-controller.html
+++ b/app/server-control/controllers/server-led-controller.html
@@ -1,28 +1,44 @@
<div id="led-switch">
- <div class="row column">
- <h1>Server LED</h1>
- <div class="page-header">
- <h2>LED light control</h2>
- </div>
+ <div class="row column">
+ <h1>Server LED</h1>
+ <div class="page-header">
+ <h2>LED light control</h2>
</div>
-
- <div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}">
- <div class="btm-border-grey">
- <div class="toggle inline">
- <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 indicator is <span class="led-switch__status">{{dataService.LED_state}}</span></label>
- </div>
- <div class="led-switch__label inline">
- <p>Server LED light is <span class="led-switch__status">{{dataService.LED_state}}</span></p>
- <p>Turn the LED light on or off. If the server has an LCD, use this control to display text (on) or not to display text (off) on the LCD.</p>
- </div>
- </div>
+ </div>
+ <div
+ class="column"
+ ng-class="{disabled: dataService.server_unreachable || dataService.loading}"
+ >
+ <div class="led-switch__label">
+ <h3>
+ Server LED light
+ </h3>
+ <p>
+ Turn the LED light on or off. If the server has an LCD, use this control
+ to display text (on) or not to display text (off) on the LCD.
+ </p>
</div>
+ <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 indicator is
+ <span class="toggle-switch__status">{{
+ dataService.LED_state
+ }}</span></label
+ >
+ </div>
+ <span>
+ {{ dataService.LED_state == "on" ? "On" : "Off" }}
+ </span>
+ </div>
+ </div>
</div>