I want to disable focus for button in composite component.
I have a component that looks like this:
When I'm pressing the "Tab" key, first the inputText component is focused, then the commandButton component is focused.
What I want is to have focused only the inputText.
How can I achieve this?
<h:commandButton ... tabindex="-1">
The
attribute tabindex defines in which order the component will be selected in the tab cycle. Documentation for h:commandButton states for attribute tabindex:
Position of this element in the tabbing order for the current
document. This value must be an integer between 0 and 32767
But i guess above can be ignored, as on the other hand w3c states (for html5):
If the value is a negative integer
The user agent must set the
element's tabindex focus flag, but should not allow the element to be
reached using sequential focus navigation
Related
I'm facing a very weird (& blocking) issue using diagrams.net webapp.
I'm trying to add some nodes in the Format Panel. I created a new tab in this panel & added in it some new inputs.
There are text inputs, checkbox inputs & textarea.
But the behavior is absolutely not the expected one.
For text & cb inputs, everything works fine, but textareas behavior is... at least very weird:
The field can't get focus by mouse clicking (remember that click works on other inputs). The only way to set the focus on it is by using JS focus() method.
Text inside the tag can't be selected by mouse. If element has the focus, text can be updated. Moreover, even if text can be changed, text cursor cannot move from the end of the text.
Textarea box is not resizable. There is the bottom-right arrow to resize it & I added the "resize" value to be sure but the feature doesn't disable but I juste can't. BUT ! If I set the attribute "disabled" then I can resize the box. Unfortunately, I can't disable the textarea since I want to put it because I need to write in it.
I can't show you code for now (it's just a new node creation using document.createElement) but you can easily test this: go to drawio webapp & when the webapp is loaded, use the Inspector in the developer tools to add a new textarea node in the format panel (div with ".geFormatContainer" class) : element is not focusable with the mouse, text inside it is unselectable & box is not resizable as long as "disabled" attribute is not set.
I added a click listener in the component to check if click did something & it does, but it doesn't give the focus to the element (document.activeElement says that body is focused -_-) so I think there is something in mxgraph which avoids the element's classic behavior. But what ?
Typically a combobox widget is an input field that launches an associated popup with a bunch of suggestions in the popup. In desktop browsers using keyboard, while the focus stays with the input field, pressing Up/Down arrow keys, the selection within the popup can be changed. Pressing ENTER key populates the input field with current selection in the popup and closes the popup.
For accessibility purpose, the input field is marked role="combobox", the popup is linked with the input field via aria-owns. The AT are indicated the current selection via aria-activedescendant.
While this setup works great in desktop browsers with tools like JAWS/NVDA etc., there seems to be a major issue with voiceover on iOS. On swiping the finger, the virtual cursor moves to the next element in the page from the input field, though I would expect with aria-owns set, the focus to move to the first suggestion item or to the popup.
Any suggestions on how such a combobox widget can be made accessible in iOS with voiceover?
PS: The popup and input field are not siblings in the DOM order.
It sounds like you are creating a custom combobox. If you use the native <select>/<option> elements, the combobox works correctly on ios/voiceover. If you are creating your own, follow the guidance on https://www.w3.org/TR/wai-aria-practices/#combobox. You mentioned several ARIA attributes so perhaps you're already following the advice on that page.
Swiping right with voiceover will move the focus to the next element in the DOM. If your dropdown list is hidden, then focus won't move to it. Double tapping on your <input> should display the dropdown list.
I use codeigniter with adminre template.
I use the checkbox class "custom-checkbox" that hides the input type="checkbox" and show a box styled with css.
When I trie to pass the focus to that control with the tab key, it doesn't get the focus.
I think the problem is that the focus goes to the input element and not to the box styled.
If I put the tabindex into the span or div where the checkbox is, it receives the focus but if I press the space key to check it, it doesn't work.
Any idea will be received gratefully!
I hope my explanation is clear enough, the english is not my native language :-(
Thanks
I have a form with <p:inputText> and <p:selectOneMenu> components next to each other. When the focus is on the input text and I press the tab key in order to navigate to select one menu by keyboard, then the focus is lost. I don't see which component is focused.
How can I get the focus on the select one menu when I tab into it?
You need to use the tabindex property of <p:inputText> and <p:selectOneMenu>, as explained in the documentation.
Using the tabindex property makes it possible to navigate between <p:inputText> and <p:selectOneMenu>. What worked for me was to see set the tabindex in <p:inputText> to n and n+1 in <p:selectOneMenu>. I used n = 90.
How can I force the Tab to focus the element I want, is it possible to give my software a list of elements to cycle focus ?
I remember once using a property called tabindex, but I can't find it anymore.
Maybe, preventing Tab to focus an element could also work ?
Yes, you can set the order of focusing for each widget in a container, using the function container.set_focus_chain().