I have an odd issue with the JAWS screen reader. I'm working an a page hosted on a SharePoint site and I'm using bootstrap's tabs. When I change tabs using JAWS, it reads the "removed" followed by the content of the previous tab, "removed" again, then the content of the tab you clicked. Oddly enough when I run the same page locally it doesn't do this.
In the example below (on SharePoint) if I am on the first tab, and click the second tab JAWS will announce "removed, content 1, removed, Content 2".
It doesn't do it below, but it does it on SharePoint. What can be different on SharePoint that would cause this?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">CONTENT 1 </div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">CONTENT 2 </div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">CONTENT 3 </div>
</div>
I found out the issue. The SharePoint site had the following Aria attributes:
aria-live="polite" aria-relevant="all"
"all" was what made it announce "removed" items. I changed it to "text" and now it announces the selected tab's content without announcing the previous tab's content.
Related
I am getting this issue with Nuxt.
Whenever I use , it automatically rewrites my CSS design and shows it differently. You can see exact issue in the video below.
Video of the issue
If I replace <nuxt-link> with <a>, everything starts to work correctly.
Navbar code example:
<nav class="navbar navbar-expand-lg navbar-dark mb-5 text-white" style="z-index: 10; background-color: rgba(0,0,0,0.3)">
<nuxt-link to="/" class="navbar-brand" active-class="active">
Frontend
</nuxt-link>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon" />
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<nuxt-link to="/" class="nav-link" active-class="active">
Home
</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link to="/games" class="nav-link" active-class="active">
Games
</nuxt-link>
</li>
</ul>
Correct css (at the start of the page loading)
Incorrect css (after a few seconds)
Issue was with <style> in index.vue (main page).
Changed it to <style scoped> and the issue is fixed.
I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
I am new to Front-End and angular part. I need to load tabs dynamically from what it returned from Backend...
Consider i am getting an array as like below :
*["tab1","tab2","tab3"].*
I have show tabs in a page with tab1, tab2, tab3.
What i have tried is hardcoded , its working,
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><b>tab1</b></li>
<li><b>tab2</b></li>
<li><b>tab3</b></li>
<li><b>tab4</b></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
Also i have to make sure that on click of the tab it should call a method with clicked name. All should be dynamic. Please suggest your ideas.Thanks.
you have to change href="#id" to data-target="#id"
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" >
<li class="active"><a data-target="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
<li><a data-target="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
<li><a data-target="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
<li><a data-target="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab_1"> </div>
<div class="tab-pane active" id="tab_2"> </div>
<div class="tab-pane active" id="tab_3"> </div>
<div class="tab-pane active" id="tab_4"> </div>
</div>
I achieved such functionality using ngx-Bootstrap
Array of tabs:
tabs: any[] = [{
title: 'Dynamic Title 1',
content: 'Dynamic content 1'
},
{
title: 'Dynamic Title 2',
content: 'Dynamic content 2'
},
{
title: 'Dynamic Title 3',
content: 'Dynamic content 3',
removable: true
}
];
Display tabs:
<tabset>
<tab heading="Static title">Static content</tab>
<tab *ngFor="let tabz of tabs"
[heading]="tabz.title"
[active]="tabz.active"
(select)="tabz.active = true"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
(removed)="removeTabHandler(tabz)"
[customClass]="tabz.customClass">
{{tabz?.content}}
</tab>
</tabset>
Check full usage here.
So, there are different ways of implementing it. One way as suggested by #Comann will definitely work. The other way of doing the same thing would be installing bootstrap dependency - try doing
npm install --save bootstrap
Import this in your styles.css file
#import '~bootstrap/dist/css/bootstrap.css';
You can also import it in your angular.json file assuming you might have generated the project using angular-cli. I prefer it to be in styles.css.
Create a separate navbar component and in the template
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/route1">Route1<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/route2">Route 2</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
Instead of having the two router links hard coded you will loop around with *ngFor on the array of tabs and populate it. Hope this helps.
I'm having trouble configuring the search results, linking to that specific result.
I've set the channel search preferences so that {auto_path} links to the relevant template group and template and I have had no trouble with this whatsoever.
The only trouble I am having is that when you click on the title of the result, when you are sent to the page that displays the specific entry, rather than display that specific entry, it shows you the most recent entry posted on that channel.
I’ve also noticed that when you click the result, the url which should display as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/entry
actually renders as this:
http://www.mywebsite.com/ee_site/index.php?/template_group/template/?/entry
Whats up with the extra ‘?/’ inbetween the template and the entry?
Here is the code for the results page:
{embed="embeds/html-head" page_title="Blog"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
<div id="title">
<h2>{exp:search:total_results} RESULT(S) FOR {exp:search:keywords}</h2>
</div>
</div>
<div id="blog">
<ul>
{exp:search:search_results}
<div class="blog">
<li class="search_results"><strong>{title}</strong> from <em>{channel}</em>
<br/>
{excerpt}
<br/>
</li>
</div>
{/exp:search:search_results}
</ul>
</div>
</div>
{embed="embeds/footer"}
</div>
</body>
</html>
and here is the code for a gallery entry
{embed="embeds/html-head"}
<body>
<div id="container">
{embed="embeds/header"}
{embed="embeds/navigation"}
<div id="hero">
<div id="heading">
{exp:channel:entries channel="gallery" limit="1" disable="pagination"}
<div id="title">
<h2>Gallery</h2>
</div>
<div id="story_title">
<h2>{title}</h2>
</div>
</div>
<div id="video_main">
<img class="image" src="{image}" alt="{title}">
</div>
<div id="featured" class="main">
<p>{info}</p>
<p class="url">{source}</p>
</div>
{/exp:channel:entries}
{embed="embeds/footer"}
</div>
</body>
</html>
On a category page, when you click an entry and are taken to this page, it displays the specific entry clicked on, so I know that there is nothing wrong with that aspect.
Any suggestions/solutions would be much appreciated, i'm sure it's something minor that i'm just not spotting!
I'm building a custom theme. I need to override how the list of blog posts is rendered to match my desired look. I can't seem to figure out how to render the blog post's title( or any other piece of info for that matter ). All of my markup and hard coded info renders, but the dynamic data does not.
Inside of my theme folder "~/Views/Items/Content-BlogPost.cshtml":
<div class="media row-fluid">
<div class="span1 hidden-phone">
<!-- Date desktop -->
<div class="date-wrapper"><span class="date-m">Jan</span> <span class="date-d">20</span> </div>
<!-- Meta details desktop -->
<p class="meta muted"><i class="icon-user"></i>Alex </p>
</div>
<!-- PROBLEM IS HERE!!!!!!!!!!! Title does not render! -->
<div class="span11"><h1>#Display(Model.Content.Title)</h1>
<div class="media-body">
<div class="tags">coding / event</div>
<h4 class="title media-heading">a nec in sed hac ultrices cursus</h4>
<!-- Meta details mobile -->
<ul class="inline meta muted visible-phone">
<li><i class="icon-calendar"></i><span class="visible-desktop">Created:</span> Sun 20th Jan 2013</li>
<li><i class="icon-user"></i>Alex</li>
</ul>
<a href="blog-post.htm" class="media-object">
<img src="img/blog/ape.jpg" alt="Picture of frog by Ben Fredericson">
</a>
<p>#Display(Model.Content)</p>
<ul class="inline links">
<li><i class="icon-circle-arrow-right"></i>Read more</li>
<li><i class="icon-comment"></i>50 Comments</li>
</ul>
</div>
</div>
</div>
Thanks to Bertrand, I tracked down the way to do this.
Model.ContentItem.TitlePart.Title