Switcher
Allows users to change context within an application.
Examples
A switcher is a component that allows the user change context within an application. Use a switcher to allow the user to change the NHS Board or the user they are administering.
Usage
Do:
- only use one type of switcher per application
- make sure the labelling of the options are unambiguous
Avoid:
- using a switcher for users that are not administrators
- displaying a switcher on pages that do not require users to change context
<form class="turasForm">
<div class="switchBoards">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-5">
<div class="form-group form-select-list ">
<label class="control-label " for="Region">Region</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="RegionEX" name="Region">
<option value="1">North</option>
<option value="2">South</option>
<option value="3">East</option>
<option value="4">West</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-8 col-xl-7">
<div class="form-group form-select-list ">
<label class="control-label " for="HealthBoard">Health Board</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="HealthBoard" name="HealthBoard">
<option value="1">NHS Lothian</option>
<option value="2">NHS Ayrshire and Arran</option>
<option value="3">NHS Borders</option>
<option value="4">NHS Dumfries and Galloway</option>
<option value="5">NHS Fife</option>
<option value="6">NHS Forth Valley</option>
<option value="7">NHS NHS Grampian</option>
<option value="8">NHS Greater Glasgow and Clyde</option>
<option value="9">NHS Highland</option>
<option value="10">NHS Orkney</option>
<option value="11">NHS Shetland</option>
<option value="12">NHS Tayside</option>
<option value="13">NHS Western Isles</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="HealthBoard" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /.switchBoards -->
</form>
<form class="turasForm">
<div class="switchBoards">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-5">
<div class="form-group form-select-list ">
<label class="control-label " for="Region">Region</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="RegionEX" name="Region">
<option value="1">North</option>
<option value="2">South</option>
<option value="3">East</option>
<option value="4">West</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-8 col-xl-7">
<div class="form-group form-select-list ">
<label class="control-label " for="HealthBoard">Health Board</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="HealthBoard" name="HealthBoard">
<option value="1">NHS Lothian</option>
<option value="2">NHS Ayrshire and Arran</option>
<option value="3">NHS Borders</option>
<option value="4">NHS Dumfries and Galloway</option>
<option value="5">NHS Fife</option>
<option value="6">NHS Forth Valley</option>
<option value="7">NHS NHS Grampian</option>
<option value="8">NHS Greater Glasgow and Clyde</option>
<option value="9">NHS Highland</option>
<option value="10">NHS Orkney</option>
<option value="11">NHS Shetland</option>
<option value="12">NHS Tayside</option>
<option value="13">NHS Western Isles</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="HealthBoard" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /.switchBoards -->
</form>
Accessibility status
This component is partially compliant with the WCAG 2.2 standard because of the following non compliances:
- labels are not announced by screen readers
- the arrow keys do not allow for navigation through the select box
Testing
- check keyboard navigation to ensure the switcher is in expected tab order and doesn't cause a keyboard trap
- check that you can navigate through the switcher select box with the arrow keys and that the return, enter and space keys allow you to expand the menu
- check that the escape button closes the drop down menu when it has been opened
- test switcher with screen readers to ensure labels and functionality are announced as expected
Developer considerations
- Use aria-labelledby to associate the dropdown with its label and selected item
- Implement role="combobox" for the custom dropdown, ensuring it behaves as expected for assistive technologies
- Ensure that aria-expanded, aria-haspopup, and aria-controls are used appropriately to communicate the state of the dropdown
