[css-nav-1] Modify the explanation about focusableAreas

* Modify the method steps of the API
* Add an example of the API

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -483,14 +483,44 @@ The {{Element/getSpatialNavigationContainer()}} method must follow these steps:
 
 <div algorithm="focusableAreas steps">
 The {{Element/focusableAreas()}} method must follow these steps:
-1. Let <var>v</var> be <code>false</code>
-    if the argument's {{FocusableAreasOptions/mode}} attribute if present and equal to <code>"all"</code>,
+1. Let <var>visibleOnly</var> be <code>false</code>
+    if the argument's {{FocusableAreasOptions/mode}} attribute is present and equal to <code>'all'</code>,
     or <code>true</code> otherwise.
-4. Let <var>areas</var> be the result of <a>finding focusable areas</a> within the element with the visibleOnly argument set to <var>v</var>
+2. Let <var>areas</var> be the result of <a>finding focusable areas</a> within the element with the <var>visibleOnly</var> argument.
+3. Loop: If there is a <a>spatial navigation container</a> <var>container</var> among <var>areas</var>,
+    then add the result of <a>finding focusable areas</a> to <var>areas</var> within the <var>container</var>.
 5. Let <var>anchors</var> be a <a for=list>clone</a> of <var>areas</var>,
     with every <a>focusable area</a> which is not itself a <a>Node</a> replaced with its <a>DOM anchor</a>.
 6. Return <var>anchors</var>
+</div>
+
+<div class=example id=focusAreas-visible>
+    The following code shows how to get all the visible focusable elements in the current page using {{Element/focusableAreas()}}.
+    If the method finds a <a>spatial navigation container</a>, it recursively finds focusable areas inside it.
+	However, <code>'visible'</code> is given to the {{FocusableAreasOptions/mode}} attribute of this method, 
+    the focusable element which isn’t inside the <a>scrollport</a> is excluded from the result.
 
+    <pre><code highlight=markup>
+    &lt;body>
+        &lt;button class="box" style="top:100px; left:20px;">&lt;/button>
+        &lt;div class="container" style="left:110px; width:300px; height:200px; overflow-x: scroll;">
+            &lt;button class="box" style="top:78px; left:25px;">&lt;/button>
+            &lt;button class="box" style="top: 80px; left:150px;">&lt;/button>
+            &lt;button class="box" style="top: 80px; left:350px;">&lt;/button>
+        &lt;/div>
+    &lt;/body>
+    </code></pre>
+    <pre><code highlight=javascript>
+        const focusableAreas = document.body.focusableAreas({'mode': 'visible'});
+        focusableAreas && focusableAreas.forEach(focusable => {
+          focusable.style.outline = '5px solid red';
+        });
+    </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;"/>
+        <figcaption>Find all visible focusable areas inside the document.</figcaption>
+    </figure>
 </div>
 
 <div algorithm="spatialNavigationSearch steps">
@@ -863,11 +893,11 @@ and it cannot be scrolled at the same time.
     For the sake of keeping the description simple,
     this example assumes a UA where spatial navigation is triggered using arrow keys.
 
-		<figure>
-		    <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>
+    <figure>
+        <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>
 
     <table class="complex data">
         <thead>