Toggle not working with screenreader - javascript

I have the following code:
if (screen.width > 769) {
$(".searchIcon").on("click", function () {
$(".searchForm").toggle("slow");
$(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
$("#SearchBox").focus();
});
}
And my markup:
<div class="searchContainer navbar-right hidden-xs hidden-sm">
<button class="searchIcon" aria-label="Search" type="button">
<i class="icon-search" aria-hidden="true"></i>
</button>
</div>
<div class="searchContainer hidden-md hidden-lg">
<i class="icon-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
<label class="sr-only" for="#SearchBox">Search</label>
<input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>
When the button is clicked, the .searchForm container slowly toggles into view to show the search box. This works fine on desktop and mobile devices, but when navigating using a screen reader (using the built in accessibility tools on the iPad), selecting the button to click it has no effect. What am I missing here?

It seems as though I found my answer here:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
I changed my JS to this:
if (screen.width > 769) {
$(".searchIcon").on("click", function(e) {
e.preventDefault();
var pressed = e.target.getAttribute("aria-pressed") == "true";
//change the aria-pressed value as the button is toggled:
e.target.setAttribute("aria-pressed", pressed ? "false" : "true");
$(".searchForm").toggle("slow");
$(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
$("#SearchBox").focus();
});
}
and my markup to this:
<div class="searchContainer navbar-right hidden-xs hidden-sm">
<button class="searchIcon" aria-label="Search" type="button" aria-pressed="false">
<i class="icon-cmich-search" aria-hidden="true"></i>
</button>
</div>
<div class="searchContainer hidden-md hidden-lg">
<i class="icon-cmich-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
<label class="sr-only" for="#SearchBox">Search</label>
<input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>
I've only been using aria for the last 3 months or so, and there is still a huge learning curve here for me, but this produced the result I was expecting. The search box now slowly toggles into place just as it did with the desktop/mobile device.

Related

Angular 6 bootstrap multiselect item click firing twice

I have below stackblitz
When I move click event form li to input change, it fired once, but
event.stopPropagation();
does not work.
https://stackblitz.com/edit/bootstrap-pvjfbv?file=index.html
Please help I spent alot of time, but could not manage to make it work
Removing the 'label' element surrounding the 'input' tag fixes the issue.
<div class="flx" style="align-items: flex-start">
<div style="flex: 1;">
<div class="dropdown_23 drp-custom-select-container modal-select-custom">
<div class="btn-group keepopen bootstrap-select form-control input-sm ddlcustomselect" data="Select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button">
<span #spnSelectedText class="filter-option pull-left" style="width: calc(100% - 20px);overflow: hidden;margin-right: 20px;">Select</span>
<span class="bs-caret">
<span class="caret"></span>
</span>
</button>
<div class="dropdown-menu open" role="combobox" style="max-height: 482px; overflow: hidden;">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 470px; overflow-y: auto;">
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<input type="checkbox"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Refer this
you have to emit #output
in template file - apply change event on input check box instead of li
<li *ngFor="let item of data_source" >
<label class="checkboxcontainer checkbox-inline">
<input type="checkbox" (change)="SelectElementCliked($event, item)"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</label>
</li>
In ts file
SelectElementCliked(event: any, item: any) {
if ( event.target.checked ) {
console.log(item);
this.onItemSelected.emit(item);
}
}
changing the < li > content to as follows fixes the issue
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<label class="checkboxcontainer checkbox-inline">
<input [id]="item.Value" [name]="item.Value" type="checkbox" />
<span class="checkmark"></span>
<label (click)="$event.stopPropagation()" [for]="item.Value" class="text">{{item.Text}}</label>
</label>
</li>
on clicking the label 2 events are propagated to the parent component , hence emiting 2 events. you may block the click of the label element using stopproagation

Dropdown submenu wont stay open

I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});

Disable toggle inheritance from parent tag

