Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5486

za11y: I do not see when a listbox gets focus (by keyboard)

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • 10.2.0
    • 9.6.1
    • None
    • None
    • ZK-EE 9.6.1 / Using Module za11y! for accessibility.

    • None

      updated ticket:

      Steps to Reproduce

      run attached sample with za11y jar, using wcag_c or wcag theme.
      za11y-grid-listbox.zul

      Start with focus in the top textbox
      tab into the listbox

      Current Result

      No visual indication that the focus is currently in the listbox.
      navigation and selection are possible at that point, but there is no visual marker for it.

      Expected Result

      Listbox should indicate that it is currently containing focus.

      Debug Information

      new focus-withing css pseudo class would be a good fit for such style

      Workaround

       	<style> 
      	.z-listbox:focus-within {
      		position: relative;
      	}
      	.z-listbox:focus-within::before {
      	    z-index: 1;
      	    content: "";
      	    display: block;
      	    width: 100%;
      	    height: 100%;
      	    position: absolute;
      	    box-shadow: inset 0 0 0 2px #E67626, inset 0 0 0 0px #FFFFFF;
      	    pointer-events: none;
      	}
      	</style>
      
      Original ticket

      Steps to Reproduce

      I have a listbox (bound to a ListModelList with single selection). I added a tabindex="0" to the <listindex /> element.

      Now I can "tab" with the keyboard into the listbox. Cool.

      Current Result

      I do not see that happen. There is no visual clue that I entered the listbox.

      But: As soon as I use the cursor-keys (up/down/left/right) the first / selected row gets highlighted (=selected).

      Expected Result

      Either the first entry of the listbox should be selected / highlighted or at least the listbox should get a focus border. 

      Debug Information

      none

      Workaround

      none

      Funfact: If I use a grid there is a bright visual hint whenever the grid is entered via keyboard. But here the selected line(s) in the ListModelList are not highlighted. And: keyboard navigation does not happen with the arrow keys but with the tab key.

      So if anybody could assist that would be greatly appreciated as obviously both variants fail for different reasons.

       

            jamson jamson
            KlausWr KlausWr
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: