I am trying to implement AMP Tab Panel with AMP Selector.
Everything working fine in localhost.
But it does not work in server properly. That means it work sometimes but not all the time in server.
I tried adding #development=1 to url and AMP.printState() in console. it showing that state are changing, but tab are not changing.
(sorry for my bad english)
<button on="tap:AMP.setState({selectedTab: 'a'})" >Internet</button>
<button on="tap:AMP.setState({selectedTab: 'b'})" >Voice</button>
<amp-selector on="select:AMP.setState({selectedTab: event.targetOption})" [selected]="selectedTab" role="tablist" layout="container" class="ampTabContainer">
<div role="tab" class="tabButton" selected option="a" hidden>Internet</div>
<div role="tabpanel" class="tabContent">Internet content</div>
<div role="tab" class="tabButton" option="b" hidden>Voice</div>
<div role="tabpanel" class="tabContent">Voice content</div>
</amp-selector>
Related
I am working on accessibility testing for an Angular project. I have some code for a modal that is as below
<div class="modal fade" bsModal #cancelConfirmModal="bs-modal" tabindex="-1" role="dialog"
attr.aria-label="Cancel Modal" aria-hidden="true">
<div class="md-dialog modal-md">
<!-- Modal content-->
<div class="md-content">
<div class="md-header">
<div class="md-title pull-left">
<h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4>
</div>
<button type="button" class="close-popup" (click)="hideCancelModal()">
<img src="{{ pathImg }}/close.png" alt="Close Icon"
(mouseover)="changeCloseIconOnHover('close-popup3')"
(mouseout)="changeCloseIcon('close-popup3')" id="close-popup3">
<label class="sr-only">Close</label>
</button>
</div>
<div tabindex=0 class="md-body">
{{ cancelMessageBody }}
</div>
<div class="md-footer">
<button type="reset pull-right" class="ts-btn ts-btn-primary no-btm-margin" (click)="revert()">Yes</button>
<button type="pull-right" (click)="hideCancelModal()"
class="ts-btn ts-btn-tertiary margin-left10 no-btm-margin">Cancel</button>
</div>
</div>
</div>
</div>
When I tab over to <h4 tabindex=0 class="headerBottomMarginNone"> Cancel</h4> it reads Cancel heading level 4 clickable. There is no click event on the parent or even its parent. h4 is made tab reachable as per the QA's preference. How do I stop JAWS from announcing clickable??
Short Answer
Remove the tabindex.
Long Answer
Headings should not have a tabindex (other than maybe a tabindex="-1", covered below).
Anything with a tabindex is considered to be interactive and it is expected that you have supplied the relevant handlers for focus, click, keyboard keys etc.
Your QA is incorrect on this and is making the software harder to use.
The only time it is appropriate to use a tabindex on a heading is if you need to programatically focus it (for example on an AJAX application where you load a new page in it is a good practice to focus the heading level 1 on the page to let screen reader users know the new page has loaded in.) At this point the only tabindex that is appropriate is tabindex="-1" so that it can only be focused programatically and not via the tab key.
Your QA may think that screen reader users need to be able to focus the headings, this is not the case! They use shortcut keys within their screen reader to access headings on the page.
Also remove it from <div tabindex=0 class="md-body"> as that is also not interactive.
Finally it is likely you do not need tabindex="-1" on the modal itself as when you open the modal you should focus either the first interactive element or the close button (which in your case appears to be the cancel button anyway.), however there may be functionality in your software that I am not aware of so that is just a point to consider.
So basically what I'm trying to achieve is getting the content of a bootstrap modal from another html file instead of placing the modal content on the index html file (because I will need to use it multiple times).
I've tried searching high and low for an answer, and the closest that I've got is this: Getting Bootstrap's modal content from another page
However, I have a problem because it is not showing any of the modal content. It is just displaying a blank modal and I have no idea where I have gone wrong.
Below are my relevant codes:
Main HTML:
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Pre-IDA Test
</div>
<div class="panel-body">
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script> pretest() </script>
View Data
<div id="testing" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</div>
</div>
Modal Content:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Details</h4>
</div>
<!-- /.modal-header -->
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Year/Quarter</th>
<th>Indoor Quarterly Results</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016 Q1</td>
<td>Q1 (59/60)</td>
</tr>
<tr>
<td>2016 Q2</td>
<td>Q2 (58/60)</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- /.modal-footer -->
</body>
</html>
EDIT:
After looking at the JavaScript Console, I've found an error which says:
jquery.min.js:4 XMLHttpRequest cannot load file:///E:/PORTAL/pages/pretestmodal.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Any idea how I can fix this?
The problem you are experiencing is one that is very common when viewing website files using the file:/// protocol in Google Chrome.
If you take a look at the error message you are receiving in your log:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
As a bit of insight, a cross origin request occurs when you try and access a resource (such as a Javascript file or CSS file for example) from another domain. When you view your website as a local file (i.e. using Chrome's file:/// protocol), the types of files that you can access are limited. This is called a same-origin policy. These policies exist to prevent attacks such as cross-site scripting (XSS) attacks affecting your computer.
The Mozilla Developer Network has an interesting article on same-origin policies for file:/// URIs, which explains your problem nicely:
For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html
Applying this to the errors that you have experienced, presumably the file you are trying to access is in a different directory which is causing the cross origin request error.
It is worth noting that all of these problems are occurring because you are testing your website on your local file system. To fix this problem, you should try testing your website on a localhost server. This effectively means that you can test your website using either HTTP or HTTPS.
Some good solutions for creating a localhost server on your PC are:
XAMPP - A good solution for Windows, Mac and Linux
WampServer - Another solution for Windows only.
I am unfamiliar with WampServer so here are the instructions for XAMPP:
Go to the XAMPP website and download the appropriate installer. This will prompt you to choose an installation location. On Windows, this is usually C:\xampp.
Place all of your web files in the folder <xampp installation folder>\htdoc\
Open the XAMPP control panel and click Start under Apache
In your web browser, type localhost then press Enter
You should now be able to see your website without the problems you have described.
You can try using w3-include. Just put the modal in the file you want to include
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="modal.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.
So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.
Simple JsFiddle: http://jsfiddle.net/p5sZJ/17/
<ul id="mainTab" class="nav nav-tabs">
<li>First</li>
<li>Second</li>
</ul>
<div id="mainTabContent" class="tab-content">
<div id="first" class="tab-pane">
</div>
<div id="second" class="tab-pane">
<div id="second-accordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#second-body">
Heading
</a>
</div>
<div id="second-body" class="accordion-body collapse">
Content
</div>
</div>
</div>
</div>
</div>
Preconditions:
1. Make sure the first tab is active.
2. Make sure accordion on the second tab is collapsed.
Steps to reproduce:
1.Click navigate to the second tab and then click on the heading of the accordion immediately.
2.Try expanding/collapsing the accordion.
Expected result: the accordion still works.
Actual result: the accordion freezes in the collapsed state and cannot be expanded.
Note: you may need to repeat these actions several times before the bug is reproduced.
I am basing my question on another question that I've asked a while ago:
Some problems with Bootstrap collapse + Tab navigation
I've also read this question, but it's also a little bit different:
Twitter bootstrap expand/collapse all - within bootstrap tabs
I think the accordion stucks because the browser (I reproduced the issue in chrome 36.0.1985.125 m) still thinks the accordion is hidden and doesn't fire the 'transitionend' event. The accordiong stucks in the transitioning state forever.
When I opened the tab programmatically (like in first question) I could set a timeout to resolve this issue, I don't think I can do so in this case.
Edit:
Just tried in FF. Couldn't reproduce.
Edit 2:
Maybe I am not completely right about the steps to reproduce the problem. Just try to do the following cycle fast:
1. Open second tab.
2. Open accordion.
3. Close accordion.
4. Open first tab.
5. Repeat from first step.
It might be that the accordion stucks while it is in process of hiding and you click on the first tab.
Edit 3:
Yes, I think the second set of steps is the right one.
Edit 4:
A link to swf file with video of me reproducing the problem.
http://1drv.ms/1ttaeJr
My question is what is the best way to resolve this particular situation?
I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:
The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.
I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?
Here's the button that's supposed to launch the modal:
<a class="btn" data-toggle="modal" href="#testmodal" >About</a>
And here's the modal itself:
<div class="modal hide fade in" id="testmodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js
Glad your problem is resolved.
Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.
your close link should be like this:
<a class="close" data-dismiss="modal">×</a>
since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.