Hello! It’s me again. This time I want to show the freeCodeCamp community the result of a question I had:
“Can I replace Libreoffice Impress, Microsoft PowerPoint or Google’s whatsitsname with HTML on my browser for presentations?”
After discovering Mozilla’s Summit presentation abouth MathML I wanted to try it myself!
My take on it at codepen.
I wanted to use accessKeys for direct access and CSS flex. Also there’s a little fade to get transitions here too. You can use the directional arrows for navigation. It doesn’t use JS.
I should certainly expand the CSS for the content, but I’m quite happy with this outline.
I am not sure what I am supposed to do when the page loads. I tried clicking on the arrow keys, but nothing seems to change. All I see is the following no matter which arrow key I click. I must be missing something obvious?
Thanks for your feedback and sorry for that! Are you using your keyboard’s arrows?
When the page loads there’s a out-of-page (position: absolute; left:-10%; ) radio input with the autofocus prop. After that and if focus is not lost you should be able to navigate using ← or → on your keyboard. If focus on the radio buttons is lost, you can regain focus using accessKeys (
Alt+Shift+1 through 3 on Firefox)
(I thought I had disabled the on-page next and prev buttons)
I am using the left and right arrow keys on the keyboard. I am using Chrome.
Would you mind clicking on “Bienvenidos”, pressing Tab once and trying the arrows a last time?
If I go through the steps in the last post, it works with the arrow keys, but that was definitely not clear from the original post. Not sure how a user would just know to click on the title, then click tab and then use the arrow keys.
Thanks for your time!
I didn’t know about the issue because it worked right away on my PC with Chromium 68 and Firefox 61+. I guess I ran afoul of good practices, I’m relying on bugs or got too hacky .
It might be something about the autofocus attribute (autofocus on w3schools).
Testing is very important.