When i tab (via tabulator) through the elements of my page, im jumping on each single sort-by-column element in the table header (which by click sorts the datatable e.g. asc/desc by the column).
Is there any way to prevent this? I dont want to jump on the sort-elements inside the header, when i press tab.
for testing ->
http://www.primefaces.org:8080/showcase/ui/data/datatable/sort.xhtml?jfwid=96c2f
just press tab and you will jump through the headers.
I need this for a page where the user tabs through all input elements - for workflow optimization. Jumping through all the sort-elements of all tables on this page is a big time waster.
Sortable table headers are focusable for a reason: accessibility. This is important and in some cases and countries even required. Not something you want to throw out of the window.
If you want to optimize the user experience, why not set the focus to the first field the user is supposed to deal with? PrimeFaces offers a validation aware Focus component which can help you with this task. That's the route I would take.
See also:
https://www.primefaces.org/showcase/ui/misc/focus.xhtml
https://primefaces.github.io/primefaces/10_0_0/#/components/focus
If you really, really want to disable focussing of sortable table headers, you could use a bit of JavaScript to set the tabindex of the sortable headers to -1 to prevent them from being focusable:
$("th.ui-sortable-column").attr("tabindex", "-1");
But, again, I would go for the focus option.
See also:
Make an HTML element non-focusable
Related
is there an option or maybe a small custom code to make Gravity Forms radio buttons jump to a field on selection?
In my example, i have a list of 14 options. Using a condition logic when you select one option a custom HTML is revealed right under each and every option. For desktop is super ok, the screen is big and all fit well. The problem is for mobile devices because you select an option but after that, you have to scroll to see the custom HTML.
Is there any option or custom code snippet in Gravity Forms that jumps to that custom HTML when an option is selected?
I found some resources on how to make this using HTML code with ids but this is somehow dynamic though the HTML code is placed in the same position. My first idea was to add the same ID to each and every HTML code so that when a radio button is pressed it scrolls to that ID. Don't know if it makes sense but ...
Can someone help me with some resources or give me some hints? Many thanks.
I want to "prevent browsers from prefilling form inputs when hitting the "back" button". Indeed, I want the initial values to be filled in (added via jsp), not the browser's (cached) values.
Solution 1: I found out that this can be done by disabling the browser caching for the current page. This seems a rather extreme solution considering that I "only" want to disable this prefill feature for a "form" (hence disable caching for the form only, not the whole page).
Solution 2: Then, the obvious next solution is to use javascript: that is, store the initial value in a data-* attribute, then, on page load, replace the input value by the initial value if they differ.
Both solutions seem rather unperfect (these are rather work arounds) I turn to you guys hoping to hear of a better one.
Resources:
How does SO's form remember previous input values?
Disable Firefox's Auto-fill
Pressing back prefills inputs with value from right before submit
HTML form values and 'Back' button
The first thing that comes to my mind is to use a <input type="reset"> button. These aren't seen often nowadays because the user rarely actually wants to reset the form, but here it might just be what you need.
You could also do it in javascript on page load with form.reset(); instead of providing a button for the user.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset
This is similar to your solution 2 and thus still a workaround of the browser behavior, but it is a(n old) part of standard forms and I think it'll do the trick with very little additional code (no need for data-* attributes), so wanted to throw it out there.
I am currently working on making my Flex application accessible.
I have an mx DataGrid that I am using for showing complex data. Each row contains information about a person and one of the columns contains a button to "submit" that person's information.
Currently if I tab to the DataGrid, it has focus on the whole thing, but I cannot tab to individual cells. For accessibility purposes, I need the user to be able to tab to each of these cells to read the information. Everywhere I've looked I've found that it seems the only way to focus on an individual cell is to set the editable property to true. However, I do not want to make the field editable, as that information should not be changed.
At the very least I would like to be able to tab to the cell that has the button ItemRendender for each person. I could set the rest of the information in the accessibilityName of that.
Is there any way to accomplish this? Or am I going to have to find a more "creative" solution?
In case anyone is wondering how to get around this, the only way I could find is to switch over to an AdvancedDataGrid. If you set the ADG's selectable property to true, you can use the arrow keys to select a whole row at a time, and the screen reader will read the whole row of information.
Then to get the effect of clicking the row's button, I set a keyboard event watcher that performs the function of the button using the target(ADG)'s selected item when you press space.
I have a handful of pages that let me alter the status of things (like changing the status of a listing or deleting an user) and I was wondering: should I use a link or create form buttons for those actions? (without javascript)
What are the pros and cons of each implementation? It seems to me that link is easier to code but form buttons seem more secure.
What do you think?
Non idempotent operations, like creations, updates and deletes are supposed to be done with a POST. So, without JavaScript, a form should be used with a submit button. This at least warns the user, if he refreshes the page after the delete, that the action will be resubmitted.
A useful pattern, to let the user refresh the page after the post and not risk a re-submit, is the redirect after post pattern , also known as post-redirect-get. This makes sure a refresh is possible, and make the browser "forget" about the post in his history, allowing the user to go back without resubmitting the delete.
well with css you can make buttons look like links and links look like buttons, so it's mostly a matter of appearance.
Personally, I try to use links to indicate movement (to another page, to another part of the page, popup page, etc) and buttons for actions (updates, deletes, 'buy', etc)
When the user clicks on (or moves their mouse over) my tables' column headers, I will use JavaScript to popup a lengthier description of the data in that column.
However, in order to entice the user to move the mouse over (or click on) the column headers, I need to make them "look clickable". I think I've seen this done before using a HTML link that doesn't actually link anywhere, something like
Age
From a semantic markup point of view this seems like a bad approach, because the element isn't actually a link, I just want to make it look like a link, so that the user knows something will happen when they click on it.
Is there a better approach?
Thanks,
Don
One option is to use the CSS "cursor" property to make the cursor turn into the "hand" pointer that is typically used for links:
.myHeaderClass{
cursor: pointer;
}
If your page applies special styling to links (e.g. a different color) you could also do the same for these headers, of course.