TL;DR The title says it, details follow.
I'm having a form like
Bank: Bank of Neverland
Customer ID(?): Peter Pan
except for that it's real and the "Customer ID" is something provided by the bank. The bank may call it differently (so I change the label to e.g., "User name") and to prevent confusion, a lengthy hint may be needed. So I imagine using a question mark-like icon ((?)) popping the hint on click.
There are more fields which need a hint popup. I'd be fine with placing them elsewhere in the row.
However, the InputComponent.lbl is package-private and I can't see any way to attach the icon. I'm aware of TextComponent#hint(String hint), but it only allows for a rather short text, while we sometimes need a rather lengthy explanations (and that's not something we could change).
TL;DR we didn't implement that yet. Label is meant for the hint label not for that. You can probably add a ? button next to the component and show a popup or just add a label below.
What you are looking for is #1 in this image taken from here:
We implemented #2 which should make implementing #1 a bit easier... At least in theory but it won't adapt to the iOS mode of the UI which looks rather different. That was the main blocker for the implementation.
As a short term solution you can just add a SpanLabel below the text component or add a question mark button next to it.
Alternatively you can enhance the error label functionality in our code to support "helper text" which you might show as a popup on iOS or as a floating hint in the bottom of the screen there. Then submit that as a pull request to the project. You can also file an RFE we are under heavy workload so I'm not sure when we'll get around to it.
Related
When using NVDA on Firefox, it reads in row-wise order in React. How can I change the reading order?
Sample code:
<Row1>
<row-item-left>{some content1-left}</row-item-left>
<row-item-right>{some content1-right}</row-item-right>
<Row1>
<Row2>
<row-item-left>{some content2-left}</row-item-left>
<row-item-right>{some content2-right}</row-item-right>
<Row2>
Now it reads, "some content1-left, some content1-right, some content2-left, and some content2-right." I want it to read, "some content1-left, some content2-left, some content1-right," and, "some content2-right."
I use tabindex. It's working fine with tabs, but I don't want to focus elements Also it's not working with arrow keys. Please help me on this.
The reading order is always the same as it appears in the accessibility tree, and the accessibility tree is built from the DOM.
This basic rule can't be changed. CSS has no effect on reading order.
So if you want the content to be read column by column instead of row by row, you have no choice but rearrange your code so that it appears in the right order in the source:
<row-item-left>{some content1-left}</row-item-left>
<row-item-left>{some content2-left}</row-item-left>
<row-item-right>{some content1-right}</row-item-right>
<row-item-right>{some content2-right}</row-item-right>
I leave CSS experts tell you how you can achieve it.
Firstly accessibility isn't about what you want, never try to change expected behaviour.
When using a screen reader it is expected that items flow from left to right, top to bottom in 99% of cases (the way you would read the page normally).
The idea is that a screen reader user gets the same experience as someone who does not need to use one.
With regards to focus, never interfere with that either if it is something that is interactive (a clickable cell, link etc.).
If something is focusable it should also have a distinctive border (this helps users who use tab to navigate due to mobility issues know where their current cursor is placed on your site.) - just an extra tip, not relevant to your question.
The current read order is correct, do not interfere with it.
With regards to using arrow keys that may be useful, just use JavaScript to intercept the key presses and move focus accordingly (give that a go and post another question with a code example if you get stuck.)
Bear in mind you should also provide a way for people to disable this arrow key behaviour as they may have changed the key bindings on their screen reader and that would cause accessibility issues if your JavaScript interferes with their preferred key bindings.
I am not sure why you said you don't want to focus the element, if your custom HTML elements have focus in the first place then adjust those elements (as you must have added a tabindex=0 or some JS to those elements in the first place to make them focusable as <divs> are not focusable by default.)
I've been building my Codename One app for the phone screen format so far. There is a separate Form for the main menu, then a second Form with a list of elements, and then a third Form to edit an element selected from the list. Each Form has an overflow menu and various Titlebar command buttons. And each (Extended) Form has a lot of code that implements the functions in the Form and shares variables etc.
However, to use the tablet (iPad) screen estate, I would like to show the main menu on the left of the screen, the list of elements in the middle and the element edit form on the right. Something similar to the screenshot below. This seems to be a common type of layout on tablets and suits my app usage pattern well.
However, I don't see an elegant way of structuring the code to do this. I can't easily combine the list and edit Forms into one Form, and writing a completely new Form just for the tablet format would be a lot of work. I assume others have faced the same challenge and would love to hear how you achieved this.
PS. I know the side menu can be made permanent but that only solves part of the problem, not how to show a list and edit Forms at the same time.
There is no one answer for this but if you look at apps like Codename One Build you would notice they adapt to this form factor.
We usually just use isTablet() to adapt the UI at key points to the different form factor. One element is the permanent side menu which we turn on in the init method using code like this:
if(Display.getInstance().isTablet()) {
Toolbar.setPermanentSideMenu(true);
}
It makes the side menu stay open all the time. Within the code we try to use Container instead of Form. This allows us to package multiple logical pieces into a single UI for the tablet mode.
There's probably a ton of stuff I'm probably missing but recently I was thinking how viable it would be on forms to have users perform an action in the UI such as drag/drop a (for example) paper widget into a box widget (possibly also randomly placed on the page) to represent submission of a form.
The idea behind it being, find some action that a human would more likely be able to perform than a bot. Would this in any way prevent spambots?
(I'm laughing as I type this btw, but I just wanted to see how crazy this idea really seemed)
Sadly I don't think it would help. All that happens when a user clicks, drags and drops a component is that events (like click) get fired. You could just as easily fire those events programmatically if you were a spambot. Nice idea though.
Like most home-made spam prevention methods, it'll work until your site is large enough that a spammer decides to pay some specific attention to your site -- at which point, it'll be broken to pieces. But there's no need to get as fancy as what you're describing. Spam-protection methods as simple as "type 'orange' into this box" or "what is one plus one" will work just as well, as long as your site is only being hit by automated tools.
When designing a form I have the option of putting a close button at the bottom of the form. The form will also have a close form "x" button in the upper right corner of the window as provided by winforms.
Based on the principle of "There should be one and preferably only one obvious way to do it" I was thinking the close button should be removed because of the forms existing default functionality.
What have the rest of you found in your experience that works best for users or has been the standard for UI setup?
I have done a considerable amount of design work, and I can't say I have heard of the principle of, "There should be one way to do [some task]." In fact, I have heard (almost) the opposite: "There should always be one obvious way to do a task, but additional methods could be used to help different user types." An example of this is the ability to hit the "Save" button to save a document. But, you can also do "File > Save" and you can also hit Ctrl + S. Three ways to do the same task.
Also, if you're programming in a Windows environment (as it appears you are), you will automatically get multiple ways of closing a window. The [X], of course, Alt + F4 is typical, you can setup Ctrl + C, etc. I wouldn't particularly put a close button on the bottom of the form unless it flows with the form's input. For example, if you want to [Submit] or [Close] the form - does that make sense? Would it be better to [Submit] or [Cancel]? Think about what your users are doing and how they are using the form.
Here are some guidelines I follow:
If the form is an application (it was launched directly from Windows), it should probably not have a close button. Users expect to be able to close the application by clicking the X in the top-right corner.
If it is a dialog (it was launched from another window within your application) that simply displays information, it should probably have a close button and you can optionally leave the Windows close button as well.
If it is a dialog that allows the user to edit data it should have a Save or Apply button and a Cancel button but no Windows X. The reason is because it is ambiguous what it means. Should it save the data? Cancel it? Display a dialog asking them what they want to do?
In general I do agree that there should be only one way to do something. The reason is that a reasonable user will have to wonder if they do different things (even if they are named the same). Even if the user discovers they do similar things, they may wonder if they are subtly different.
Of course there are exceptions to the rule. For example, most users understand that the file menu, toolbar, and keyboard shortcuts of the same name all point to the same command.
I think that principle applies mostly to coding (and not for every language, think of Perl!), for UI's usually it's good to have different ways to do things... because it allows you to do things faster.
Think about any common operation like cut or paste, you can use the edit menu, the contextual menu, the keyboard shortcut or even the icons in the toolbar. Try to remove any of those ways of doing it in any application and you'll have hordes of users screaming to get it back.
So here the main principle is to not change what the user expects. Another remark: be consistent, though there might be different ways get access to the same functionality, all of them should work in the same way (I'd be very pissed of if copying with the keyboard shortcut did a different thing than copying with the right mouse button XD).
Is there a simple way to tell what triggered Click event of a Button apart from setting multiple flags in Mouse/Key Up/Down event handlers? I'm currently only interested in distinguishing mouse from everything else, but it would be nice to handle Stylus and other input types if possible. Do I have to create my own button control to achieve this?
Edit: To clarify why I care: in this particular case I'm trying to implement "next" and "previous" buttons for a sort of picture viewer. Pictures in question may be of different size and buttons' positions will change (so they are always centered below picture). It's quite annoying to follow such buttons with mouse if you need to scroll through several pictures, so I want to keep mouse position constant relative to clicked button, but only if it was clicked by mouse, not keyboard.
Edit2: It does not matter whether the buttons are on top or down at the bottom, since the center can change anyway. "Picture viewer" here is just an abstraction and in this particular case it's important for me that top left corner of the picture retains it's position, but it's out of the scope of the question to go in details. Scaling the picture is not so trivial in this sort of application as well, so I do want to know the answer to the question I asked not going into UI implementation discussion.
if (InputManager.Current.MostRecentInputDevice is KeyboardDevice)
You should instead handle specifically the MouseXXX, StylusXXx, and KeyboardXXX events.
Could you elaborate on why you would care?
Having written many custom controls myself over the years, I cannot recall one instance where I cared how a click event was triggered. (Except for that pre VB6 control lifecycle glitch that fired the got focus-click-lost focus in a different order depending on whether you clicked a button, used an accelerator key, or pressed ENTER as the default).
Personally I find it annoying when people place buttons at the bottom of Windows forms and web pages. Read some of the literature on UI and you will find that most people don't even get that far if they don't find something interesting on the page/form. I like to be able to click next as soon as I know the content is of no interest to me, so keep the nav buttons prominent at the top.
I would put the prev/next at the top of the picture where you can control their position. Dancing those buttons around goes against most opinions on UI consistency. Further creating a different experience for a mouse user versus a keyboard user also goes against most current wisdom on good UI design.
The alternative is to choose a constant max size a picture can obtain on the UI and if it exceeds that scale to fit, otherwise allow it to change freely within a frame. This keeps your buttons at the same place if you absolutely must have them on the bottom.
You could create an enumeration with the different devices, have a global property that you set every time the mouse/keyboard/etc. is initiated, and just refer to this when needed.