Keyboard accessibility ( WCAG) in panels with list of elements that has assigned button role - keyboard

Hi :) I would like to ask you about how to treat elements that compose a list, but whom have assiged a button role and are put in side panel ( so it is not a menu or dropdown). My main problem is how to decide is to where ARROWS should works and where TAB.
Moreover I have a differ types of list items that consist of:
checkbox/ radiobutton only
checkbox/ radiobutton with a link to another panel
two icons/ buttons that has defined an activities etc.
Please look at pictures and help me please :)
PINK - "arrows"
BLUE - "TAB"key

You should hardly decide which component will use TAB key or Arrow Keys. Keyboard accessibility for a large number of components is already defined in WAI-ARIA Authoring Practices.
Adding a different behavior could create issues to both sighted, and non-sighted users because they'll already be knowing which key to use based on the component or they'll know intuitively because of standard roles or they'll know as they use keyboard more to browse.
Offer List
Listbox will work. Arrow Keys to navigate and Enter key to perform the action.
List of Checkboxes and Radio Buttons
I would recommend to keep Checkboxes and Radio Buttons to their default keyboard behavior. Since your cases are more of a list, you can convert the list of checkboxes and radio buttons to Single Select and Multi Select Listboxes and use Checkbox and Radio Button as a font icon or graphic to show the selection, similar to how tick is shown in this Listbox example. When you convert to a Listbox, you'll meet the Arrow Keys requirement.
Selected Fruits List
There are some issues in the required keyboard behavior: How will user know if Arrow-Left or Arrow-Right need to be presed, think about non-sighted users.
Fruit Name and i icon button
In your need, you want both Fruit Name and i icon button to open a panel, suggest to NOT use Arrow-Right to i icon button and only use the Enter key to open the panel. May be you don't need i icon button at all.
Delete icon button
Suggest to use DEL key to delete the item
Conclusion
Remove i icon button. If you can't just keep it as graphic element without any events
Use Enter key to open the panel
Use DEL key to delete the item
I think the whole list will then become a listbox, navigable using Arrow Keys and Enter to invoke an operation
Vegetables List
Neither Accordion nor Nested List works here because you have two actions to do: Make a selection, and Expand and Collapse. I haven't tried TreeView but you can check.

Related

Group radio buttons on Excel

I have two groups of radio buttons on the same Excel worksheet that I want them to work exclusively from each other.
I tried to search online for answers, and got to know there was GroupName Property which can be used to group the radio buttons, however, I haven't been able to locate this property.
Can anyone tell me how to find it?
There is only object positioning under the property tab of the format control window.
You need to add a group box control and then insert the radio buttons into that group box.
See here for more info: Add a group box or frame control to a worksheet
Use ActiveX controls
and in developer mode right click on RadioButton
and in properties box

Toggle a custom icon on an Action Button on Lotus Notes form

When editing the action button properties, it allows an #if statement to flip/flop two choices (lock/unlock). i.e. #If(enlock=1;"Unlock";"Lock") for the "Label" of the action button.
At the bottom of the Action properties, icons can be None, Notes, or Custom. When I select Custom, I want the #if to use either the Locked/Unlocked Notes icons. (actn084.gif and actn085.gif, respectively) Or numbers #62 (locked) and #(I don't know/can't find, the # for the unlock icon).
I've tried formula with the icon number, like in a view, "display as icons" for view column. Using an #if, I've tried the gif on local and server replica's and it didn't give any results.
Please see the example image below.
Image example: http://i.stack.imgur.com/UBac3.png
You have to add actn084.gif and actn085.gif to Resources/Images.
Then, you can use a formula
#If(enlock=1;"actn085.gif";"actn084.gif")
for calculating icon.
As an alternative, you could create two buttons and hide-when them depending on field enlock. You could assign label and icon direct to buttons without formula then.
The hide formula would be enlock=1 for first button and enlock!=1 for the second. In both buttons you would have to add #Command([RefreshHideFormulas]); at the end of your action formula to refresh the action buttons (or Call uiDoc.RefreshHideFormulas for LotusScript action code).

How to add Listpicker to textbox in LiveCode

I want to add a list picker in Live code.When a user click on the Textbox the list picker should open with list of items.How can do that?
Be aware that your text field must be locked in order to send a "mouseUp" message, if that is how you want to show the combo box that Monte suggested. There are other ways around this, if you still want to be able to type into that field. Write back with your exact needs.
The combo box is useful because you can type right into it. If you only want options that will load data into an existing field, a popup or pulldown might be something to look into.
On the left side of the tool palette about the middle is a style of button called a combo box. I think that's what you want.

Custom shortcut for a ribbon button

I want users to be able to copy product number from the main grid of Products entity.
For this I added the button that does a request for product number and puts it into clipboard with window.clipboardData.setData('text', 'P/N').
But to make it easier ribbon button must have a shortcut (Ctrl+C).
How can I assign shortcut to a button in a supported way?
What are my unsupported options?
The only options I know of is
1) Inside IE, you can use the execCommand('copy') feature. You'll have to highlight the text inside a textbox to actually copy it though.
2) Use the flash add in ZeroClipboard
https://github.com/jonrohan/ZeroClipboard
Either way, it's unsupported really.

Rich pick list tab order

I am using rich:picklist. It has to two list boxes as it has and four buttons in between for moving one or all . I need to give tab order to this picklist together with buttons and boxes.
Can anyone help?
I think you can't beacause there isn't tab index on the component.
Looking on the generated html source, boxes are tables and buttons are div : hard to define a tab order without the generated ids on such components...

Resources