Rich text inline edit demo does not contain focus styling for TinyMCE toolbar items
Description
Using FF 3.6, when focus is placed on the TinyMCE toolbar, it is invisible. Thus attempting to use keyboard navigation by tabbing through appears to be doing nothing, but in fact focus is being placed on toolbar items. The lack of focus styling is confusing and gives the wrong impression that the demo has broken.
To reproduce: 1. Start Firefox 3.6 2. Load the demo: http://build.fluidproject.org/infusion/demos/inlineEdit/rich/html/inlineEdit.html 3. Begin editing the first paragraph. 4. While still editing, tab repeatedly through the document and attempt to reach the editor that is still open. 5. You will discover that you will be stuck on an invisible, empty element just before the editor.
Affects both FF 3.6 on Windows and Mac OS X. IE8 on Windows is not affected.
Keyboard work-around: You can hit "enter" to select an item in the toolbar. This would put you back into the textarea, from which you could tab out. You could also hit "esc", which would close the RichText Inline edit and give you back your proper tab navigation.
Environment
Firefox 3.6, Windows, Mac OS X
IE8 Windows 7
IE6 Win XP
Activity
Show:
Justin Obara July 18, 2014 at 1:36 PM
The focus styling appears. I've tried with Chrome 35, FF 30, Safari 7 (Mac OS 10.9) and IE 11 (Win 7).
Anastasia Cheetham October 17, 2011 at 5:28 PM
I think the issue is not so much that there isn't focus styling, it's that you can't properly tab to the toolbar: Try clickin in the toolbar area and then tabbing - you do get a focus highlight. Still a problem, but a different problem.
Using FF 3.6, when focus is placed on the TinyMCE toolbar, it is invisible. Thus attempting to use keyboard navigation by tabbing through appears to be doing nothing, but in fact focus is being placed on toolbar items. The lack of focus styling is confusing and gives the wrong impression that the demo has broken.
To reproduce:
1. Start Firefox 3.6
2. Load the demo: http://build.fluidproject.org/infusion/demos/inlineEdit/rich/html/inlineEdit.html
3. Begin editing the first paragraph.
4. While still editing, tab repeatedly through the document and attempt to reach the editor that is still open.
5. You will discover that you will be stuck on an invisible, empty element just before the editor.
Affects both FF 3.6 on Windows and Mac OS X. IE8 on Windows is not affected.
The example on the TinyMCE website does not appear to have this problem.
http://tinymce.moxiecode.com/examples/full.php#
Keyboard work-around:
You can hit "enter" to select an item in the toolbar. This would put you back into the textarea, from which you could tab out. You could also hit "esc", which would close the RichText Inline edit and give you back your proper tab navigation.