I have build sidebar navigation menu from API JSON data.
But after bind data to sidebar navigation menu it will showing all menu with collapsed state after click on some option in sidebar navigation menu then it is working properly.
but at initial stage it is collapsed.
also when i click on some option in some menu of sidebar it is not in collapsed state that menu is closed state but if i click on option from same menu then it is collapsed state
<li ng-repeat="link in links" ui-sref-active="active" >
<i class="{{ link.ShortName }}"></i><span class="nav-label">{{ link.Name | translate }}</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li ng-repeat="subItem in link.ProgramList">
<a ui-sref="{{subItem.AccessibleName}}" ui-sref-opts="{reload: true}">{{ subItem.Name | translate }}
</a>
</li>
</ul>
</li>
this is API call
$http.get('http://localhost:53396/api/Module/Get').success(function (data) {
$scope.links = data;
});
Related
I'm using react-bootstrap version 2.4.0 and I'm using the Tab component. I want the website to be accessible by tab navigation but when I use the tab component the focus is set only on the active tab item and never gets to the other tabs.
<Tabs
className="mb-3"
defaultActiveKey="A"
mountOnEnter={true}
unmountOnExit={true} >
<Tab eventKey="A" title="A">
<A/>
</Tab>
<Tab eventKey="B" title="B">
<B/>
</Tab>
<Tab eventKey="C" title="C">
<C/>
</Tab>
</Tabs>
I noticed that when the page is rendered, all the other tabs (not the active one) have tabindex="-1" on the button of that tab, which makes them inaccessible to tab navigation.
This is what the DOM looks like after react-bootstrap generated its HTML. You can see that the first tab button (the active one) doesn't have the tabindex="-1" attribute on it. The other buttons have it so when I'm using tab navigation they never get the focus and I can never click on them.
<ul class="mb-3 nav-tabs nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-A" role="tab" data-rr-ui-event-key="A" aria-selected="true" class="nav-link active" aria-controls="react-aria2325882265-4-tabpane-A">A</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-B" role="tab" data-rr-ui-event-key="B" aria-selected="false" tabindex="-1" class="nav-link">B</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-C" role="tab" data-rr-ui-event-key="C" aria-selected="false" class="nav-link" tabindex="-1">C</button>
</li>
</ul>
How can I use the Bootstrap Tab component and make it accessible with tab navigation?
I saw that if I use the Nav component it doesn't have this problem because it doesn't put the tabindex="-1" on the a tag that is generated by react-bootstrap. However I can't use the Nav component because I don't have a link to go to, but a component to render, and this is exactly what the tab component is used for.
The expected behaviour of Tabs as per ARIA Practices Guideline (APG) is that the arrow keys on the keyboard change focus within this composite component.
Depending on the visual presentation of the tabs, the left and right arrow keys are used for a horizontal arrangement, up and down for vertical ones.
React-Bootstrap’s Tab component implements the arrow keys, but both up/down and left/right navigate the tabs.
I have a Vertical menu that is styled as a dropdown.
on iPhone, when Voiceover is on, double tab will open the dropdown, swipe Right will go through menu items, and when gets to the last menu item, Swipe Right will close the dropdown and gives focus to the first link outside of Menu.
Now, dropdown menu is closed. and menu items are not visible. Normally, one single Left swipe should moves the focus from outside link to the dropdown header while Voiceover is ON.
but the problem is, it takes multiple Left Swipe equal to the number of menu items 4+ 1 to get from outside link to dropdown header. Voiceover is not announcing anything, I can only see on iPhone screen Voiceover text reading Manu item which is the same as <a role="menuitem">.
it looks like Voiceover still recognizes the menu items although the dropdown menu is closed.
If I do NOT open dropdown menu, 1 right swipe moves focus from dropdown header to outside link, and then 1 left swipe move focus from outside link to dropdown header. the problem happens when I open dropdown menu and swipe right through menu items.
I tried to resolve this by giving UL, Li , <a> the combination of these attributes but did not work.
When menu is closed:
aria-hidden=true, tabIndex=-1, display=none, visibility=hidden
but did not work.
I am wondering if I can implement UISwipeGestureRecognizer for React JS.
I see how the import command and code for React Native but nothing for React JS.
My Question is: when dropdown menu is closed, lets say focus is on outsideLink, how can I bring focus to dropdownHeader with one Left Swipe ?
How to force Voiceover to ignore menu items when dropdown menu is closed.
Note: my module is a Class in React JS.
Really appreciate any help.
import React, { Component } from 'react'
// help needed : how to import UISwipeGestureRecognizer for React JS
class App extends Component {
constructor(props){
super(props)
this.state = {
menuOpen: false,
}
this.closeMenu = this.closeMenu.bind(this);
this.toggleMenu = this.toggleMenu.bind(this);
this.handleSwipe = this.handleSwipe.bind(this);
}
componentDidMount () {
window.addEventListener('touchstart', handleSwipe);
}
closeMenu(event){
this.setState({menuOpen: false});
this.handleSwipe(event);
}
toggleMenu(event){
this.setState({menuOpen: !this.state.menuOpen});
}
handleSwipe(event){
const outsideLinkFocused = event.target.classList.contains('outsideLink');
const dropdownHeader = document.getElementsByClassName('dropdownHeader')[0];
const leftSwipe = UISwipeGestureRecognizer.direction == 'left'; // I need help with leftSwipe condition
if(outsideLinkFocused && leftSwipe){
dropdownHeader.focus();
}
}
render() {
return (
<div className="Container">
<div className="NavContainer">
<button className="dropdownHeader">
Dropdown Header
</button>
<ul className="menu" role="menu">
<li className="item" role="none">
<a role=="menuitem" href="#"> item 1</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 2</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 3</a>
</li>
<li className="item" role="none">
<a role=="menuitem" href="#"> item 4</a>
</li>
</ul>
</div>
<div className="ArticleContainer">
<a className="outsideLink" href="#"> Outside Link </a>
</div>
</div>
)
}
}
This module is more complex and all the handlers work fine. I just wrote a short version here.
I am new in angular and I have been using angular-sidebarjs in my app. I have given my code of sidebar directive below.
in my template:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
radius.name
</li>
</ul>
</nav>
</sidebarjs>
in my home.js:
var home = angular.module('wm.home',[uiRouter,'ngSidebarJS'])
When I click on an option among the list, sidebar doesn't close and the required page loads behind. sidebar closes only when I click on the toggle button or outside the sidebar.
How to close the sidebar onclick of any of the options in the list?
You should add the attribute sidebarjs-toggle to your options, like this:
<sidebarjs>
<div class="sidebar-head">Find User</div>
<nav>
<ul class="sidebar-menu">
<li ng-repeat="radius in radius">
<a sidebarjs-toggle href="#" ng-click="listMenus()" ui-sref="users({radius_id: radius_id})" ui-sref-opts="{reload: true}">radius.name</a>
</li>
</ul>
</nav>
</sidebarjs>
Also, I think you should remove that href="#" because you are already doing the routing with the ui-sref.
Consider the following:
<ul>
<li id="dashboard" data-ui-sref-active="selected">
<a data-ui-sref="home">Dashboard</a>
</li>
<li id="jobs" data-ui-sref-active="selected">
<a data-ui-sref="home.foo">Foos</a>
<ul>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo1">Foo 1 list</a>
</li>
<li data-ui-sref-active="selected">
<a data-ui-sref="home.foo.foo2">Foo 2 list</a>
</li>
</ul>
</li>
</ul>
Problem is if the user currently click on another link, this "Dashboard" link state is still active.
How can I toggle the state active/inactive for Dashboard when user clicks it or clicks another link
Update:
I have tried this ui-sref-active-eq and it does work, however I cannot set this state back to active
That is because you are at child state of your home state, and thus it will always be active.
Use ui-sref-active-eq instead
According to the docs:
Will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
Edit: Added in Plnkr for reference.
I want to add isActive class to an item menu when user click on this item, and remove isActive class from all others items.
I am trying to compare the id, this is the angularJS code:
$rootScope.isActive = function(idVal, event){
return idVal === event.target.id;
}
This is a part from Menu Html code:
<ul class="sidebar-nav">
<li>
<a ui-sref="" id='101' ng-class="{active: isActive($event, 101)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Rules
</a>
<ul class='dropdown sidebar-nav-dropdown' >
<li>
Transaction Mapping
</li>
<li>
File Setup
</li>
<li>
Code Setup
</li>
</ul>
</li>
<li>
<a href="#" id='102' ng-class="{active: isActive($event, 102)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Administrative Rules
</a>
<ul class='dropdown sidebar-nav-dropdown'>
<li>
<a ui-sref="admin.mapping-rules">Transaction Mapping</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">File Setup</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">Code Setup</a>
</li>
</ul>
</li>
</ul>
Thanks,
First of all, you shouldn't use the root scope. You should use the scope of the controller associated to that view.
Second, your code doesn't make much sense. $event can be used as a parameter of a function called... to react to an event:
ng-click="doSomething($event)"
But with ng-class, there is no $event.
All you need to have in your scope is the ID (or name, or whatever identifies a menu item) of the selected menu item:
$scope.selectedMenuItem = null;
When an item is clicked, you need to change the selected menu item:
ng-click="selectMenuItem(101)"
$scope.selectMenuItem(item) {
$scope.selectedMenuItem = item;
}
Then to associated a css class with the selected menu item, you simply need
ng-class="{active: selectedMenuItem === 101}"
That said, if all your links navigate to a given router state, you don't even need that selectedMenuItem. All you need is to add the active class if the current router state is the one the that the link allows navigating to (assuming $state is on your scope):
ng-class="{active: $state.includes('admin.mapping-rules')}