I'm building a filter for a site that needs to work with a screen reader and i'm currently facing this problem.
The filter is built in a modal that houses a set of checkboxes and one button that displays how many hits the user has got after selecting each checkbox. The text in the button is dynamic and changes depending on the number of hits there is after a checkbox has been selected.
The text in the button says "Show X hits". I have added a role="alert" to the button so that the screen reader pick ups imidiatly if the value/text changes in the button.
My question is, is it possible for the screen reader to read the text "X hits" when the button is triggerd by the role="alert" and the text "Show X hits" when the user navigtes down to the button?
Example of my button:
<button type="button" role="alert" class="btn btn-primary" v-on:click="search()">
<span class="sr-only">{{amount}} hits.</span>
<span>Show {{amount}} hits.</span>
</button>
UPDATE
Managed to get a working solution using this:
<button type="button" class="btn btn-primary" v-on:click="search()">
<span aria-hidden="true">Show {{amount}} hits.</span>
<div class="sr-only">
<span>Show</span>
<span role="alert">{{amount}} hits</span>
</div>
</button>
You should not put a live region inside a button. The button role has presentational children.
That means that, as per ARIA standard, the role of any child of the button should be ignored. This includes role="alert".
Maybe it works in your browser/screen reader combination, but I wouldn’t rely on that.
I don’t see a reason why the text would be inside the button anyway, since your are hiding it.
So I’d recommend this:
<button type="button" class="btn btn-primary" v-on:click="search()">
Show {{amount}} hits.
</button>
<div class="sr-only" role="alert">{{amount}} hits</div>
Related
So basically, I have a vue web app and created a container with multiple bootstrap cards. The cards have a button, which collapses a form I've made for guests to apply. However, when I press the button of a card, it collapses the apply form of all cards at once. To fix that, I have to give each individual card a specific id which matches the data-bs-target and aria-controls of the button. So far, so good.
I've made a variable card_id and inserted it into the attribute values with v-bind, but it's not working. The reason is, that the attribute data-bs-target needs a hashtag before the actual variable name, but I can't figure out a way to do that.
Code sample:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button>
<div class="collapse" :id="card_id">
<div class="card card-body">
<GuestForm></GuestForm>
</div>
</div>
I obviously can't just put a hashtag in front of the variable, so what is my next best solution for this?
Thank you in advance.
You could use the string template with backticks `` like:
<button :data-bs-target="`#${card_id}`"
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
I have a table created in meteor that is expandable. The initial button that is pressed to expand the table has a plus icon on it. Once the table is expanded I wan't to be able to make the icon on the button change to a minus sign. Basically I want the icon to toggle between a plus and minus sign depending on if the table is expanded or collapsed.
My template for the button:
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
The template is callled in the html and works as expected.
My most recent attemp has been trying to use an event for getting the icon to switch from the plus sign to the minus sign:
Template.expandButton.events({
'click #expand'(event) {
event.toggleClass('glyphicon-plus glyphicon-minus');
}
})
I have also tried a couple other ways, but nothing has worked. I would like to know if this is close to being a way of doing this or if this is completely wrong. And if it is the wrong way to do this, how should I go about doing it?
Thanks for any help. It is appreciated.
In Meteor you have to bind the events on right places. you want to bind the click event to button.
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle" id="expandBtn">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
and here is your event
Template.expandButton.events({
'click #expandBtn'(event, temp) {
temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus');
}
})
Please also note that in meteor events, the first argument is event and second is template so using temp.$ is more efficient then parsing the complete dom i.e $(#id)
I have a table in which column elements have text in them. I click a button and all the text elements become input elements. Based on a condition, there is a button displayed next to the input field.
What i have to do is display a button with an icon in the same column, next to the input field. I have done this, however the result is not as expected.
This is what I am getting.
This is what I am looking for.
<td id="id119ae">
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div>
<div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0">
<button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" name="editContainer:edit" id="edit1923">
</div>
</form>
This is the code that I currently have that gives me the first result. The layout is causing some problems. I need better layout suggestions or ways to fix this.
Use inputgroup classes to show the buttons adjacent to input type
http://getbootstrap.com/components/#input-groups-buttons
There is no unique solution for your request.
It depends on how you are designing? Are you considering the responsiveness? Are you using fixed width? or even are you using a library or framework like Bootstrap?
By the way, I think this one works for you:
use the percentage of width for your input and button.
For example:
<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923">
What I did was set min-width for the table. The percentage did not help me since it was dynamic. For some reason it was not taking that into account when the new element was added and the button always came in the wrong place.
I set the min-width for that column to 250 px . I tried to set it to say 30% but that did not work either.
solution: use min-width in the header elements. that sets the entire table to follow the least width.
Hello I am trying to use angular-strap to put together a multiselect drop down menu. For testing, I am just putting in some dummy data like so. THe issue is that the check mark on selected items displays on almost new line. I am not sure how to go about fixing it.
{value:'BLAH.09', label:'BLAH.09 '}
Couple of things to keep in mind:
1. The extra spaces in label are just a part of the troubleshooting process, it still doesn't work if they are there.
2. The reason the box is so wide in the screenshot is because I manually adjusted the width in css to see if it makes a difference, it doesn't..
Button looks like this:
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" placeholder="Category Filter" data-multiple="1" data-animation="am-flip-x" ng-options="val.value for val in display_data['fields']" bs-select> Action <span class="caret"></span></button>
Was missing an include to the main.min.css file.