We Keep Coding

How to implement "Skip to content" accessibility functionality on React?

When we are using keyboard only and tab through the website, the first anchor link for "Skip to a content" is shown to skip the navigation and focus to the main content which makes the web page accessible. It is easy to add such a feature on multi-page website where there is full page reload and the focus for the page resets. I am looking similar behavior on the React. How can we implement such behavior on a Single page application built on React?

I disagree with Graham that you shouldn't need a skip to content link. In a SPA, when the user navigates to a new "page," the focus remains on the link that was pressed. Every time your user wants to navigate, they're going to have to go through the remaining nav menu to get at the content.
You could either move focus to the beginning of the document so they hit your 'skip to content' link each time (has its merits because it's most like multi-page apps which they're likely to be familiar with) or move it to the content body itself and save them a click (seems more streamlined to me, but might be unfamiliar to your users).
componentDidMount() {
setTimeout(() => document.getElementById('your-element-of-choice').focus(), 0)
}
I'm leaning toward the latter, but this will work either way you decide to implement it. Don't forget to set the tab index on the element you want to focus on to -1 as well.

You shouldn't need a skip to content link on a SPA other than the one you already have (for first time load for return visitors).
Skip to content is for when you click a link to a new page, it helps avoid having to listen to the menu every time you navigate.
With a SPA that isn't an issue as everything is done via AJAX, when I click a link a region on the page will get updated with new content.
All you need to do is move focus to the region that is being updated from the menu item.
Certain screen readers will need explicit ARIA Live Regions in order to register the new content so make sure you test it with a screen reader.
Where you will run into accessibility problems pretty fast in SPAs are when you start thinking about delays.
What happens if I click that link and the page takes 3 seconds to load?
What happens if the page doesn't load at all?
Those are your bigger challenges with a SPA.

How to properly implement loading bar for loading urls?

I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?

I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.

Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.

Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.

Javascript one page dynamic div for mini pages

I have a one page website.
I have an area of the screen that is a div.
I want to be able to show different "mini" pages within this div based
on if the user clicks a button.
The contents of the div are html,javascript and images.
What is the best way to solve this?
I want it to be very responsive and fast, without re-loading the page itself.
Thank you

angular framework is great for single page apps. You can use the default ngRoute or the angular-ui-router to achieve the content swapping you want.

Smooth slide transition between two separate html files

is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?

You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>

Go back button in single-page webapp

I'm bulding my first WebApp. I've got a small navigation bar in the head where a back button should be placed. The Pages of the app are all placed in one document so the div's are set to
<div id="page_1" class="page" style="display:none">
and will be shown by clicking on a link
onclick="show('Page_dash');
Now i want to have a back button which goes back to the last shown page. I've tried this
onclick="history.go(-1);
but it's not working because there is only one page which contains all pages so the history.go(-1) goes to the last visited homepage. So i'm looking for a good, fast and simple solution!
thanks

In order to create an effective single page application (SPA), you will need to implement a method to track history that appears traditional to your end users. There are a few different techniques for this, but as a developer of enterprise-level single page applications, I highly recommend using the url hash method.
This technique allows your end users to bookmark specific "pages" in your single page app, along with using their browser's back button to return to the previous page. End users can become extremely frustrated with a single page app if they try to return to the previous page using their browser's back button, and find that they are returned to Google, or whatever site they visited before yours.
Here is some additional reading on the subject: URL Hash Techniques