I'm using ReactJS and I have a lot of <button> in my code. I notice that I can use the Tab key to move over the button and there will be an outline on focused button like this:
But on this website which I'm trying to replicate, the buttons they use do not get Tab-focused on normal but just when we turn on the VoiceOver accessibility mode.
And the border of the Tab focus is also different.
I wonder how can we implement this in React?
Changing tabIndex to 0 or -1 doesn't work.
Thanks everyone!
Update
I ask because this leads to a problem:
If I use the UI Keyboard (UIKB) first and then try to type with the real keyboard keydown event. The tab focus would just stuck on the UIKB letter and return it twice.
This doesn't happen on the Wordle game because they just allow using tab focus when in accessibility mode.
tabIndex = -1 doesn't work because I want to allow the user use the tab focus just in a11y mode like Wordle, I don't want to totally disable it.
Related
I'm making an accessible web application. One of the feature is a button that allows users to scroll to a certain section of the page. I'm using window.scrollTo(x,y) for this functionality.
Now testing my application using the built-in Mac VoicerOver, I found that although I can click on the button and scroll with no problem, after scrolling, VoiceOver doesn't read anything. Instead I have to click on the mouse one, or use the keyboard equivalents to make it read the content that's on the screen after scrolling.
I'm afraid that some users may not realize that they need another click after clicking on the button. I have two possible solutions:
When the screen reader read the button, it also tells the user that if they want to go to the livechat, they need to click again after clicking on the button. I know how to implement this one, but it looks verbose and dumb.
Change my code so that VoiceOver will read the content after scrolling. I don't know how to implement this one.
The content I would like the screen reader to read is wrapped in a tag.
If you are only scrolling the page, then most screen reader users will not care that you scrolled. With limited or no vision, whether the screen scrolls or not does not matter because the screen cannot be seen.
However, if you are scrolling the page in order to put a certain element into view, then that would benefit screen reader users too.
It sounds like you're trying to do the latter:
allow users to scroll to a certain section of the page
In that case, you also need to put the keyboard focus on that element via the focus() javascript call. Moving the focus will cause VoiceOver to read that content. But to move the focus to a natively non-focusable element (such as an <h2> or a <section> or <p>), the receiving element will need tabindex="-1".
<h2 tabindex="-1" id="myh2">some heading</h2>
and then somewhere you'd have this javascript:
var element = document.getElementById("myh2");
element.focus();
I want to set focus on a button while caret is present in textbox and user can still enter data to textbox. But when user presses enter key, button press will be simulated.
I am currently using a work around to solve this problem by handling onKeyDown event and checking for enter key. But problem is there is no clue for user to understand this as there is not blue border around the button that indicates focus on button.
Here is a example of what I want to implement (user can enter text in textbox while focus is on :
I have tried to search on google and StackOverflow but could not find any relevant result.
This is a fundamental Windows principle. It's not possible to have 2 controls (windows) focused at the same time.
So the focus should be inside the text box. But you can get the visual indication needed by setting the ok button as AcceptButton of the form (you might also want to set cancel button as CancelButton).
In the form constructor, load event or using designer:
this.AcceptButton = okButton;
There is no need to handle KeyDown event - as soon as the text box is not multiline, pressing Enter while the focus is inside it will generate ok button click. The same applies for the button set as CancelButton when you press ESC.
I am trying to have a small form in my menu item. I have split button that has one item. In that item I have form: datefield, textfield, button, etc...
The issue is connected with some keystrokes such as left arrow, right arrow. This key events are supposed to hide menu item by default. Now I need to disable them since every time an arrow button is used in my textfield, it hides the menu.
I am using beforehide event, but cannot find a way to achieve to my goal. I could not find any events similar to keydown to handle this case.
One more key backspace is also used for editing the textfield, but this one redirects the browser.
IN SHORT: I want to be able to freely use the keyboard in my menu item's textfield without hiding it. Is this possible?
Just use enableKeyNav: false in the menu configuration. From the doc:
enableKeyNav : Boolean
True to enable keyboard navigation for
controlling the menu. This option should generally be disabled when
form fields are being used inside the menu.
Defaults to: true
I am following the 'Stock Trader RI' example by the Prism team,
but it does not address this exactly :
I have a Shell with a Main Region in it.
In this shell I have some filter fields and a grid.
When I press on a button - I would like to load a screen that allows me to change the filters,
and then press 'Save'. This would then call a service to update the fields, and close the pop-up.
Here is an illustration of the 'Shell' before pressing the button (left) and after (right) :
Problems are :
The 'Stock Trader RI' sample app only uses a modaless dialog popup. I need a MODAL pop-up (background will continue to refresh, but user will not have access to it as long as pop-up is active).
Need to have Silverlight-like effect when pop-up shows, meaning - 'Shell' needs to appear 'disabled' (like a gray mask over it).
Pop-up window should have no 'X' button and no 'minimize' or 'maximize' buttons. The pop-up window should be simply a rectangle with curved-corners.
I don't think I can use a 'Notification Window' or a 'Confirmation Window' because I cannot put inside them whatever I want. This is an example with 2 fields, but the pop-up might be much more complex with tabs, and a lot of information shown to the user.
So how do I show a modal pop-up from my "WPF+PRISM" Shell-View-Model once the 'Edit' button is pressed ? (Meaning, once the 'EditCommand' is executed...)
I have found a solution here.
Basically it uses InteractionRequest and it allows me to open a window (that I can style however I want, without the 'Maximize' 'Minimize buttons), and also - I can choose for it to be Modal.
Great thing about this solution is - that I can use custom pop-ups and not only Notification or Confirmation pop-ups.
Also - I can pass information back to the class the invoked the 'InteractionRequest'.
Only thing that it doesn't solve - is that I cannot make the calling view look disabled by adding a gray semi-transparent over it ... haven't figured out yet how to do that...
I have a base panel class that has (among other things) three buttons. I use subclasses of this base class in two different config dialogues. Both dialogues have an OK button set as the accept button.
In one of the dialogues, if I click one of the buttons in the base class, focus immediately returns to the OK button, so pressing the enter key works as expected.
In the other dialogue, focus remains wth the button in the base class that was clicked if it is enabled, or moves to the next button if the clicked button is no longer enabled.
There is no code that handles the base class button click events in either of the derived classes.
Ideas anyone?
I'm not sure what's going on in your first dialog because it doesn't seem to be operating the way I would expect it to. The second dialog sounds more like the standard behavior.
In Windows Forms, the AcceptButton property only comes into play when pressing Enter doesn't otherwise cause any actions. In both of your examples, clicking on a button should move the focus to that button, and subsequently pressing Enter would cause another click on that button.
In any event, I think it's generally preferable to stick with the Windows user interface guidelines and not automatically change the input focus back to the OK button. If the user clicks on one of the other buttons, the focus should stay there until they move it.
i don't know what language you are using, but the button class should have a focus method that will highlite it for enter pressing. in the click method, or when you open the dialog you can call this method to make the button you want get the form's focus
c#
myButton.Focus();