Is it possible for NVDA to read only the dropdown select value when being loaded with aria live?
<div aria-live="polite">
<select>
<option>A</option>
<option selected>B</option>
<option>C</option>
<option></option>
</select>
</div>
Right now on firefox, it will read A,B,C with no notion of which one is selected. When having plenty of options this becomes an issue since all of the options are being read. Is there a way to mark the select to just read the selected value? "B"
Without aria live the dropdown select is read correctly, just reads "B". Is there a way to achieve this while inside aria live?
You should use something like the a11yfy live announcer to announce that the example has been updated and then let the user navigate to find the details of the example.
You can download it from Bower. Documentation is here https://github.com/dylanb/a11yfy/blob/master/announce.md#jquerya11yfyassertiveannounce
The code, in case you want to implement yourself is here https://github.com/dylanb/a11yfy/blob/master/a11yfy/jquery.a11yfy.core.js#L29
Related
EDIT 2:
Here is exactly what I need:
Change dropdown option with jQuery/Javascript on link click
Whatever, I could not make this to work with the HTA! Any help is much appreciated!
Hello all and thanks in advance for your answers!
I've been working in a self project, and accomplished at least 75% of what I want. Whatever, those two questions on the title are the things that are making me stuck!
Here is one image of how my program looks right now:
Part of my "program"
Ok, as you can see, it has LOTS of drop down menus, and that's ok.
But for ease of use and for questions of aesthetics, I'd like to migrate one of those drop down to the menu on the left.
This select has 5 options, and according to what I chose, it will change something inside a .txt file.
The problem is that I simply CAN'T make this select menu work on the left menu, whatever, as a "select", it work's fine.
Here's an example of the code that's working:
<select size="1" name="OptionChooser43" inputbox id = "searchInput43">
<option value="Equals = 2">Adicionar Expression</option>
<option value="Equals = 3">+ 1 Expression</option>
<option value="Equals = 4">+ 2 Expressions</option>
<option value="Equals = 5">+ 3 Expressions</option>
<option value="Equals = 6">+ 4 Expressions</option>
So, this select works just fine, and changes a part of my .txt with "Equals = &" accordingly.
But if I try to embed it on the left menu, I cant manage it to work.
Here's the code: One of one of the working functions, and another of the non working "select":
Upload
<ul>
<li><a onclick="LoadPreset_1" style="cursor:pointer;">Upload Preset 1</a></li>
<li><a onclick="LoadPreset_2" style="cursor:pointer;">Upload Preset 2</a></li>
</ul>
</li>
*******NON WORKING********
<li><a id="" option value="Equals = 2" style="cursor:pointer;"></option></li>
<li><a id="" option value="Equals = 3" style="cursor:pointer;">+ 1 Expression</option></li></a></div>
I've tried to: Create a new sub for each of the items of the menu, but as soon as I click it, it executes changes to the txt, without execute the changes that I've done with my drop menus.
I tried to use it as a select, but it doesn't answer my commands.
I googled it every way I could think of, no success.
And I even did not want to ask, because it maybe really simple and could make you angry! haha
Second:
I would like to store everything I do on the HTA, in a way that when I open it again, it would be the way I left.
Each drop menu has from 127 to 256 different options, and it would be really nice to have it stored once I open the HTA again!
I also, would like to be able to load the preset-info if I wish.
I've searched how to store data on xml, database... But again, was not successful.
I could go really far alone, but this time I hope you can help me!
Thanks in advance!
Edit: Even after cutting off what I did not need, I still ended up with almost 700 lines, so, here is the attached hta.
HTA File
I have been using Angular Material in one of my project. Suddenly I realized the need for having a select all option on md-select. I think I will pull a git request for the same.
However, currently I am looking for a similar drop down structure with checkboxes (like md-select multiple) but also a select all option.
I am aware that I can push a dummy empty entry into md-select option array and manipulate reverse way on its selection. But it would require a lot of code change in my current structure and would also not be a elegant thing to do.
I tried looking for it in bootstrap and jQuery-UI, but could not find one yet. Is there any such control known to anyone. Any redirection will be helpful.
You can do that easily inside the HTML. It requires only one line of code, or two lines, if you want a "select none" option as well. For example
<md-input-container>
<label>Users</label>
<md-select ng-model="selectedUser" multiple=""
ng-model-options="{trackBy: '$value.id'}">
<md-optgroup label="Users">
<md-option ng-repeat="user in users"
ng-value="user">{{ user.name }}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="selectedUser=users">all</button>
<button ng-click="selectedUser=[]">none</button>
Example in Plunker.
Edit: I updated the below Plunker to show the "all" button inside the select box next to the "Users" optgroup title. The relevant change:
<md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}">
<button ng-click="doSelectedUser()" style="float:right">all</button>
<md-optgroup label="Users">
I am trying to select multiple values inside a drop down using check boxes, I confused how to attain without changing TLD file. ie each option for the select will have the check box
sample code which iI work is below
<form:select path="brandIds" id="brandDropdownSelectId" tabindex="31" multiple="true" size="4" >
<option value="0">Select Brand</option>
<form:options items="${brandList}" itemValue="brandId"
itemLabel="brandName" checkbox="true"/>
</form:select>
You can use external component like Twitter Bootstrap Multi-select
You can never use Checkbox inside a Select tag.
But, to solve this issue, we make use of CSS+Javascript to render the effect.
You define a empty select tag with a javascript function to alter the visibility of the checkboxes on click, and CSS plays the role of portraying the rendering in single effect.
This might help you:
Adding checkboxes inside a Select Tag
I'm currently having trouble calling a Select_List that does not have a name/ID (as the title states).
The HTML for the Select List is:
<select dojoattachpoint="userSelector" size="15" multiple="">
<option value="_W2kn2sdAEeSmeMQKjIY8Ug"></option>
<option value="_gkeqUBUqEeG7h6M2lwbcyg"></option>
</select>
What I need to do is select one option in the select list and then click a button, but I can't select the option if I don't know how to point at the list itself.
Note: This is done in Firefox if it matters.
Because "dojoattachpoint" is not a valid attribute for a Select Element per the html5 spec, you can't use it directly. You can access it with css, though:
el = browser.select(css: "[dojoattachpoint='userSelector']")
You could also look into making the site's code html5 compliant, since I think dojo supports data tags: 'data-dojoattachpoint' or the like. Then your selector could be: el = browser.select(data_dojoattachpoint: 'userSelector')
I'm new to Selenium and having a difficult time selecting options from a drop down list (trying to select the second option).
Here is the HTML that I'm working with:
<div id="applicationReasonTypeIDContainer" class="appfield">
<label id="applicationReasonTypeIDLabel" for="applicationReasonTypeID">Application Reason</label>
<select name="appstart_international1:applicationReasonTypeID" id="applicationReasonTypeID" class="AppStart dropdown required" title="Application reason">
<option value="0"> </option>
<option value="1">New Application</option>
<option value="2">Additional location</option>
<option value="3">Owner change</option>
I'm using XPath checker to find the XPath, and it's giving me this but it doesn't work when I try and click or select command
id('applicationReasonTypeID_listbox')/x:li[2]
What should the proper Target be for finding an option like this using XPath?
Thanks Kindly!
If you know the text that will be in the field this is how I do it:
new Select(driver.findElement(By.id("applicationReasonTypeID"))).selectByVisibleText("New Application");
Hope that might help.
edit to add correct id and text from code provided.
What's wrong with either of the following?
new SelectElement(driver.FindElement(By.Id("CustomerDropDown"))).SelectByText("Nationwide");
new SelectElement(driver.FindElement(By.Id("CustomerDropDown"))).SelectByIndex(1);
I actually figured out the problem - it's an issue with Kendo UI not supporting drop-downs properly. Basically the workaround is the click the drop-down arrow, then use sendKeys and point to the same Target as the drop-down with the value being whatever item you want from the list, then clicking the drop-down again. This worked for me, hopefully it helps somebody else!