I am using a very basic HTML Select on a page. This is the code.
<label for="favcity">Which is your favorite city?</label>
<select id="favcity" name="select">
<option value="1">Amsterdam</option>
<option value="2">Buenos Aires</option>
<option value="3">Delhi</option>
</select>
I see that Screen Reader is announcing "Collapsed" when it is collapsed but it is not announcing Expanded. Since this is a native HTML Select dropdown, what is the expected behavior for this dropdown by screen readers. Should they announce Expanded when the dropdown is expanded.
Any way to make the screen reader announced Expanded when the Combobox is expanded?
"Expanded" should be announced to indicate the associated content is available to the user. This is usually done for custom controls (custom droplists, accordions, etc). For the native HTML Select dropdown, however, this is not needed because the droplist content is available without activating the droplist. The user can already use the arrow keys to make a selection when the droplist has focus and is not in the dropdown or "expanded" state. When the dropdown is activated for a Select element, the screen reader will announce "list" or "listbox" to indicate the entire list of options is displayed. A user can select an item in the list using the keyboard whether or not the list is "expanded", so in this case announcing the does not offer the visually impaired user
Related
The look and feel of a v-overflow-btn component is same as a select component. Both serve the same purpose: Selecting items from a list. Is there anything special in the overflow button component? How is it different from the select menu?
v-overflow-btn is a styled version of v-select for use in toolbars, to match https://material.io/archive/guidelines/components/buttons.html#dropdown-buttons-figure-caption-1
Only the segmented variant actually has different behaviour than v-select, where the left section behaves as a normal button and the action taken on click can be preselected from the dropdown. You've probably used a control like this before as MS Word's font color selector.
In an Angular 6 app there is a component whose template is an extension of a simple labelled checkbox input:
<label>
<input type="checkbox" required>
</label>
On Firefox 63.0.2 (mobile version), when the user clicks on the checkbox, for a fraction of a second the below popup appears:
I think this is the well-known Firefox feature of on-focus validation of input elements: the user clicks on the checkbox, the input is first focused and then selected, and in the interval between the two events the popup is displayed. I am confident this is the case as, if the required attribute is removed, the popup does not appear.
Has anyone got any idea how I can stop the popup from appearing? Most of the posts here related to Firefox on-focus validation focus on red border box and other styles which are easier to tackle, but I wonder if there is a way to stop that popup from appearing.
I am using mvc3 and have a dropdownlist (using DropDownListFor helper). I set the selected value to my default value. When the user selects a different item, the selected property of that item is not marked as such, i.e. the default value still has the selected property in the rendered html. Is this normal behaviour? If i use jquery and get the ddl val property it is correctly set to the recently selected item...is this just how dropdownlists work? I've checked IE, FF, Chrome and IE doesnt even have a selected property next to the options...
Edit:
Infact ive just tested it with firefox 9 + . It does change the html source with the selected changing place.
<option selected="selected" value="2">(0002) </option>
<option value="3">(0003) </option>
Ensure you are viewing the source of the current(correct) page, and the correct option list. Control + U in Firefox or Chrome.
As you change the dropdownbox, behind the scenes the selected value will have changed. As you have observed. And so submitting etc will use the new selected value.
So its nothing to worry about anyway :)
I have an "Agree And Conditions file ( rtf document )" and/or a "disclaimer file" to add to a textBox or Text Area that I would like to add to my MVC3 web app.
I don't know how to do that. I have google searched but without any success.
you should avoid text boxes and just show the content in a <div> with a fixed height and vertical scroll.
Then just add a <input type="checkbox"> to force the user say it agreed with the statement.
You can always have that checkbox that could be disabled while the user did not scroll down the div... I don't like it but it appears over and over in several websites.
I am writing a Selenium script in Ruby (As a beginner), wherein I need to change the selection of dropdown menu.
Functionality to automate-
1.Change the drop-down selection from a default value. (This dropdown is in an iframe)
2.Press Save button.
3.Handle a popup that confirms the change.
4.Page reloads with the new selection.
I am able to change the selection on UI by using "select(locator, value)". I have already disabled Javascript to handle the popup.
Issue-
Now, when I press the 'Save' button, the page reloads with the default value that was set.
e.g- Dropdown menu has 4 options-
<option value="920">Apple</option>
<option selected="selected" value="1">Mango</option>
<option value="910">BlackBerry</option>
<option value="921">Orange</option>
Now, when I change the selection to Orange, and then press Save, the page reloads but only with option 2 selected.
Please suggest any solution/reason for this and how can it be avoided? I hope I am clear with the question.
The main reason that might be happening is because you disabled the javascript. The script usually fires the postback event which loads the page with the new selected element. You should enable the javascript and handle pop-up using switch_to_alert function and explicitly click the confirmation button like a user would.