carat browsing of IE8 and GXT input widgets

carat browsing of IE8 and GXT input widgets

Since I cannot control if my users have caret browsing enabled or disabled on IE8, I would like it if the cursor position wouldn't flash within GXT non-text input components (i.e. button), as I attempt to show here.

carat_browsing.png
Is there a way to get buttons to that the unselectable attribute is set on them?

Also, I have noticed the cursor position blink underneath a cell on a grid. It is as though the row has a higher z index and if I click close enough to the bottom of the row, I can get a cursor to blink.

I am working on a grid with read only cells and edit cells, so removing cursor position selection would be helpful. I'm not interested in disabling caret selection for the web page, since users should be able to cut and paste. I just want to stop/hide it in areas where it is confusing to the user.

Google search turns out to be a poor example - they have it wired so that a keystroke anywhere on the page, caret browsing or no, resulting is appending to the search text box - but if you enable caret browsing, and use it to enter the text box with already entered text, typing new characters appends to the end instead of where the cursor was.

One more quick example: Bing search - roughly the same as stackoverflow.

All of this testing was initially done in Firefox 15, but I'm getting similar results in IE8 - the cursor just gets stuck on wikipedia, stackoverflow gets that same blink right at the left edge of the textbox (but if I hit the tab key I can enter it - same also seems to work on http://sencha.com/examples), and google gets keystrokes always appended to the end of the box, even when the cursor is elsewhere. On Bing, I am not even able to get the cursor into the text box without tab, or using the mouse.

Some initial research on stackoverflow and other sites indicates that this is not only by design, but that it isn't meant to be modified via JavaScript. I've seen evidence (though not yet tried) that if we intercepted every keystroke and tracked all focus changes we might be able to stop this from working, but wouldn't that break the accessibility feature itself?

If you have an example of a page that works correctly by these criteria (and I selected those pages deliberately to try to go after ones that should work across the board) with behavior you'd like your app to emulate, I might be able to either suggest a way to handle all events in your app, or look into a change in the library itself. But so far, GXT 2 and 3 seem consistent in IE8 and FF15 as many other popular web sites that should be conforming to accessibility requirements.

To take one of your examples, http://en.wikipedia.org/wiki/Main_Page, I don't see how as a user I can click on the text box and cause the caret cursor to show and give the appearance there is a cursor when there indeed isn't.

So, I see there is a couple of issues with caret browsing 1) navigation and 2) false appearance of input.

So, my initial example of text within the "Submit" button is frustrating, the issue that is more apparent to us is the second example. This shows up in even more odd ways with the grids.

Here is the closest behavior I could mimic with wiki. Any while this annoys me, at least it is more obvious not a cursor in the text box than I hve see with GXT.

I appreciate you looking into this as well. I guess I know why it happens to me more with GXT than other web sites, since I have to develop for IE8, but for all my personal use, I use a better browser (i.e. Chrome).

I think the design of the grids also lead to this happening more easily, since the widgets are overlaid on top of other HTML when selected. That seems to be the area where users see it the most (and complain about it).