In my project we have this lines of codes:
<span
onClick={this.toggleEditing}
>
{this.state.value}
</span>
Needless to say, it produces an error in eslint with message "Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions". But I don't know what is the best way to fix this situation, should we change it to button and change style to look like a span. I really don't have much experience with this problem.
Look at the documentation it beautifully tells you what to do.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error
For your case, the resolution is to add role="button"
<span onClick={this.toggleEditing} role="button">
{this.state.value}
</span>
I fixed it using this:
<span
role="button"
tabIndex={0}
title="Some title"
onClick={this.toggleEditing}
onKeyPress={this.toggleEditing}
>
{this.state.value}
</span>
What is the error? onClick translates to an event in the DOM which is valid (click on a span) so you should be able to make this work.
Related
I use reactstrap. I have this kind of <button> with an icon inside :
{this.props.mode === "update"
?
<Button
className="btn btn-danger btn-sm"
onClick={() => this.deleteQuestion()}
>
<i className="fa fa-trash"></i>
</Button>
: null
}
If I click on the icon, the function in not triggered.
If I click outside the icon (but inside the button), the function is triggered.
What is this mystery? I am a beginner in React and react-strap.
The reason it behaves this way is because icon captures click before it is propagated to the button. The easiest way to fix this is to add the following in your css
.btn i.fa{
pointer-events: 'none';
}
it will fix it for all the buttons in your project
There is a concept called event capturing and event bubbling in JavaScript. Take a look at Event Capturing and Event Bubbling. This concept helps you overcome the problem that you're facing currently.Take a look at this. You can add the same function onClick to the icon too. This will help you as well!!.. There are so many design templates available you can try those too. For eg. There's Ant Design. Hope it helps!!.. Happy Coding!!
My reactjs styledcomponent contains this code:
<a styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
This works fine but the eslint is complaining:
Static HTML elements with event handlers require a role.
How can I fix this error?
you need to add a role props in your a tag to avoid this warning, for example a button
<a role = "button" styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
I guess it is because the HREF props is missing in your anchor tag (not sure)
In my case, I used aria-hidden="true", then I was able to commit.
Before:
<i className="pwdicon" onClick={togglePasswordVisiblity} >
After I updated with aria-hidden:
<i className="pwdicon" onClick={togglePasswordVisiblity} aria-hidden="true" >
My problem was resolved.
Reference Link : https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
The earlier answers do give specific examples, what I was missing is a list of roles.
If someone is looking for other roles, a partial list is listed here.
An example of a missing role is tab which I needed.
Edit: per the comment request, my personal error was solved by adding role, but I was missing a list of allowed roles, see above for a partial list and a more complete (or possibly complete) list here, thanks to the comment by Caiof.
You need to set the role explicitly. So, try the next code:
<a role="button" styling="link" onClick={this.gotoLink}>
<SomeComponent />
</a>
Also, as you can see I've modified the onClick handler by replacing arrow function on regular declaration. It would reduce annoying and expensive calculations.
just add aria-hidden to it
<a aria-hidden styling="link" onClick={() => this.gotoLink()}>
<SomeComponent />
</a>
Just need to add the 'aria-hidden' attribute, like this:
<div onClick={handleClickCollectionCard} aria-hidden="true">
I used the following jsx to construct an entry in a FAQ table:
<li key={faqKey} className={styles.entry} onClick={handleExpandFn}>
<div>
<span className={`icon-next ${questionClassname}`} />
<span className={styles['question-text']}>{faqEntry.question}</span>
</div>
{faqEntry.answer}
</li>
The idea is that when a user click on the entry, it will toggle the open state of the entry. In the other word, when a user clicks on an open FAQ entry, it will close it. Otherwise it will open it.
However the li tag triggers this eslint violation: Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions
Unfortunately I don't think there is alternative way to the above html markup.
Since it is jsx, it also does not allow override such as // eslint-disable-line jsx-a11y/no-static-element-interactions (The inline comment will be printed out to the web page)
So how I can work around it? Happy to use different jsx markup or jsx eslint override
For those who are looking for a workaround, use role="presentation" in your tag.
Here's how you could revise the markup to be semantically appropriate and get the onclick off the <li>
<li key={faqKey} className={styles.entry}>
<h3>
<button type='button' onClick={handleExpandFn}>
<span className={`icon-next ${questionClassname}`} />
<span className={styles['question-text']}>{faqEntry.question}</span>
</button>
</h3>
<div className='add_a_panel_class_name_here'>
{faqEntry.answer}
</div>
</li>
So with the above:
the <h3> will make the titles of the FAQs easily searchable by screen reader users that are navigating by headings
placing the <button> inside of the <h3> gives you the appropriate element to attach a click event to (you want to use a button here because you're toggling state. an <a> should be used if you were going to a new page. You also don't need to add a tabindex to a button as they are inherently focusable).
There are some additional steps you'd likely want to implement, using ARIA expanded and controls attributes on the button, but the above should get you to a good base for moving beyond your error.
You could put eslint-disable-line in the jsx
<li // eslint-disable-line jsx-a11y/no-static-element-interactions
key={faqKey}
className={styles.entry}
onClick={handleExpandFn}
>
<div>
<span className={`icon-next ${questionClassname}`} />
<span className={styles['question-text']}>{faqEntry.question}</span>
</div>
{faqEntry.answer}
</li>
Another option, add role='presentation'
<li
key={faqKey}
className={styles.entry}
onClick={handleExpandFn}
role='presentation'
>
<div>
<span className={`icon-next ${questionClassname}`} />
<span className={styles['question-text']}>{faqEntry.question}</span>
</div>
{faqEntry.answer}
</li>
One solution I can remember is to use an anchor element with tab-index.
<a style={{display: 'list-item'}} tabIndex={-42} key={faqKey} className={styles.entry} onClick={handleExpandFn}>
<div>
<span className={`icon-next ${questionClassname}`} />
<span className={styles['question-text']}>{faqEntry.question}</span>
</div>
{faqEntry.answer}
</a>
if you are trying to implement menu using li then the right solution is using role="menuitem" in your li tags.
More details about it: https://w3c.github.io/aria/#menuitem
To overcome or avoid this error in ES Lint.
You can use three things based on your needs and requirements
aria-hidden="true" - will remove the entire element from the accessibility API
role= "presentation" - The presentation role is used to remove semantic meaning from an element and any of its related child elements.
role= "none" - will remove the semantic meaning of an element while still exposing it to assistive technology.
There are limitations as well:
Hide content from assistive technology
Cannot be used on a focusable
Element cannot be used on the parent of an interactive element
You can actually add the eslint override as a comment in JSX.
You have to nest the comment inside of braces {}, so that it will be interpreted as JavaScript. Then, of course, since it is a JavaScript comment, it will not be rendered in the JSX.
Depending on your style preference, you can either do it on the line directly before the code
{/* eslint-disable-next-line */}
<li key={faqKey} className={styles.entry} onClick={handleExpandFn}>
or, at the end of the same line
<li key={faqKey} className={styles.entry} onClick={handleExpandFn}> {/* eslint-disable-line */}
Check out the docs for more information on using JavaScript inside of JSX.
use
aria-hidden="true"
on non interactive element tag. like
<span aria-hidden="true" onClick={() => void}>Text</span>
Instead of rolling my implementation of faq table with collapse/expand interactive feature, I replace it with react-collapsible.
It of course gets rid of the jsx-a11y/no-static-element-interactions as a result.
I have two button that are overlapping, and use ng-hide for the m with the same flag.
On Chrome it work perfectlly, but when I use IE 11, the icons are overlapping on page load.
I have two icons on in my search box:
And On IE11, when the page is loading:
The code is:
<button type="submit" class="btnSubmit" ng-show="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-show="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
How can I fix it ?
Try using ng-ifinstead of ng-show.
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
Not using CSS by changing to ng-if prevents these CSS problems. Although the ng-ifcreates a new scope but that impact is nothing.
<button type="submit" class="btnSubmit" ng-if="vm.isSearchIconVisible" >
<i class="iconMglass"></i>
</button>
<button type="reset" ng-if="!vm.isSearchIconVisible" class="clearTextButton" ng-click="vm.clearSearchText()">
<span class="clearIcon">X</span>
</button>
If you don't want to change to ng-if, then please share a working Plunkr/... so help you find your problem. Since it will be a cssissue most likely.
The Problem was that IE11 save cash with old code, CTR+R dident solve this problem.
In the IE11 option I revoce the option to save cash and it solve the problem, the new code appear.
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren