I am using Office UI Fabric Dropdown in React.js. I am testing the application for accessibility issues using Keros for Web.
It is showing this issue for dropdowns:
aria-valid-attr-value: ARIA attributes must conform to valid values
Fix the following: Invalid ARIA attribute value: aria-labelledby="usercountryRegion-label"
Snippet: <div data-is-focusable="true" id="usercountryRegion" tabindex="0" aria-expanded="false" role="listbox" aria-labelledby="usercountryRegion-label" aria-describedby="usercountryRegion-option" aria-activedescendant="usercountryRegion-option" name="country" class="ms-Dropdown root_aecb6435">
I searched for some answer and all I got is "Ensure the value inside each attribute is spelled correctly and corresponds to a valid value.", but I could not find a solution to this.
Search your code for "usercountryRegion-label". The value of aria-labelledby must be the ID of another object. Make sure the ID attribute (not the NAME attribute) is "usercountryRegion-label" of the element you're pointing to.
Good:
<div id="usercountryRegion-label">Africa</div>
Bad:
<div name="usercountryRegion-label">Africa</div>
Related
I was generally testing Accessibility of a website using Lighthouse in Chrome Audits.
I stumbled upon this warning:
aria-* attributes are not valid or misspelled.
this is the failing element:
<a class="issue-title muted-link" href="#" data-bi-name="issue-expander" aria-role="button" aria-expanded="false" aria-controls="issue-26732-body issue-26732-comments issue-26732-reactions issue-26732-reactions-menu" aria-label="Toggle issue">
This is the link in case anyone is interested.
Azure load balancer Feedback Section
To me it seems like the aria-* names and values are valid.
aria-role = "button" seems to be correct.
aria-expanded = "false" seems to be correct.
aria-label seems to be correct
aria-controls = "..." seems to contain a list of ids, all these ids are present in the DOM ( though i am not sure, if it the accessibility check should fail if they are not present in the DOM and added dynamically )
What can be the reason for this to fail ?
The correct spelling is not aria-role but role. See also the ARIA Role Attribute in HTML5.2.
aria-expanded, aria-controls and aria-label are correct.
I admit that the error message could have been clearer, e.g. by pointing out that aria-role is not valid.
Am fairly new to angular and I have an ui-select which fetches the data from remote service upon typing anything shows the related items in dropdown. It is a single select dropdown.
The problem is the input field requires two clicks to open. On first click the field gets focused and upon second click the cursor is present for typing.
Not able to get what is causing the issue.
<ui-select ng-model="page.model.form.relatedItem" theme="bootstrap">
<ui-select-match placeholder="Search ...">
<span ng-if="$select.selected.name" nbind="$select.selected.name"></span>
<span ng-if="!$select.selected.name" ng-bind="page.model.form.relatedItem.name"></span>
</ui-select-match>
<ui-select-choices refresh="page.getRelatedItemList($select.search)" refresh-delay="0" group-by="'group'" repeat="item in page.itemArray | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Thanks for any help.
This is a known issue with the ui-select library for angularJs.
The problem is related to ngAnimate and the ui-select component. If ngAnimate is removed from the app, the problem will disappear. There are also a couple of workarounds if removing ngAnimate is not an option for you.
One workaround is to add a prevent-animations directive to the ui-select elements. Simplified code example follows:
<ui-select prevent-animations>
<ui-select-match prevent-animations>{{$item.title}}</ui-select-match>
<ui-select-choices prevent-animations>
...
</ui-select-choices>
Another suggested workaround in is to use a delay to add focus to the search field after component activation. Although the github issue referenced has been marked as closed, there are other open issues citing the same problem, and unfortunately this project is is now marked as archived, so don't wait for any fixes to appear there!
I am trying to use Angular2 to build a WiX component.
I added the WiX custom attribute wix-options to a span, using Angular's syntax to allow binding (note the {{'email' | translate}}):
<span wix-ctrl="Input" attr.wix-options="{placeholder: {{'email' | translate}}, size: 'big'}"></span>
When I single-step the JavaScript code in Chrome, the attribute does not appear on the element:
The wix-ctrl attribute, which was not prefixed with attr. to allow binding, continues to appear.
How can I make Angular2 preserve the wix-options attribute in the DOM? The WiX UI library searches for the elements tagged with wix-ctrl and then reads the wix-options to get more information.
You may want to try doing that the directive way:
<span wix-ctrl="Input" [attr.wix-options]="{placeholder: {{'email' | translate}}, size: 'big'}"></span>
Otherwise you'd have to do it something like:
<span wix-ctrl="Input" attr.wix-options="{{ {placeholder: {{'email' | translate}}, size: 'big'} }}"></span>
Since you are passing in an object, Angular isn't aware that it should parse the whole thing or not. You're probably getting an error in Dev Tools, too.
I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});