I've got a combobox that is triggering an accessibility error from the Accessibility for Insights tool (https://accessibilityinsights.io/en/downloads/). The combobox can be seen in the mobile phone field with the country flag selector here - https://configure.awardsplatform.com
This is the error message I get from Accessibility for Insights:
Wai-aria 1.1 guidelines say the textbox is necessary - https://www.w3.org/TR/wai-aria-1.1/#combobox
However, I'm confused because Wai-aria 1.2 guidelines (still in development apparently) don't have it as a requirement - https://www.w3.org/TR/wai-aria-1.2/#combobox
And this example combobox also doesn't include the textbox - https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
There's conflicting information here so I'm unsure whether it's required or not. Does anyone know?
Short Answer to "Does a combobox require a child element with the role of textbox?"
Under current (aria-1.1) standards: yes.
Longer Answer
The standards will change soon(ish), you are looking at future guidance that has not yet been finalised. Under current guidance your country selection is using the incorrect role.
Why are you getting an error?
We are still working with aria-1.1 standards.
The definition of a combobox in the aria 1.1 standards is:
A composite widget containing a single-line textbox and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the textbox.
As for the example combobox you gave, you may have been looking at an example intended for aria-1.2 (although I still don't believe it would be valid then as it should still set the value of some kind of input, but we will see when everything gets officially released as I think the 1.2 definition of an "input" still needs to be better defined)
For now a combobox is an <input> (or equivalent) with a related list that can be used to set the value of the <input>. A key feature is that you should still be able to manually enter a value.
What should you use instead?
For your example a <select> (or equivalent such as role="listbox") would be far more appropriate as a user cannot manually enter a country.
Even when new guidance comes out a listbox will probably still be a better choice from the definition currently in place.
Related
Is there a way that I could partially select a list item with sap.m.ListBase mode set as MultiSelect?
Something like this for some of the entries in the list:
https://sdk.openui5.org/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBoxTriState
In the official UI5 API reference for sap.m.Checkbox, there's the property partiallySelected. But for the sap.m.ListBase, I couldn't find anything.
To anyone who faces this problem, I found a solution,
So earlier I was relying on the checkboxes provided by the list's MultiSelect mode and then displaying the items as StandardListItem but I later replaced it with CustomListItem and in it, added my own checkboxes, in which I could set the partially selected property.
I hope this helps :)
I don't think the tri-state makes much sense in combination of sap.m.ListBase and mode="MultiSelect". According to the SAP Fiori Design Guideline checkbox sections regarding "Tri-State":
Usage
[...]
You want to group multiple suboptions under a parent option, and require an intermediate selection state (tri-state). The tri-state indicates that some (but not all) suboptions are selected.
[...]
The main purpose of this state is to represent the mixed selection states of dependent input fields. If some (but not all) of the dependent fields are selected, the checkbox shows a partially selected state. This is only a visual state and can’t be achieved by a direct user interaction.
Unless the list control is of type sap.m.Tree, displaying tri-state checkboxes in sap.m.ListItemBase without any suboptions deviates from common UX patterns and thus might be confusing for end users. I'd suggest reviewing SAP Fiori Design Guidelines (or other design guidelines in case of freestyle) and re-evaluating whether checkbox is really the correct UI element for the intended interaction design.
I am trying to create an autocomplete textbox in WPF. What i found is http://weblogs.asp.net/okloeten/archive/2007/11/12/5088649.aspx. It seems quite close to what i needed. The only thing missing in this is when i press down arrow key after typing some characters it does not allow to me select an item from the narrowed list in dropdown.
Please give me some pointers how can i allow to select item using up/down keys after filtering list using some text input.
Regards.
There have been many implementations already for an autocompletebox. So as swiszcz stated, look for a working & well documented project. You need not spend time on trying to tweak some particular code for too long, when other options are available.
I have used an AutoCompleteBox implementation by Aviad P for many projects and found it easy enough to tweak and suite my needs. I feel the code is well documentated in the blog article itself. Also it uses a textbox & listbox (rather than a combobox) which is in my opinion, a better choice.
I have a following requirement for a very complex UI. (Complex here means there are lot of controls in the form [approximately 100]). I am using MVVM (if my problem requires it to slightly go away from MVVM I am ok with it)
My question is for Editable ComboBox and TextBox. But I would say I like to hear a common algorithm which will fit all controls.
Requirement 1 : The user edits the content and goes to next control, the color of the control/text should become red.
Requirement 2 : When the user comes back to the previously edited control and enters the value which was initially present, the color of the control/text should become back to black.
I know the requirement is tough and I have been breaking my head to design a generic algorithm using which I can store the previous value and call a function to change the color of control.
To just give you all an idea, --> I tried storing 2 properties for every TextBox like Default_Text and Text. But since the number of properties are huge, the memory footprint is very huge. Also maintaining so many properties is very tough.
--> I tried adding a Dictionary to every ViewModel to store what values have got changed. But here the problem I faced was giving unique keys to all the controls in my application, which is not very helpful
--> I had even thought and tried about subclassing controls like TextBox, ComboBox and overriding some methods to suit my requirement, but sadly I failed miserabley when I started adding validations and all.
So here I am stuck with designing a generic WPF property system/algorithm to handle all undo redo functionality, changing styles of controls,etc!!!
It will be really great if you experts can guide me in right direction and also help me in developing such an algorithm/system. A sample illustration will be nice though!!!
I found an answer to the above problem. I used attached behavior for this. More details on this link Function call from XAML from StackOverFlow.
When I databind, I store the initial value of the DataBound variable in the Tag property by using Binding=OneWay. Then I have written a attached behaviour for LostFocus event. Whenever the user enters a control and then goes to other control, it fires LostFocus event and calls my attached behaviour. In this, I check whether the value is equal to the value in Tag. If it is same, I display in black else I display in red.
Attached Behaviour rocks in WPF. I can achieve anything from that cleanly without code cluttering!!!!
Another alternative is to use some "dirty" tracking in your models (or viewmodels) and bind to a properties isdirty (and convert it to a color).
I've just started to follow the EntLib hands on labs for the validation integration with WPF.
http://www.microsoft.com/downloads/details.aspx?FamilyID=4f8cd377-5522-4f45-a024-44a6ca5111ec&displaylang=en
What I have found is that my textbox's databinding is firing fine when my validators pass.
I have a string property with the following validators;
Required validator
StringLengthValidator (with a max length set)
Like I say, the binding fires fine when the validators pass. However, if I then delete the textbox text, for example, (making my textbox again invalid) the binding is not fired and my view model object remains as it was the last time it was valid.
Why is this? Can anyone please show me where I'm going wrong? I would be very grateful.
Thanks.
I have just started reading about the WPF features of VAB.
I came across this information http://msdn.microsoft.com/en-us/library/ff664451(PandP.50).aspx which possibly goes towards answering you question.
The paragraph starts - "If the value of the validated control that carries the Required validation attribute is empty to begin with"
I have a list that the user can filter in several ways. two of which lend themselves to combo boxes and two that need to accept user input. For example, one textbox allows the user to type in any part of a list item's description, and the dialog will only present items whose description contains the text entered.
It is a dialog 'picker' type of window, so space is at a premium. I'd like for the text boxes not to require a traditional label. Instead, when the dialog is first invoked, the label (ie, "Description") is grayed out, centered, and in italics. Maybe a tool tip to further make it obvious to the user what it's for. When the user starts to type, the faux label disappears and the entered text is normal left aligned text.
Does wpf / silverlight have any native support for doing something like this? I guess it could be a combination of styles and eventing. I'd rather not invent any wheels that might be out there (I got the idea specifically from looking at Tortoise' "Show Log" window, but I've seen it before).
Does anyone have any sample code they can share to do this? Or a an alternative idea that also saves space and simplifies the layout?
Cheers,
Berryl
Kevin Moore's InfoTextBox, which is part of his Bag-O-Tricks is the kind of thing I was looking for, almost exactly. This is also the 'watermark' (great name - I would have found this sooner if I had known that) text box from another post.