Skip to content

[css-nav-1] Fix spurious / in <img> #10630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frivoal merged 1 commit into from
Jul 29, 2024
Merged

[css-nav-1] Fix spurious / in <img> #10630

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions css-nav-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ If the user presses the <code class=key>Tab</code> key to move focus around the
they need to press the key many times to reach the desired image element.

<figure>
<img alt="When elements are laid out in a grid pattern, spatial navigation makes it much easier to predict and control where focus should move to." src="images/gallery-app.png" style="width: 500px;"/>
<img alt="When elements are laid out in a grid pattern, spatial navigation makes it much easier to predict and control where focus should move to." src="images/gallery-app.png" style="width: 500px;">
<figcaption>Photo gallery application example using a grid layout</figcaption>
</figure>

Expand Down Expand Up @@ -275,8 +275,8 @@ and [[#declarative]] for details about the CSS properties.
this example assumes a user agent where spatial navigation is triggered using arrow keys.

<figure>
<img alt="" src="images/spatnav-scroll-visible-1.png" style="width: 200px;"/>
<img alt="" src="images/spatnav-scroll-visible-2.png" style="width: 200px;"/>
<img alt="" src="images/spatnav-scroll-visible-1.png" style="width: 200px;">
<img alt="" src="images/spatnav-scroll-visible-2.png" style="width: 200px;">
<figcaption>Moving focus to the visible element in the <a>spatial navigation container</a>.</figcaption>
</figure>

Expand All @@ -285,10 +285,10 @@ and [[#declarative]] for details about the CSS properties.
"Box 3" without scrolling because "Box 3" is visible in the <a>scrollport</a> of the <a>spatial navigation container</a>.

<figure>
<img alt="" src="images/spatnav-scroll-invisible-1.png" style="width: 160px;"/>
<img alt="" src="images/spatnav-scroll-invisible-2.png" style="width: 160px;"/>
<img alt="" src="images/spatnav-scroll-invisible-3.png" style="width: 160px;"/>
<img alt="" src="images/spatnav-scroll-invisible-4.png" style="width: 160px;"/>
<img alt="" src="images/spatnav-scroll-invisible-1.png" style="width: 160px;">
<img alt="" src="images/spatnav-scroll-invisible-2.png" style="width: 160px;">
<img alt="" src="images/spatnav-scroll-invisible-3.png" style="width: 160px;">
<img alt="" src="images/spatnav-scroll-invisible-4.png" style="width: 160px;">
<figcaption>Moving focus to the hidden element in the <a>spatial navigation container</a>.</figcaption>
</figure>

Expand Down Expand Up @@ -551,7 +551,7 @@ the user agent must run the steps described below:
</code></pre>
The figure below is the result of this code.
<figure>
<img alt="An image about focusableAreas()" src="images/focusableareas-visible-example.png" style="width: 450px;"/>
<img alt="An image about focusableAreas()" src="images/focusableareas-visible-example.png" style="width: 450px;">
<figcaption>Find all visible focusable areas inside the document.</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -782,7 +782,7 @@ the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-leve
this example assumes a user agent where spatial navigation is triggered using arrow keys.

<figure>
<img alt="An image about navnotarget" src="images/navnotarget-example-1.png" style="width: 200px;"/>
<img alt="An image about navnotarget" src="images/navnotarget-example-1.png" style="width: 200px;">
<figcaption>Moving focus when there isn't any candidate in the
<a>scroll container</a>.</figcaption>
</figure>
Expand Down Expand Up @@ -838,7 +838,7 @@ the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-leve
The result of this example is the figure as follows:

<figure>
<img alt="An image of the result about navnotarget" src="images/navnotarget-example-2.png" style="width: 200px;"/>
<img alt="An image of the result about navnotarget" src="images/navnotarget-example-2.png" style="width: 200px;">
<figcaption>The result of moving focus when there isn't any candidate in the <a>scrollport</a>
and <a>scroll container</a> cannot be scrolled.</figcaption>
</figure>
Expand Down Expand Up @@ -1308,7 +1308,7 @@ The meaning of each term is as follows:
of the <var>reference</var> and the <var>candidate</var>

<figure>
<img alt="" src="images/projected_overlap.png" style="width: 500px;"/>
<img alt="" src="images/projected_overlap.png" style="width: 500px;">
<figcaption>projectedOverlap</figcaption>
</figure>

Expand Down Expand Up @@ -1525,7 +1525,7 @@ Inside the container, there is an element which is out of the view within a <a>s
Pressing the down arrow key moves the focus directly to it without scrolling manually.

<figure>
<img alt="" src="images/spatnav-action.png" style="width: 500px;"/>
<img alt="" src="images/spatnav-action.png" style="width: 500px;">
<figcaption>Moving focus from "Box 2" to "Box 3" without manually scrolling</figcaption>
</figure>

Expand Down Expand Up @@ -1603,7 +1603,7 @@ NOTE: These values are negotiated with the users' preferences which seems natura
This example shows how the focus moves differently by the value of <code highlight=css>spatial-navigation-function</code>.

<figure>
<img alt="" src="images/spatnav-function.png" style="width: 500px;"/>
<img alt="" src="images/spatnav-function.png" style="width: 500px;">
<figcaption>Moving focus from "A" to one of the candidate elements</figcaption>
</figure>

Expand Down