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.
Related
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>
I don't know if the problem is related to Angular or I'm making a mistake.
I have an <article id="about">, a link <a href="#about"> and I'm trying to style the targeted element with
:target{
border: solid 1px red;
}
when I click the link the article should have a red border, shouldn't it?. When I click the link the URL off course changes from /company to /company#about but nothing happens, I also checked in the console with JQuery $(':target') and it returns null.
I thought that maybe it's Angular related, where routing mechanism interferes with some default behavior. I'm using $locationProvider.html5Mode(true), Angular 1.1.4 and Chrome26.
EDIT: Finally got a non-working example here , it works until I inject $location in app.run().
This is due to a browser bug: https://bugs.webkit.org/show_bug.cgi?id=83490
See also the last section at http://css-tricks.com/on-target/
Just a guess but:
I think the click event may be returning "false".
That is to say, some code runs, and the default link clicking behaviour is over-ridden.
Try entering the page url, with the hash at the end, into an empty tab. If your :target css works in that case, you'll know it's a javascript thing.
Perhaps the framework adds a class, or some other identifier, which you could easily style? Or maybe if you inspect the DOM, a reference to it is stored in some object, which you could style with jQuery?
If you put target="_self" in the a tag it will solve the issue with the angular routing as long as HTML5 mode is enabled.
I'm very new to Seam and am just getting used to the different components available. I'm wondering which one I should use for this situation.
The answer to this question explains the difference between <h:outputLink> and <h:commandLink>, that <h:outputLink> produces just a basic HTML link tag with GET request and <h:commandLink> submits a POST via a click event.
I just want to attach a simple jQuery click event to a link. I don't want the link to redirect to anywhere or submit a form. I basically want the equivalent of href="#" (I understand that commandLink generates href="#" but it seems heavy-handed for a simple link with no form submission). But <h:outputLink> implicitly adds an href value unless I put value="#" (which seems hacky).
What component do I want to use here? I seem to be missing some very basic element.
(First: <h:outputLink> and <h:commandLink> are standard JSF components, not part of the Seam framework.) In this case, you can just use the standard HTML tag <a>, because you appear not to be using anything special to JSF.
Hopefully someone can help me, either by telling me it cant be done or pointing me in the right direction.
I am trying to use Watir Ruby written tests to check a CSS element is being applied to my page when a check box is checked.
I can check the checkbox attribute fine and see that it is checked, but a differnt test i have to perform is to check that the image has been highlighted after the checking the checkbox.
Currently i have not been able to find anything useful around after a couple of hours of searching. Has anyone come across a problem liek this you ahve had to overcome, and if so how did you go about it.
Thanks in advance
If you're using vanilla Watir (meaning IE browser on Windows) then it is also possible to get style of the element from win32ole object:
irb(main):001:0> require "watir"
=> true
irb(main):002:0> b = Watir::Browser.new
=> #<Watir::IE:0x4bce118 url="about:blank" title="">
irb(main):003:0> b.goto "google.com"
=> 2.298132
irb(main):004:0> i = b.image(:alt => "Google")
=> #<Watir::Image:0x433fa28 located=false how={:alt=>"Google"} what=nil>
irb(main):005:0> i.style
=> #<WIN32OLE:0x431ca90>
irb(main):008:0> i.style.paddingTop
=> "26px"
This #style method also returns computed style, e.g. styles from CSS and not just from style tag.
You can check out all the possible style ole methods from msdn at http://msdn.microsoft.com/en-us/library/ms535870(v=vs.85).aspx under styles properties.
How do you apply the CSS element to image after checking the checkbox? If you add the class attribute for highlighting, I guess checking class attribute is the simplest way.
for example
browser.image.class_name =~ /foobar/
If using style attribute, I think you might need to check HTML itself, like
browser.image.html =~ /style=\"?foobar\"?/
I am confused. I need to name my iframe in order to use the name as the target in my menu's hypelinks. According to my Visual Web Developer Express the name attribute is considered outdated and a new construct is required. My question is what attrbute code do I utilize to name my iframe. Thank you
According to my Visual Web Developer Express the name attribute is considered outdated and a new construct is required.
Then Visual Web Developer Express is wrong. For the purposes of anchors and scripting/styling hooks, 'name' is to be replaced by 'id', but for the purpose of identifying link targets (such as frames), it is not. See http://www.w3.org/TR/REC-html40/present/frames.html#adef-target , http://www.w3.org/TR/REC-html40/present/frames.html#adef-name-IFRAME .
This usage is not deprecated in HTML terms, but it's a bit of a code smell. Targeting a link to an iframe is generally considered a bad thing as it breaks many normal navigational expectations. There are uses for it, but be wary.
Ignore the warning. Believe the DOCTYPE specification. The name attribute is just fine. In fact, HTTP posts via embedded HTML forms pass data using the name attribute as the key.
<input id="txtName" name="name" />
To get at the textbox value in your Page_Load, you would use Request.Form("name"), and not Request.Form("txtName")
When in doubt about attributes and such, run your rendered HTML through the W3 validator to validate it against the DOCTYPE.
Typically, you would use the "id" attribute as a replacement. This is not always "optimal". I have noticed that this does not always work for named anchors, for instance.