<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        width="100%" 
        height="100%" 
        viewSourceURL="srcview/index.html" 
        initialize="onInit()">
    
    <mx:Script>
        <![CDATA[
            import mx.managers.IFocusManagerComponent;
            import mx.controls.listClasses.IListItemRenderer;
            import mx.controls.listClasses.ListData;
            import mx.controls.Alert;
            import flash.accessibility.Accessibility;
            import flash.accessibility.AccessibilityProperties;
            import flash.system.Capabilities;
            
            import com.modernista.swffocus.SWFFocus;

            // this helps Firefox capture and release keyboard focus
            private function onInit():void {
                SWFFocus.init(systemManager.stage as Stage);
            }
            
            public function alertSelections():void{
                var selectedIndices:Array = selectElement.selectedIndices;
                selectedIndices.sort();
                var selectedLabels:Array = new Array();
                for(var i:uint = 0; i<selectedIndices.length; i++){
                    selectedLabels.push(selectElement.dataProvider[ selectedIndices[i] ].label);
                }
                if(selectedLabels.length>0){
                    var newAlert:Alert = Alert.show("You chose: "+selectedLabels.join(", "), "Your Selection");
                    newAlert.tabEnabled = true;
                    newAlert.tabChildren = true;
                    newAlert.focusEnabled = true;
                }
            }
            
            public function assignAccProps():void{
                var accProps:AccessibilityProperties =  new AccessibilityProperties();
                accProps.name = this.selectElementLabel.text;
                selectElement.accessibilityProperties = accProps;
                if(Capabilities.hasAccessibility) {
                    Accessibility.updateProperties();
                }
            }
            
       ]]>
    </mx:Script>
    
    <mx:Style>
        Application{
            font-size: 16;
        }
        Button{
            focusThickness: 4;
        }
        List{
            focusThickness: 4;
        }
    </mx:Style>
    
    <mx:Model id="listOptions">
      <select>
        <option label="Avery" />
        <option label="Alexis" />
        <option label="Calan" />
        <option label="Keely" />
      </select>
    </mx:Model>
    
    <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
    
        <mx:Form defaultButton="{submitButton}">
            <mx:Text id="selectElementLabel" text="Choose one or more users: "
                tabIndex="1" 
                tabChildren="true" />
            <mx:List id="selectElement" 
                dataProvider="{listOptions.option}"
                allowMultipleSelection="true" 
                width="100%" 
                rowCount="4"
                tabIndex="2"
                addedToStage="assignAccProps()" />
            <mx:Button id="submitButton" 
                label="Submit"
                click="alertSelections()" 
                width="100%"
                tabIndex="3" />
        </mx:Form>
        
    </mx:HBox>
    
</mx:Application>