Lost focus on many elements (like filters) in application

Viewed 47

I must adapt to application to wcag focus requirements. My application works on jsf/primefaces and I have problem with focus on many elements. For example unexpanded filters contains ui-helper-hidden-accessible class (which is invisible until I click filter to expand) and I cant focus on unexpanded filter name to expand it by keyboard because (I think) ui-helper-hidden-accessible which size is 1x1px receive focus.

I want to span element inside filter div or div with ui-selectcheckboxmenu-trigger class will receive focus instead of unexpanded ui-helper-hidden-accessible. Do You know how to do it? Second example is primeface's menuItems - they also not receive focus. The only solution I know is to replace the elements to elements without ui-helper-hidden-accessible class, but unfortunately I can't use this soultion

enter image description here

                <nf:author id="filter-selected-authors"
                           value="#{applicationsBean.dataModel.filter.selectedAuthors}"
                           converter="#{userConverter}"
                           completeMethod="#{applicationsBean.usersAutoComplete}"
                           componentsToUpdate=":datatableForm:applicationTable"
                           dataTableModel="#{applicationsBean.dataModel}"
                           oncompleteJs="dynamicScroll()"/>
0 Answers
Related