Hello, this is my next project on Front End Libraries Projects https://codepen.io/indrasubagja/full/vYKoXJd. Feel free to give me some feedback. 
3 Likes
Your drum machine looks good @IndraSubagja. Something to revisit;
There’s no keyboard accessibility and you’ve removed keyboard focus.
1 Like
You can use a ref to initially give focus if you want. Although powering on or just mouse clicking on the page will give focus as well.
The responsiveness to changes in the view port width is good but it doesn’t handle changes to text size very well. Just increasing it a little, like 150%, and the buttons are overlapping the controls.
Keyboard accessibility is better, but I still can’t tell when the keyboard focus is on the power button or volume control.
Another suggestion, when the power is off don’t allow the buttons to look active (i.e. they should somehow look different so the user knows they don’t work).
2 Likes
@bbsmooth Thank you for the time. I’ve changed my code base on your feedbacks though I’m still not sure whether this is what you mean. Am I doing it right?
I can definitely see the keyboard focus on the power switch now, but still not on the volume control.
The text size issue has not changed. If you don’t know how to increase the text size, using Firefox go to the View->Zoom menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. It won’t take long until you see the problem.
@bbsmooth Um… is it because cross-browser issue? I’ve tested text-size until 300% and it works fine in chrome. And also the focus on volume control is quite visible.
For the volume control, have you tested this with Firefox? You should always test your projects with all of the major browsers because once in a while there will be differences.
For the zoom, I have a feeling you are using page zoom instead of text only zoom (there is a big difference). Did you try the zoom method I described above using Firefox? There are also extensions you can use to do text only zoom with Chrome/Edge (https://chrome.google.com/webstore/detail/zoom-text-only/jamhfhbppcmkgghlkeieococonlbppjg).
@bbsmooth Ok, I’ll tested it with firefox and try to fix it. And for zoom, yes I tested it with zoom text only. Zoom (ctrl + scroll), zoom text only (alt + =/-)
@bbsmooth Keyboard focus on volume should be visible now.
And when I try to fix zoom text only issue in mozilla, I realized that in mozilla, rem increased along with zoom text (while chrome doesn’t). So, I fixed that by changing all rem units into px. But, is this the right way? I mean, I’ve heard that overusing px is not recommended for responsive page.