I am editing a button that currently loads more products onto a page. A "Load More" button. For ADA compliance, when voiceover is on this button must say "loading" when clicked. I have injected aria-live/accessibilityLiveRegion into the component but it just reads "Load more Load more" when pressed... Can I add a message somehow to the aria live? Or any advice on how to get a button to read 'Loading' after pressed in React Native Web?
aria-live should be on the element that's going to be changing, if you don't already have it there. Or just add the attribute role="alert" to that element. It will automatically read out the content, so you could conceivably add a click handler to your button and give a screen reader only element with an alert role the content of "loading" to get the functionality you're describing.
Related
I am using modal(ant design) to show video and pdf view on a mobile screen. When I click on the back button of mobile video/pdf view plus main screen is getting closed, I only want to close video/pdf view and modal that's it not the main screen.
Kindly suggest how can I achieve this.
Alternative 1:
You need to capture the browsers back button event, and make that event set the <Modal visible={}/> state variable to close the modal, instead of actually navigating back.
How to capture the back event depends on what type of routing you are using.
For the NextJS router you can register an beforeHistoryChange event listener.
Alternative 2:
Add a URL parameter to the page that controls the modal open state. So you have <Modal visible={router.query.modal !== undefined} ... />.
Then if you open the modal from /page the URL becomes for example /page?modal=open.
And if the user presses back the browser goes back to /page and the modal closes.
What is the most proper way to style <Link> component in React Router v4? If <Link> is simply an anchor tag, it shouldn't have <button> element nested inside. It also shouldn't be nested inside a button (because it doesn't make any sense), so the most valid way is to style it as a button. What are the cons of this approach?
Since the accessibility tag was added, I'll answer from that perspective.
First decide if you want a link or a button. A link is for navigational purposes. It takes you to another page or somewhere else on the current page. A button is for performing an action.
So you need to decide what should happen when the user selects the element. Are you navigating (link) or performing an action (button)?
If you use a link and style it as a button because you want an action to happen, such as "add to cart" or "register" or "login", then there are several accessibility issues to handle:
the role of the link needs to be set to button
you need to add a keyboard handler to allow the space key to activate the link. enter will already work but space is not a native action to a link. When the role is set to "button", a screen reader will announce the element as a button and will tell the user to "press spacebar to activate", so you need to handle that key.
However, this could be resolved much easier if you just use a <button> instead of an <a>. See the first rule of ARIA.
I'm making an accessible web application. One of the feature is a button that allows users to scroll to a certain section of the page. I'm using window.scrollTo(x,y) for this functionality.
Now testing my application using the built-in Mac VoicerOver, I found that although I can click on the button and scroll with no problem, after scrolling, VoiceOver doesn't read anything. Instead I have to click on the mouse one, or use the keyboard equivalents to make it read the content that's on the screen after scrolling.
I'm afraid that some users may not realize that they need another click after clicking on the button. I have two possible solutions:
When the screen reader read the button, it also tells the user that if they want to go to the livechat, they need to click again after clicking on the button. I know how to implement this one, but it looks verbose and dumb.
Change my code so that VoiceOver will read the content after scrolling. I don't know how to implement this one.
The content I would like the screen reader to read is wrapped in a tag.
If you are only scrolling the page, then most screen reader users will not care that you scrolled. With limited or no vision, whether the screen scrolls or not does not matter because the screen cannot be seen.
However, if you are scrolling the page in order to put a certain element into view, then that would benefit screen reader users too.
It sounds like you're trying to do the latter:
allow users to scroll to a certain section of the page
In that case, you also need to put the keyboard focus on that element via the focus() javascript call. Moving the focus will cause VoiceOver to read that content. But to move the focus to a natively non-focusable element (such as an <h2> or a <section> or <p>), the receiving element will need tabindex="-1".
<h2 tabindex="-1" id="myh2">some heading</h2>
and then somewhere you'd have this javascript:
var element = document.getElementById("myh2");
element.focus();
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle, tool-tip doesn't hide on mouseout and few other hyperlinks and mouse events stop working.
I have a set of contacts displayed in a list on an overlay, each of it with a bootstrap delete icon besides it which displays a tool-tip on mouse hover. for the delete icons, neither are we using button, nor anchor tag a, we are using bootstrap icons which act as the links for click event. Please suggest how to disable the 2nd click for them. Fast clicking the delete icon twice, disrupts the 1st delete cycle, causing other hyperlinks like delete icons and tool-tips on other contact records to be disabled and all other mouse events to be disabled, freezes the delete icon (which is no more visible on mouseover) and open overlay hyperlink icon.
Tried several options like:
Explicitly deactivating mouse events on row after 1st click of delete icon using angular.element('.deleteIconClass').css('pointer-events','none');
and activating mouse events on row after success or failure of delete AJAX call using angular.element('.deleteConfigIcon').css('pointer-events','auto'); respectively.
Calling angular UI grid refresh on overlay so as to hide the retained tool-tip and show back the delete icons on hover over delete icons on each row.
Explicitly calling mouseout or mouseleave and mouseover or mouseenter events to respectively hide and show the tool-tips on delete icons of each row.
None of the above are working satisfactorily. Am I missing something in the design or coding? Kindly let me know if any other information is required as it is an already existing code. Thanks.
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle
Didn't quiet catch the rest if your question but If you're trying to prevent the an action from perormining more than one, you need to disable it on click.
<button type="button" ng-click="clicked()" ng-disabled="hasClicked">click me</button>
$scope.clicked = function(){
$scope.hasClicked = true;
someLongTask()
.finally(function(){
$scope.hasClicked = false;
});
}
you can use the same to disable all other buttons.
If you're using a with href you may want to refer to this directive to prevent click on an href that is disabled (eatClickIf).
https://gist.github.com/bcabanes/677305a013660ae7d55e
I am using twitter boostrap to implement tooltip for my web app (twipsy)
My implementation is as follows:
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"click to see xxxx's muse"}
%img{src: "<%= avatar_url %>"}
The sequence of steps is as follows:
1) Hover on the avatar I want to click => tooltip appears above avatar (no issue)
2) Click on avatar to load a new page
3) New page is loaded but the tooltip shown in 1) did not disappear and just remain displayed on the newly loaded page.
Is there any additional parameters I need to set to ensure that the tooltip disappears in step 3)?
As tooltip toggles on mouseenter and leave when you click the element and DOM structure is replaced with new page the mouseleave on the avatar is never triggered as the element was removed programmatically while mouse was hovering over it.
To fix that you need to call the .tooltip('hide') method when you click the avatar.