Flex Accessibility - Cannot set screen reader order - apache-flex

I'm having a problem where I'm not able to set up a custom reading order for text in my Flex application. I'm setting the tabIndex property on each text element, which I understand is the proper way to set the reading order for a screen reader.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute">
<mx:Label x="10" y="10" text="1" tabIndex="2" />
<mx:Label x="10" y="36" text="2" tabIndex="1" />
<mx:Label x="10" y="62" text="3" tabIndex="3" />
</mx:Application>
For this small test application, the screen reader (JAWS 12) reads "1 2 3" instead of "2 1 3".
Some testing seems to indicate that this is only a problem for my particular configuration. I am compiling the application with Flex SDK 4.1, but using the MX component set only, and the Halo theme. We've got a fairly complex app which started out before Flex 4 was around, so while we have made the jump to compile with the latest SDK, we have not yet upgraded anything to use the Spark component set.
When I make a similar test app using the 4.1 SDK and the Spark components+theme, the reading order is set correctly. Same result if I make a test app and compile using the 3.5 SDK - everything works.
I know I could switch to using Spark components, but I'm trying to avoid that if I can as it would mean timelines would have to change on the current project I'm working on.
Has anyone run into any similar issues, or have any suggestions that might get this to work?

You'll want to use Text instead of Label. Documentation:
A Label control is read by a screen
reader when it is associated with
other controls, or when the Forms mode
is inactive. The Label control is not
focusable in Forms mode, or by the
keyboard.
...
A Text control is not focusable and is
read by screen readers only when Forms
mode is inactive.
I also found this which might be a better solution. The example is in Flex 4, but you can do the same with Label in Flex 3, just need to implement the IFocusManagerComponent interface.

Im working with JAWS 11 in Flex 3 at the moment, so havnt had that problem yet. But, i've read about one option of putting copies of the components offstage, its too complicated for our needs, and letting the screen reader just read these components in order:
http://www.adobe.com/accessibility/products/flash/reading.html#off_stage
Also, a trick I saw was to set the TabIndex in increments of 10. JAWs only cares about their order, and if you need to add extra components, you wont need to renumber everything. i.e. 10, 20, 30 then if you need you can add 11, rather than renumbering everything.
Brian

Related

Undo and redo is not working on TextInput in AIR application?

I've just noticed in my AIR application that redo is not working. It also seems that there it only is going back one step (but sometimes two or three).
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:TextArea horizontalCenter="0" verticalCenter="0" />
</s:WindowedApplication>
I'm using CMD + Z for undo and CMD + Z + Shift for redo. I'm sure this was working at one point. Maybe it was only in the browser?
I'm using Flex 4.6 and AIR 3.6. I'm using Mac 10.10.5. I'm using Firefox 40.3. I also tried it in Safari.
Undo and redo work correctly in the text fields in both of those browsers using the same shortcut combinations listed.
according to docs it should work:
The Spark TextArea also supports unlimited undo/redo within one
editing session. An editing session starts when the control gets
keyboard focus and ends when the control loses focus.
but i noticed during development of my app that
when we use backspace it counts it as separate states
in other cases it see all changes as one

Flex 3.5: workaround for bug where backspace causes browser back action

Flex 3.5 has this bug where in IE (and some others) where if you push the backspace key in some text boxes, the browser acts like you just pushed its back button. According to the bug report this is "resolved" because it works in 4.0. But I need a workaround for 3.5. Is there one?
In my case, it seems that this has nothing to do w/the <mx:TextInput /> or whatever other people were saying it is. This was all because I was using the <mx:TabNavigator />. In any case, getting rid of that tag and replacing it w/a combination of <mx:TabBar /> and <mx:ViewStack /> eliminated the problem for me under IE.
Unfortunately, this was a very large undertaking for me, because even though I had only half a dozen <mx:TabNavigator />s to fix, the order in which events are thrown is different, so component construction resulted in a lot of components not being created when first accessing tabs and stuff. I found I had to use <mx:TabBar />'s itemClick event for some things, and then <mx:ViewStack />'s change for others.

RichEditableText SelectionColor

