NVDA-FF and JAWS-Chrome>, when read more element is activated while traversing through tab navigation then screen reader announces the unnecessary information along with the updated content. When read more element is activated in the arrow key navigation, for the instance, , screen reader announces as “ <> and <>”. Note: same goes with the read less element as well
<div class="pros-cons-block" tabindex="-1">
<div class="pros-block">
<h4>Pros-text</h4>
<div>
eachReview.pros
</div>
</div>
<div class="cons-block">
<h4>cons-text</h4>
<div>
eachReview.cons
</div>
</div>
</div>
<div v-show="eachReview" class="read-more">
<button v-if="eachReview.readMore" class="readless" #click="readMore(eachReview)">
<span aria-live="assertive" aria-atomic="true"></span>
<span v-if="eachReview.readMore">
<span class="phw-visually-hidden">{{eachReview.headline}}
</span>
{{readLessButton.text }}
</span>
</button>
<button v-if="eachReview && !eachReview?.readMore" class="readMoreButton" #click="readMore(eachReview, index)">
<span aria-live="assertive" aria-atomic="true"></span>
<span v-if="eachReview && !eachReview?.readMore">
<span class="phw-visually-hidden">{{ eachReview && eachReview?.headline }}</span>
{{ content.readMoreButton.text }}
</span>
</span>
</span>
</button>
</div>
<script>
const readMore = (eachReview: any, index: number) => {
eachReview.readMore = !eachReview.readMore;
const focusElem = root.value.querySelectorAll('.glassdoorReviews .each-review')[index];
if (eachReview.readMore) {
setTimeout(() => {
const readLessButton = root.value.querySelectorAll('.read-less-button')[index];
readLessButton?.setAttribute('aria-hidden', 'true');
focusElem.querySelector('.pros-cons-block').focus();
readLessButton?.setAttribute('aria-hidden', 'false');
}, 0);
} else {
setTimeout(() => {
focusElem.querySelector('.readMoreButton').focus();
}, 0);
}
};
</script>
Related
When I click the button to toggle the mobile nav bar it's not working. I am using Bulma css framework with react. Here is the React nav bar component:
onst Header = (props) => {
const dispatch = useDispatch()
const { loginUser, isAuthenticated, history, errors } = props;
const dropdownRef = useRef(null);
const [isActive, setIsActive] = useDetectOutsideClick(dropdownRef, false);
const [isMobileActive, setisMobileActive] = useState(false);
const onClick = () => setIsActive(!isActive);
const onLogout = () => {
dispatch(logout())
}
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
onClick={() => {
setisMobileActive(!isMobileActive)
}}
role="button"
className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-end">
<a className="navbar-item">Dashboard</a>
<div
onClick={onClick}
ref={dropdownRef}
className={`navbar-item has-dropdown ${
isActive ? "is-active" : ""
}`}
>
<a className="navbar-link">Account</a>
<div className="navbar-dropdown is-right">
<a className="navbar-item">Account settings</a>
<a className="navbar-item">Set Job filters</a>
<a className="navbar-item">Report an issue</a>
<a className="navbar-item" onClick={onLogout}>Log out</a>
</div>
</div>
</div>
</div>
</nav>
);
};
The most bottom part with dropdown is for desktop nav bar. What is missing for mobile toggle menu. How can I fix it? Who I click the toggle button nothing happens.
I‘m not familiar with React, but on the bulma side you need to toggle the class is-active on both the navbar-burger and the targeted navbar-menu.
There are implementation examples in Bulma navbar documentation, personally I'm using the jQuery implementation which works perfectly :
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
but there's also a Vanilla Javascript implementation in the docs if you want.
Not sure what other info I could supply besides one of the columns that would be helpful. I'm stumped.
[edit] Added full code for this component. This looks fine on desktop but not on my phone or tablet. See the photos. I'm repeating this because I can't save my edits to this question due to having too much code and not enough information so here I am rambling about nothing.
Mobile:
Desktop:
import React, { Component } from 'react';
import API from '../utils/API';
class Attendance extends Component {
state = {
selectedOption: "",
disabled: ""
};
handleOptionChange = (changeEvent) => {
this.setState({
selectedOption: changeEvent.target.value
});
};
handleFormSubmit = (formSubmitEvent) => {
formSubmitEvent.preventDefault();
if (!this.state.selectedOption) {
return;
} else {
this.setState({
disabled: "true"
})
API.updateAttendance(this.props.student._id, { present: this.state.selectedOption });
}
};
render() {
return (
<div className="col d-flex justify-content-end" >
<form onSubmit={this.handleFormSubmit}>
<div className="row mt-3">
<div className="col-sm-3">
<label className="text-danger">
<input
type="checkbox"
value="absent"
checked={this.state.selectedOption === 'absent'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Absent
</label>
</div>
<div className="col-sm-3">
<label className="text-warning">
<input
type="checkbox"
value="excused"
checked={this.state.selectedOption === 'excused'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Excused
</label>
</div>
<div className="col-sm-3">
<label className="text-success">
<input
type="checkbox"
value="present"
checked={this.state.selectedOption === 'present'}
onChange={this.handleOptionChange}
disabled={this.state.disabled}
/>
Present
</label>
</div>
<div className="col-sm-3">
<div className="form-group">
<button type="submit" className="btn btn-sm btn-dark" onSubmit={this.handleFormSubmit} disabled={this.state.disabled}>
<i className="fas fa-user-check" />
</button>
</div>
</div>
</div>
</form>
</div>
);
}
}
export default Attendance;
I have added bulma.css in my Next.js project and all runs well, but navbar toggle doesn't work because need add some pure javascript code and React doesn't provide pure DOM events
Just add React Lifecycle event and put your code.
ORIGINAL example:
import React from "react";
class NavBar extends React.Component {
componentDidMount() {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
}
render() {
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
className="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">Home</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
I had the same issue and in my case I can resolve it adding in the _app component this line
import 'bulma/css/bulma.css
I am trying to successfully express Semantic-UI code with the same functions I have used in Semantic-UI-react code. Any help would be appreciated.
This is what I have:
class Preview extends React.Component {
componentDidMount() {
const update = () => {
this.dest.textContent = this.src.innerHTML.replace(/</g,
'\n<');
};
setInterval(update, 300);
update();
}
render() {
return (
<div>
<div ref={(src) => Object.assign(this, { src })}>
<Demo />
</div>
<pre ref={(dest) => Object.assign(this, { dest })}>
</pre>
</div>
)
}
}
export class Demo extends Component { constructor(){
super();
this.localStorageClear.bind(this); }
localStorageClear = (e) => {
e.preventDefault();
window.localStorage.clear();
};
render() {
return (
<div id = "soundcloud-player">
<Container className='col'>
<div className='col-left js-playlist toggle'>
<div className='inner'>
</div>
</div>
<div className='col-right'>
<div className = 'main'>
<Input size='massive' icon='search' input = {{ className:
'input-search js-search' }} placeholder='Search for a song
or artist...'/>
<Icon className='js-submit'/>
<Button onClick={(e) => this.localStorageClear(e)}
className='clear' content='Clear Playlist'/>
<Button content='Show/Hide Playlist' id='toggle'
className='hide-toggle'/>
<Card className='js-search-results search-results'/>
</div>
</div>
</Container>
</div>
The code written in the Preview Component is specifically written to convert the code written inside of the Demo Component. The Demo Component should convert to what is shown below:
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input">
<input placeholder="Search for a song or artist..." class="js-search input-search">
<i class="search icon js-submit"></i>
</div>
<button onclick="localStorageClear();" class="clear">Clear Playlist</button>
<button class="hide-toggle" href="#" id="toggle">Show/Hide Playlist</button>
<div class="search-results js-search-results ui cards">
</div>
</div>
</div>
The actual output of the code at the top is:
<div id="soundcloud-player">
<div class="ui container col">
<div class="col-left js-playlist toggle">
<div class="inner">
</div>
</div>
<div class="col-right">
<div class="main">
<div class="ui massive icon input input-search">
<input placeholder="Search for a song or artist..." type="text">
<i aria-hidden="true" class="search icon">
</i>
</div>
<i aria-hidden="true" class="icon js-submit">
</i>
<button class="ui button clear" role="button">Clear Playlist
</button>
<button id="toggle" class="ui button hide-toggle" role="button">Show/Hide Playlist
</button>
<div class="ui card js-search-results search-results">
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out why the localStorageClear function does not show up for the first button in the actual output. Is there wrong I am doing at the top inside of the Semantic-UI-React code inside of the Demo Component?
The way you are setting up your handler function is not correct. You are also binding in your constructor AND inline with an arrow function inside of the onClick event for the button. You only need to bind in one place.
Take a look at the codesandbox example I made so you can see how to declare a class method handler function and use it with a click event. Notice that there is no constructor here or arrow function to bind on the onClick event? That is because the binding is happening on the class method. handleClick = () => {}
class App extends React.Component {
handleClick = e => {
console.log(e.target + " was clicked.");
// Do whatever functionality you need here.
// In your example you do not show that it matters what the element is,
// so you don't need to pass the event (e) into your class method.
};
render() {
return (
<Container>
<Divider hidden />
<Button content="Click Me" onClick={this.handleClick} />
<Divider hidden clearing />
<Message info>
Look in your console and you will see that the click function is
working.
</Message>
</Container>
);
}
}
Here is a working codesandbox example.
I'm currently trying to apply a background-color to the p elements within the 1st div by checking a checkbox that's located within the 2nd div. I'm calling a directive when the input box is clicked, "text-theme-switch", to manipulate the p elements in the first div
<!--HTML-->
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 id="{{subArt.id}}-subart" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph" >
<p class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input text-theme-switch
ng-model="text.themeView"
val="text.themeView"
ng-change="text.test()"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
This is the directive that is manipulating the DOM elements in the first div.
//DIRECTIVE
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeSwitch', function(){
return{
restrict: 'A',
transclude: true,
scope: {textTheme: "="},
link: function(scope, element, attrs){
element.on('click', function(){
$('.text-main-window h3').toggleClass('grey-on');
$('.text-main-window h4').toggleClass('grey-on');
$('.text-main-window h5').toggleClass('grey-on');
$('.rule-style').toggleClass('grey-on');
$('.text-main-window p:not(.rk-class, .enforcement-class, .cdd-class, .reporting-class)').toggleClass('grey-on')
$('.rk-class').toggleClass('rk-class-active');
$('.cdd-class').toggleClass('cdd-class-active');
$('.enforcement-class').toggleClass('enforcement-class-active');
$('.reporting-class').toggleClass('reporting-class-active');
})
}
};
});
})();
And here's the CSS
/*CSS*/
.cdd-class-active{
background-color: $themePink;
#include borderRadius;
}
.reporting-class-active{
background-color: $themeBlue;
#include borderRadius;
}
.rk-class-active{
background-color: $themeOrange;
#include borderRadius;
}
.enforcement-class-active{
background-color: $themeGreen;
#include borderRadius;
}
.highlight-on{
background-color: $veryPaleYellow
}
.grey-on{
opacity: .5;
background-color: white;
}
While the above code is working, I feel like I'm using a whole lot of bad practices here. From what I've read, DOM manipulation should be done from directives. I've also read that in Angular scope should be used rather than selectors, but I can't figure out how a directive should be used with a click event to manipulate the DOM of other elements rather than the one clicked. Should this type of work be delegated to the controller and should the directive be called from somewhere else, or can anyone recommend a cleaner way to do this, using scope rather the selectors?
So I figured out where I was going wrong here. I was putting the directive on the checkbox input and trying to work off the click event. Because of this, I had to search through and find all the elements that needed to be manipulated. What I should have been doing was putting the directives on the elements that needed to be manipulated as seen below.
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 class="grey" text-theme-grey="text.themeView" id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 class="grey" text-theme-grey="text.themeView" id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 class="grey" text-theme-grey="text.themeView" id="{{subArt.id}}-subart">
{{subArt.subArtNum}}
</h5>
<div ng-repeat="para in subArt.paragraph" >
<p text-theme-color='text.themeView' class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style grey"
text-theme-grey="text.themeView"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input ng-model="text.themeView"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
Now the directives watch the value of the model on the switch for for changes and the classes are added or removed for each element accordingly.
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeGrey', function(){
return{
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(attrs.textThemeGrey, function(newVal){
if(newVal){
element.addClass('on')
}else{
element.removeClass('on')
}
})
}
}
})
})();
A much cleaner solution, I think. Hope this helps someone.