React.js project feedback

Hi, I would appreciate any feedback.

https://mysterious-citadel-33783.herokuapp.com/

Unfortunately it works only in Firefox properly in Chrome it has a problem. The search does not work when you change at Bible version but not change the search term. Any suggestion to solve this problem is welcomed.

I’ll offer some suggested fixes:

  • The black on green button text and the pink on black links in the footer do not have enough color contrast to be accessible. You can check for color accessibility at https://webaim.org/resources/contrastchecker/. Also, the white text in the footer is not bright enough to be accessible.
  • The <input> and <select> do not have a <label>.
  • Instead of <div class="header"> why not just use a <header> tag? Same for the footer. The main content on your page should be wrapped in a <main>.
  • The “Previous page” button should be disabled when you are looking at the first page and the “Next page” button should be disabled when you are looking at the last page. Also, I think you should give the user some way to jump to a specific page without having to click the previous/next buttons.
  • Speaking of the previous/next buttons, I think it would look better if they were on a line by themselves and if they looked a little more uniform (right now the previous button is twice as tall as the next button).
  • Semantically, I think you might want to mark up the search results with something other than divs. I think maybe the verse reference should be a header (<h2> in this case). I might even be tempted to put these in a list since you are sort of returning a list of verses. And further I might even number them since you do refer to them by number in the footer (i.e. In the footer you refer to them as verses: M - N).