I'm new to flex, actually I'm reading a simple tutorial about Flex 4 (I'm using flash builder 4.5) this is the tutorial.
I added a RichEditableText and then I should specify the property selectionColor, but when I add it to the source code, the IDE give me an error like this property do not exist.
<s:RichEditableText x="179" y="95" text="hello" fontSize="24" fontWeight="bold" color="#E52222" selectionColor="#000000" />
The property is slightly different now. It's focusedTextSelectionColor There's also an unfocusedTextSelectionColor. The article you are reading is for a Flex Gumbo Pre-Release. That's basically a beta version of 4.0 and now we're on the 4.5 SDK so there are slight differences. Here is a good tutorial from FlexExamples: http://blog.flexexamples.com/2009/11/07/setting-the-selection-highlight-color-on-a-spark-richeditabletext-control-in-flex-4/

Adobe Flex 4 rendering issues with text in disabled TextInput component

I have an application which displays employee information. If the user opening the detailed employee information page is not authorized to make changes I set the TextInput to disabled.
Some users are reporting rendering issues with this. The TextInput's text value does not appear inside the box but is misaligned and is outside of the component. You can see the screenshow below of the disabled ID column where the numbers which are supposed to be in the TextInput box are far off to the right.
Does anyone know what is causing this?
Screenshot of issue
EDIT:
I am using Flex SDK 4.1.0.16076. Enabled property and text are controlled through a Swiz presentation model that gets injected into the MXML. I don't really have any issues with the setup except for this visual gitch.
I am not able to reproduce this on IE9 with Windows 7 using the latest Flash player but I can get the issue every time using IE6 with Windows XP. The text will correctly appear in the box if I reenable the TextInput but when I disable it again (via a checkbox through the interface controlling the enable property) it will misalign.
I also see the issue for the Spark List component, but it does not happen for mx:DateField or s:ComboBox which I also use.
Here is the code:
<mx:GridRow height="24">
<mx:GridItem verticalAlign="middle">
<s:Label text="ID:" fontWeight="bold"/>
</mx:GridItem>
<mx:GridItem verticalAlign="middle">
<s:TextInput id="IDTI" width="150" enabled="{model.IDTIEnabled}" text="{model.Id}" change="{model.Id = IDTI.text}" errorString="{model.IdError}"/>
</mx:GridItem>
</mx:GridRow>

Workaround for AdvancedDataGrid flicker in Flex Hero 4.5.0.19786

Since I updated to the latest build of Flex Hero (4.5.0.19786) AdvancedDataGrids flicker in design view with Flash Builder Burrito preview. Has anyone run into this and if so is there a work-around besides dropping back a version?
Update 02 19:29
This did not occur in previous Hero builds, e.g 18623. I am using the default Spark theme, nothing else particularly special.
Update 01 19:15
I tracked down the problem to an instance of a custom (default custom, i.e the result of doing new->component based on AdvancedDataGrid) on the same form.
The component declaration:
<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</mx:AdvancedDataGrid>
The custom component instantiation. Note "fo" is a namespace representing the path to the package for which the custom component resides.
<fo:adgTest width="300" height="200">
<fo:columns>
<mx:AdvancedDataGridColumn headerText="blah1" />
<mx:AdvancedDataGridColumn headerText="blah2" />
</fo:columns>
</fo:adgTest>
It turns out that this custom version of AdvancedDataGrid causes the design view to break down. Very odd.
Update 03 2011-02-11 13:36
A custom AdvancedDataGrid does not cause design-view breakdown unless I add columns to it.
Update 04 2011-02-11 15:13
Filed as a bug: https://bugs.adobe.com/jira/browse/SDK-29507
I think, this is not the problem of sdk. Its a problem of the designer (Flex Burrito). I have exactly the same envoirment, and my version of burrito is 287807.
My AdvancedDataGrit does NOT flicker!
Do you have some styles applied or something else?
After following your steps described in your question, i also have a flickering custom AdvancedDatagrid on my stage. When i click to another component (tab) and go back to the implemented adg, the flickering stops.
When i close the Component with the flicker adg in it and open it again, the adg flicker again.
With the preversion of the sdk the adg doesn't flicker. I notice also, that the graphic is different.
In the preversion, i can see some folderIcons wirh teh expanded or closed arrows.
After switching to 19786 the foldericons disapear and the flickering starts.
There is something wrong and i would start a thread in adobe bug base.
In my opinion, you did nothing wrong. There is no better way and it is equal if i drag the custom ADG or code it in codeview. The result is always a flicker adg in designview.
Sorry for the misunderstands and my bad english
BR Frank

Resources