I have a react application created with Material-UI. The user has asked to enable keyboard navigation for the whole website. I am unable to navigate tables with keyboard on this website. My table looks something like https://material-ui.com/components/tables/#fixed-header. I want to go up and down a row on pressing "up arrow" and "down arrow" on keyboard. How can I enable this?
Keyboard navigation generally refers to being able focus on and trigger interactive elements like links, buttons, date-pickers, modals etc using only the keyboard controls. A table is not an interactive element so not focusable by the keyboard.
Your user's request may be intended to ensure the website meets Web Content Accessibility Guidelines. Material UI tables are semantically marked up as tables with a table header row, so the basics are there to meet this criteria.
If you activate a screen reader (like VoiceOver on Mac or NVDA on Windows) you will then be able to navigate the table with the arrow keys and each cell will be announced by the screen reader.
https://webaim.org/techniques/tables/data
Related
I have a complex react app which I would like the user to be able to navigate through the focusable elements using the keyboard arrows. (Like the tab does)
I have been searching the web for hours to find a solution for this, but all answers solve it for a single component/list/grid, etc'. I want it to work in the entire app which is made of many big and small components. Any way to achieve this?
Please note that using the arrow keys wouldn't really help people using assistive technologies. One reason for that is e.g. in a screen reader users often navigate a page using the arrow keys within the so called browse mode. Though one can change from reading mode to focus mode so that the application will handle the arrow keys the authoring practices require an application to be navigable by tab. Also what should happen, if the user hits a grid with the arrow keys? I as blind user would expect that i navigate the grid with the arrow keys instead of being brought to another control. Please see also https://www.w3.org/TR/wai-aria-practices-1.1/
How do I get the Virtual keyboard to open on my tablet or phone?
I have a web version of my app and now we are styling for smaller devices.
Question: when I go to the drop down box to enter a clients name on my Desktop, I am able to start typing the name...(ex...I am looking for "Wolverine") I can either scroll all the way down to the W.... or I can use my keyboard and start typing "W" and then all the names starting with W are visible..This works nicely.
How do I get the Virtual keyboard to open when we touch the drop down box on smaller devices( like my phone and Ipad) like it does on the web version? Currently when we touch that box, the names are populated with radio buttons in one browser and no radio buttons in another browser but all I really want is for the Virtual Keyboard to pop up so I can type the name ( not using ajax).
Actually, the question could have been more specific. I was getting radio buttons on my android device browser. Android has a default radio button for certain fields. I decided to make the search box using ajax which will not default to radio button selection.
I have a popup with some input fields, links and buttons.
When I press tab, then the focus is moving to next element as expected.
After completing all the focus-able fields, tab focus moving to the Parent window's buttons, links, etc...
Is there any workaround to rotate the tab focus within the popup ?
I am working with ADF in JDev 11.1.1.7.0.
This is ADF framework bug. Hosted a bug with ADF Framework and they have accepted this as a bug.
I'll update this post once I get the resolution from ADF team.
I am working on codenameone, and trying to make the first UI.
A basic UI with a title and two buttons on two sides of the "title" to go to two different pages.
I was trying to do that with "Form" component but then it only gives one button by default, which is just taking me to the previous screen.
Not sure how to do this, any link or tip is a nice help.
thanks
Use addCommand(new Command("X")) or in the GUI builder just click the commands property in the form. It will automatically use the menu for Android.
The back button is added automatically for iOS apps for back navigation which you will probably need. You can disable it in the state machine code and have room for two commands in the title.
We have a Silverlight app that contains a grid, and we've added support for selecting multiple cells, copying their contents to the clipboard, and pasting back elsewhere in the grid. Currently the user invokes the Copy and Paste commands by either clicking a toolbar button inside our Silverlight app, or using the standard keyboard shortcuts, which we catch with a KeyDown event.
Is it possible to also hook into the browser's native Edit menu, and the Cut, Copy, Paste, etc. menu items that are built into the browser? For example, can the user drop down the Firefox button (or press Alt+E to drop down the classic Edit menu), click the Copy item in Firefox's menu, and have some sort of Copy command be relayed to the focused control in my Silverlight app? Same thing for the equivalent menus in IE, Chrome, Opera, etc.
I wouldn't be surprised if this can't be done, since even long-established browser plug-ins like Adobe Reader have their own buttons for copy/paste and even print, rather than hooking into the browser's native menus. But I've never programmed to a browser's plug-in model, so I don't know for sure what's possible.