Add fullscreen button to examples #2274
Conversation
alice-i-cecile
added
C-Feature
Fair enough. I mostly used the chance to play around with graphite.rs - very cool, if a few rough corners. |
| href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}"> | ||
| <a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i | ||
| class="icon icon--chevron-left"></i> Back to examples</a> | ||
| <a id="fullscreen-button" class="example__fullscreen"><i class="icon icon--fullscreen"></i></a> |
There was a problem hiding this comment.
Immediate concern is that this is an improper use of the anchor element. Anchors are meant for navigation to other places, whether they be to files, other web pages, another section in the same page, or even to someones email address. For an action like initializing fullscreen we should be using a button element in an anchor elements stead. Why this matters is accessibility and semantics as text to speech tools will have little context with this anchor that is not an actual anchor, and so any accessibility functions with regards to ARIA and such you get with using the semantic element properly is lost.
- Should use
<button>and not<a> - Should have a name to give text to speech readers a description, "Enter fullscreen"
[…] </i>Enter fullscreen</a>. This can be hidden via CSS (immediate thought is div around text applying the CSS tricks mentioned in the article): https://www.a11yproject.com/posts/how-to-hide-content/ .
See this for more on button accessibility: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#accessibility
| ("github", 24), | ||
| ("pencil", 19), | ||
| ("times", 16), | ||
| ("fullscreen", 24), |
There was a problem hiding this comment.
Portrait Mode Phone Screenshot
Widescreen Computer Screenshot
In the screenshots above, the size of the fullscreen icon seems way to big on mobile, and maybe in an awkward place and or too big as well on PC. Not sure the exact solution, but it did pop out at me.
|
Oh and a third thing that just crossed my mind, we should have the cursor be a pointer over the button to enter full screen. https://developer.mozilla.org/en-US/docs/Web/CSS/cursor |
Sometimes, especially on smaller screens, it can be useful to Fullscreen an example to view it properly. This PR adds a simple Fullscreen button to the examples.
I've deliberately decided against making it hover over the example in a corner, as that would cover parts of the example and potentially interfere with UI placed in the same location.
I've made the icon myself, using https://graphite.rs. Should I also add the project file, as it allows parametric control to adjust the icon?