JS-Calculator and odd behaviour of web-page on mobile

Hey there, fellow campers, I’ve recently completed my JavaScript calculator and I’d like to share it with you. Feedback are welcome.

I’ve used Math.js to handle the calculations and xstate to manage the application state.
I’m still learning it, but I find it very solid for state management; I’ll most probably use it for the last front-end development challenge too.

Back to my calculator page (which I deployed on Surge), there is a problem I can’t solve: on my mobile (iPhone SE 1st gen) I can only see the FCC test suite and the background, but not the actual calculator.

As for the other front-end challenges, I’ve created an optimized build folder using create-react-app, and then I’ve deployed it on Surge.

I was hoping someone among you could have an idea of what the issue was or at least some ideas to try.

Thank you!

.keyboard-grid #nine {
    grid-area: nine;
    outline: none;
}

Is there a particular reason you got rid of the keyboard focus outline on the buttons?

Not sure now that you ask…I thought that outline: none; was preventing some default browser-specific styling, which I didn’t like, but I see now that I was wrong; outline is set to none by default, and nothing changes if I remove that property.

Anyway, I had the chance to see my little app on a friend’s android mobile: no issues there, everything works as expected. Which makes this oddness even more odd.

Actually, you are correct, outline: none is preventing the default keyboard focus outline from appearing which is a major accessibility violation. If you remove it and then use the keyboard to access the buttons you will see the outline.

You should always have a keyboard focus indicator on any element that can receive focus. There are ways to do it so that the indicator only shows up when someone is using the keyboard (it won’t show up temporarily when you mouse click on it). I’ll leave it to you to research that. But you should not set the outline property to none unless you replace it with something else that indicates the element has focus.

1 Like

Got it now :+1:, thanks for pointing that out for me.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.