How would you select an a href element with specific url?
This is my element:
<a href="/test/issues/new" class="btn btn-primary float-right" role="button" data-hotkey="c" data-skip-pjax="">
New issue
</a>
I tried I.click('New issue') and I.click("div[href$='/test/issues/new']") but it fails with Node is either not visible or not an HTMLElement
You try to click div element, "div[href$='/test/issues/new']", but in issue speak about a element.
Change it on "a[href$='/test/issues/new']"
Related
The html structure looks like this
<div>
<a href="#"> some info
<div role="button" tabindex ="0"
aria-label = "close"
/>
</a>
</div>
When using screen reader the a tag get read "some info close" and then on focus on button it again read "close". All I want a tag to read is "some info" and button to read "close". What change should I make? I cannot change the HTML structure.
jsfiddle https://jsfiddle.net/5c1oywzg/1/
You can't have a focusable element inside another focusable element.
What change should I make? I cannot change the HTML structure.
Being given an HTML code, it's difficult to make a change without changing the code.
you're using a a[href] link for what seems to be a button
you have to separate the focusable elements
If you could have changed the HTML structure, this would be a better code:
<div>
<button> some info</button>
<button aria-label="close" />
</div>
Unfortunately, we can't change anything if you can't change the HTML structure as your structure is by nature malformed.
We can still use some hacks (using javascript for instance) like adding role=description and tabindex=-1 to the a[href] element and replace "some info" with an html button, but that would be against the second rule of ARIA :
Do not change native semantics, unless you really have to.
1.) The fiddle is different from the code you posted above. For my answer I used the fiddle code (and added a missing " for the href attribute...)
2.) The button is part of the link, so its content is read as part of the link. Do you really want the (same) link to work both when the button is clicked AND when "some info" is clicked. Looks like "some info" is supposed to be a label/comment for the link?
depending on what you want, I would either close the a tag before the button or only wrap the button into the a tag, labeling it wth the full text and hiding the text before that with aria-hidden = "true":
<div>
<a href="#">
some info
</a>
<button aria-label = "close">close</button>
</div>
OR
<div>
<span aria-hidden="true">some info</span>
<a href="#">
<button aria-label = "some info, close">close</button>
</a>
</div>
If you can only add attributes and not change the HTML structure at all you could do this:
<div>
<a href="#" tabindex="-1">
<div tabindex="0">some info</div>
<button>
close
</button>
</a>
</div>
Setting tabindex to -1 removes an element from the tab order while setting it to 0 adds an item. Generally on other values should be used. More info here.
Removing the a tag from the tab order and adding the div in instead will make the keyboard skip over the a tag and focus on both the div and button tags separately.
🎻 Fiddle
This question already has answers here:
How do I make links with no href attribute accessible?
(2 answers)
Closed 5 years ago.
I have this link that looks more like a button - but whenever I am testing my tab navigation via keyboard - this link is never it and the user can't use it.
How can I make it ADA compliant and use aria to make it accessible via keyboard?
<div class="styles">
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
You have to add the tabindex attribute.
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>
The value 0 gives it a natural tab index based on the order of the DOM elements.
Here is some additional documentation.
Anchor elements are natively focusable. The reason that your link does not receive focus is because it doesn't have an href attribute.
Another way of approaching this problem would be to add a non-existent URL fragment identifier to the href attribute, like this:
<div class="styles">
<a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
Everthing seems to work fine, but when I validate my xml I get an error The element label must not appear as a descendant of the a element. Something similar was already asked here, but that did squat for me. If I put the label out of a then only the icon next to the label works as a link, but I want the whole thing.
My current code
<a href="#">
<span class="glyphicon glyphicon-wrench"></span>
<label class="iconLabel">Settings</label>
</a>
I've tried puting spanand label inside div, but nothing changed
Change label for span, but keep this in the same place, keeping the class "iconLabel", this should work.
Code:
<a href="#">
<span class="glyphicon glyphicon-wrench"></span>
<span class="iconLabel">Settings</span>
</a>
I am trying to make a lightbox appear when a button is pushed. Problem is, when the anchor is around the button (like in the code below), it automatically redirects to "mywebsite.com/myimage.jpg". However when the anchor is inside, only clicking the text will pop the lightbox. Here is the code:
<a href="myimage.jpg" rel="lightbox" title="Title!" style="color:white" class="lightbox">
<div>
<button class="btn btn-lg btn-block" style="background:red">Button Text!</button>
</div>
</a>
Anchors and buttons have two different intended purposes, though Bootstrap allows you to style either as a button. Pick one. Using both is just bad practice.
<a href="myimage.jpg" rel="lightbox" title="Title!"
class="lightbox btn btn-danger btn-lg btn-block my-button-class">Button Text!</a>
The .btn-danger variant gets you the white-on-red scheme you seem to be going for. See http://getbootstrap.com/css/#buttons-options.
If this doesn't solve your problem you'll need to be more clear about which lightbox plugin you're using and what properties it's looking for.
I've tried the following:
<a href="#" class='aclass'>Fires an event</a> //pops back up to page, not nice
<a href="" class='aclass'>Fires an event</a> //refreshes the page, not nice
<a type="button" class='aclass'>Fires an event</a> //does nothing but the event, good!
Just wanted to know if it is semantically acceptable to add a type attribute with value button to anchor tag as I don't recall ever doing it but perchance it happened now and actually worked.
What you want is not a link but a button. So you should be using
<button type="button" class="aclass">Fires an event</button>
Styling it is just a matter of CSS.
No, the type attribute of an anchor must be the MIME-type of the target:
The MIME type of the destination of the hyperlink.
A string that
identifies a valid MIME media type as defined in [RFC 2046].
As button is not a valid MIME-type, your markup is specifically invalid.
If you want an anchor to look like a button, try <a class="button aclass">, and style it properly (yes you can use multiple space-separated classes on an element). If you want an actual button, just use <button>.