1

Currently in our web application, Trinidad JSF tr:table tag is used to display information in the table format. Upon using the attribute rowSelection=single, radio button displayed automatically for each row in a table and name/text next to this control is not visible to the user.

When user navigates with tab key to select the radio button control or user clicks on the same with mouse button, focus with dotted line is not displayed on the control.

What are the different approaches to display dotted line (provided by IE browser) around the radio button / check box control created by Irinidad JSF table tag?

End user requires this accessibility feature.

Right now, we are using,

  • myfaces-api-1.1.4.jar, myfaces-impl-1.1.4.jar,
  • trinidad-api-1.0.7.jar,trinidad-impl-1.0.7.jar,
  • Browser IE 8.0
Venkata Bhaskar
  • 11
  • 3

1 Answers1

0

Find your CSS file, look for any lines that have

outline: none;

And remove them.

This will fix most, if not all of your missing focus indicator problems. There might be scenarios where you have a hidden overflow that is causing the outline to not show up on some browsers. You would have to find those and fix them by adding appropriate focus styles.

unobf
  • 7,158
  • 1
  • 23
  • 36
  • Thanks for your quick reply. 'outline: 0;' css property is not defined for any of the tags. 'overflow: hidden' is defined for html, body tags and 'overflow: auto' defined for content. – Venkata Bhaskar Feb 04 '15 at 06:29
  • I wrote in my main comment that, name/text next to the radio button / check box control is not visible to the user. When I observe the rendered html code, – Venkata Bhaskar Apr 06 '15 at 05:28
  • You can see here with this example http://jsfiddle.net/9frq0fsy/ that the outline appears even with the label. There is some other CSS that is causing your focus outline to disappear. It might be the CSS related to the labels. – unobf Apr 07 '15 at 11:05
  • Resolved the issue. After some research, I came to know that Trinidad JSF provides a configuration file called **trinidad-config.xml**. In this file, I set the the _**accessibility-mode**_ tag value to 'inaccessible'. This placed the dotted line around the radio button/ check box controls, displayed in table. This default dotted line appeared when user navigates the controls using tab key. – Venkata Bhaskar Mar 23 '16 at 10:12