Month: November 2010

UIInstructions Polluting your JSF 2 Component Tree

Posted on Updated on

If you are ever debugging a JSF 2 application, are seeing some “UIInstructions” components mysteriously polluting the component tree, and want to get rid of them (e.g. breaking desired sole-child configurations for layout geometry reasons), this tip is for you…

These UIInstructions components are likely due to the presence of an HTML DOCTYPE (or other content) appearing in one or more of your JSF fragment files. These fragment files are likely missing a ui:composition wrapper.

More info on why you might want the HTML DOCTYPE (or other content):
http://download.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/ui/composition.html

Advertisements

Browsers and the HTML accessKey

Posted on Updated on

Background

As browsers evolve, changes have been made with how the HTML “accessKey” attribute works. There are differences across platforms for the same browser version as well as differences across browser versions on the same platform.  There are even some cases where the exact same browser treats accessKey differently for button elements vs. anchor elements!  This post shows some examples of how to invoke the accessKey and what the behavior is.

Sample button and anchor HTML using the “accessKey” attribute

<html>
<body>
<button onclick="javascript:alert('hi button with onclick')"
        accessKey="r">Button t<u style="color:red">r</u>y me</button>
<a href="javascript:;" onclick="alert('hi anchor with onclick');return false;"
        accessKey="o">Anchor with <b style="color:red">o</b>nclick</a>
</body>
</html>

How different browsers handle the above accessKey letters for button and anchor elements

Browser Operating System Key Combination Button Behavior Anchor Behavior
Chrome 7.0.517.41 Linux Alt + letter Clicks the button (3) Clicks the anchor (3)
Chrome 7.0.517.41 Mac OS X Control + Option + letter Clicks the button (3) Clicks the anchor (3)
Chrome 7.0.517.41 Windows Alt + letter Clicks the button (3) Clicks the anchor (3)
Firefox 1.5 Windows Alt + letter Clicks the button (1) Unknown
Firefox 2 Linux Alt + Shift + letter Clicks the button (1) Clicks the anchor
Firefox 2 Mac OS X Control + letter Clicks the button (1) Clicks the anchor
Firefox 2 Windows Alt + Shift + letter Clicks the button (1) Unknown
Firefox 3 Linux Alt + Shift + letter Clicks the button (1) Clicks the anchor
Firefox 3 Mac OS X Control + letter Clicks the button (1) Clicks the anchor
Firefox 3 Windows Alt + Shift + letter Clicks the button (1) Clicks the anchor
Internet Explorer 6 Windows Alt + letter Sets focus on the button (2) Unknown
Internet Explorer 7 Windows Alt + letter Sets focus on the button (2) Sets focus on the anchor (2)
Internet Explorer 8 Windows Alt + letter Clicks the button (3) Sets focus on the anchor (2)
Internet Explorer 9 (beta) Windows Alt + letter Clicks the button (3) Sets focus on the anchor (2)
Safari 3.1.2 Mac OS X Control + Option + letter Clicks the button (3) Clicks the anchor (3)
Safari 3.1.2 Windows Alt + letter Clicks the button (3) Clicks the anchor (3)
Safari 5.0.2 Mac OS X Control + Option + letter Clicks the button (3) Clicks the anchor (3)
Safari 5.0.2 Windows Alt + letter Clicks the button (3) Clicks the anchor (3)

 

  • Red = Different behavior for buttons and anchors
  • Comment 1 = To just set focus on the button/anchor, change your about:config setting for the “accessibility.accesskeycausesactivation” user preference.
  • Comment 2 = Press Enter to click the button/anchor
  • Comment 3 = There appears to be no built-in mechanism to just set focus on the button/anchor.  The component handling the click event would be responsible for setting focus while handling the click.