Hi i was wondering if it is possible to override or disable inheritance from a parent tag.
what i want to do is to be able to make use if the "input-group" class but having a particular tag not inheriting the toggle function from the parent a-tag.
the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall theme.
Here is some code:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From date</lable>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<!-- COMMENT: i want the span tag shown under this comment NOT to inherit the a-tag's toggle function, it being inside it and all -->
<span type="button" id="dateRemove" class="input-group-addon" ng-click="clearToDate()"><i class="glyphicon glyphicon-remove"></i></span>
<input type="text" class="form-control" data-ng-model="data1.dateDropDownInput1" data-date-time-input="YYYY-MM-DD HH:mm" disabled="disabled"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="data1.dateDropDownInput1" data-datetimepicker-config="{ dropdownSelector: '#dropdown1' }" />
</ul>
</div>
</div>
So is this at all possible?

Why is this div completely invisible to jQuery?

I have this div (the topmost one in the markup below) in my HTML code that I'm trying to find via jQuery .children(). For some reason jQuery just can't find it.
This can be tested by running this:
$($('<p class="info-item"><span class="info-item-key">Gender:</span><span class="info-item-value">Male</span><span class="info-item-edit-button"> <a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a></span><div class="form-inline info-item-edit-input"><div class="form-group"><div class="input-group"><input type="text" class="form-control" value="" /><div class="input-group-addon"><a class="black-link info-item-edit-save-link"><i class="fa fa-check"></i></a></div></div></div></div></p>')[0]).children()
Here is the same markup contained in that code, but better formatted:
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>
For context, I'm trying to use jQuery to show the edit form when the edit button is clicked.
Is there any reason why this div seems to be invisible to jQuery? .contents() can't find it either. (Try it.)
If it helps, that div is initially hidden with display: none in CSS, but even trying it in a JS console session attached to a document that doesn't have that CSS results in the div not being found either. (Try it in the StackOverflow JS console, or any other site, if you want.)
That's because the markup is invalid. div can't be child of a p element. p element can only have phrasing content.
Consider this simple example:
$('<p><div></div></p>');
This is how my Chromium browser renders the above markup:
<p></p><div></div><p></p>
The following fiddle shows you how to access the div you are looking for. I added some text within the div so you can see the alert.
https://jsfiddle.net/xw9Lteww/1/
JS
$(document).ready( function() {
alert($(".form-inline").text());
});
HTML
<p class="info-item">
<span class="info-item-key">Gender:</span>
<span class="info-item-value">Male</span>
<span class="info-item-edit-button">
<a class="black-link" href="#"><i class="fa fa-pencil-square"></i></a>
</span>
<div class="form-inline info-item-edit-input">
hey
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" value="" />
<div class="input-group-addon">
<a class="black-link info-item-edit-save-link">
<i class="fa fa-check"></i>
</a>
</div>
</div>
</div>
</div>
</p>

Search bar in navbar doesn't look the same in Google Chrome and Firefox

I have the following code for my search bar in the navbar. It looks well in Firefox but on Google Chrome the search bar stretches and goes below the navigation. How do I fix this?
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
SIG Inventory System
<div class="navbar-header">
<button type='button' class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav ">
<li class = "active">Home</li>
<li>About</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control input-sm " placeholder="Search..." name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
<!--<form class="nav navbar-form navbar-right" role="search">
<div class="form-group ">
<input class="form-control input-sm " placeholder="Search..." type="text">
</div>
<button type="submit" class="btn btn-danger btn-sm">
<span class="fa fa-search"></span>
</button>
</form>-->
</div>
</div>
</div>
</div>
I had the same problem in bootstrap 3, with very similar markup. Try adding this to your override CSS, it will fix the end issue but doesn't solve the actual problem, unfortunately. I haven't gotten that far, yet.
nav .navbar-form {max-width: 300px}
Edit
Apparently this is a little more elegant of a fix.
.navbar-form .input-group-btn,
.navbar-form .input-group-addon {
width: auto;
}
However, I settled on:
.navbar-form .input-group-btn,
.navbar-form input { width: auto; }
See https://github.com/twbs/bootstrap/issues/9950

Categories