ui.selectmenu icons fail in high contrast mode

Summary

The down arrow on the selectmenu needs its html/css rejiggered to use an actual img element sprite map to gain visibility in high contrast mode.

Steps to reproduce

1. Launch IE or Firefox on Windows

2. Turn on high contrast mode either in the control panels or via the keyboard toggle (left-alt + left-shift + printScreen)

3. Go to jQueryUI selectmenu widget example page: http://jqueryui.com/selectmenu/

4. Notice the down arrow icons, hinting to the user that the control is a drop-down menu rather than a button, are no longer displaying

Explanation

Windows high contrast mode is an accessibility feature which changes the color palette to make content easier to read for people with limited visual acuity. It also attempts to remove visual clutter by hiding decorative and disposable content such as CSS background images. Unfortunately some of the earliest sprite map examples used such images and became best practice despite the problems they caused. With modern browsers the same effect can be made using actual img elements. Wrapping the img in a span with the proper set of CSS rules gives the same sprite map functionality and, because it's an image, we can also make use of the standard alt attribute on the image with the same performance as an inaccessible background-image sprite map. For example, given a spritemap image called sprite map.png with various icons we could code things up like this:

<style>
.sprite{
	overflow:hidden;
	width:16px;
	height:20px;
	position:relative;
	display:block;
}
.sprite img{position:relative}
.paperclip img{left:-145px}
</style>

<span class="sprite paperclip"><img src="spritemap.png" alt="Paper Clip"></span>

In this case we don't want a screen reader to notice the image as it will already announce the combobox nature of the object due to the role attribute. The down-arrow is a visual hint only so it should have alt="".