From cdebc3de72b0b5a30c768f7302541efb8ed27ca3 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Fri, 11 Sep 2020 16:16:53 -0700
Subject: [PATCH 01/21] Update focus-appearance-minimum.html

Rewording of intro and all bullets except the last one.
---
 guidelines/sc/22/focus-appearance-minimum.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index d36efd203c..98f1353090 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -5,11 +5,11 @@ <h4>Focus Appearance (Minimum)</h4>
     <p class="conformance-level">AA</p>
 	<p class="change">New</p>
     
-    <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
+    <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
-        <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 1 <a>CSS pixel</a> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.</li>
-        <li><strong>Change of contrast:</strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.</li>
-        <li><strong>Adjacent contrast:</strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
+        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as the area covered by a 1 <a>CSS pixel</a> border of the focused control, or has a width of at least 8 CSS pixels along the shortest side of the element.</li>
+        <li><strong>Change of contrast:</strong> The pixels making up the focus indicator achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
+        <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
     </ul>
     <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>

From 81c414cd1ac6e4567c12206217a6d3b0ef40ed9b Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 14 Sep 2020 12:16:14 -0700
Subject: [PATCH 02/21] Minor edits and accompanying definition changes

Added notion of "perimeter" for clarity.
Made perimeter a defined term that includes a calculation
Revised 'focus indication area' to 'focus indicator', although I believe neither is needed, as the revised SC is currently proposed.
---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 guidelines/terms/22/focus-indication-area.html | 7 -------
 guidelines/terms/22/focus-indicator.html       | 7 +++++++
 guidelines/terms/22/perimeter.html             | 7 +++++++
 4 files changed, 15 insertions(+), 8 deletions(-)
 delete mode 100644 guidelines/terms/22/focus-indication-area.html
 create mode 100644 guidelines/terms/22/focus-indicator.html
 create mode 100644 guidelines/terms/22/perimeter.html

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index 98f1353090..bb87e50c1c 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -7,7 +7,7 @@ <h4>Focus Appearance (Minimum)</h4>
     
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
-        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as the area covered by a 1 <a>CSS pixel</a> border of the focused control, or has a width of at least 8 CSS pixels along the shortest side of the element.</li>
+        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as the perimeter of the focused control, as measured by a 1 <a>CSS pixel</a> border, or has a width of at least 8 CSS pixels along the shortest side of the element.</li>
         <li><strong>Change of contrast:</strong> The pixels making up the focus indicator achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
         <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
diff --git a/guidelines/terms/22/focus-indication-area.html b/guidelines/terms/22/focus-indication-area.html
deleted file mode 100644
index 0403f47654..0000000000
--- a/guidelines/terms/22/focus-indication-area.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<dt class="new"><dfn>Focus indication area</dfn></dt>
-<dd class="new">
-	<p class="change">New</p>	
-   <p>the pixels that change between the focused and unfocused states of a <a>User Interface Component</a>
-    </p>
-   				
-</dd>
\ No newline at end of file
diff --git a/guidelines/terms/22/focus-indicator.html b/guidelines/terms/22/focus-indicator.html
new file mode 100644
index 0000000000..5bcd45d0d7
--- /dev/null
+++ b/guidelines/terms/22/focus-indicator.html
@@ -0,0 +1,7 @@
+<dt class="new"><dfn>Focus indicator</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>	
+   <p>The pixels that are changed to visually indicate when a user interface component is in a focused state.
+    </p>
+   				
+</dd>
\ No newline at end of file
diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html
new file mode 100644
index 0000000000..ffb7a1812e
--- /dev/null
+++ b/guidelines/terms/22/perimeter.html
@@ -0,0 +1,7 @@
+<dt class="new"><dfn>Perimeter</dfn></dt>
+<dd class="new">
+	<p class="change">New</p>	
+   <p>the continuous line forming the boundary of a shape. The perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em>, where <em>h</em> is the height and <em>w</em> is the width. The perimeter of a circle is 2&Pi;<em>r</em>.
+    </p>
+   				
+</dd>
\ No newline at end of file

From ac0d89665ebc2e59b57380678e3f638be98ddec9 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Tue, 27 Oct 2020 08:33:49 -0700
Subject: [PATCH 03/21] Update focus-appearance-minimum.html

wording to accommodate discussion
---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index bb87e50c1c..5f216bb4a9 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -7,7 +7,7 @@ <h4>Focus Appearance (Minimum)</h4>
     
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
-        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as the perimeter of the focused control, as measured by a 1 <a>CSS pixel</a> border, or has a width of at least 8 CSS pixels along the shortest side of the element.</li>
+        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as as a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
         <li><strong>Change of contrast:</strong> The pixels making up the focus indicator achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
         <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>

From 0708f699a0cfc3073f3ddc9720aed34e4606d28c Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Tue, 27 Oct 2020 08:36:11 -0700
Subject: [PATCH 04/21] Update focus-appearance-minimum.html

fix area
---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index 5f216bb4a9..308ef553eb 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -7,7 +7,7 @@ <h4>Focus Appearance (Minimum)</h4>
     
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
-        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as as a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
+        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
         <li><strong>Change of contrast:</strong> The pixels making up the focus indicator achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
         <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>

From 7a2cabb2e95164fc9b87e5f72084b7d44fccd415 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Tue, 27 Oct 2020 08:37:52 -0700
Subject: [PATCH 05/21] Update focus-appearance-minimum.html

updated second bullet
---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index 308ef553eb..3d7e0fb0d3 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -8,7 +8,7 @@ <h4>Focus Appearance (Minimum)</h4>
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
         <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
-        <li><strong>Change of contrast:</strong> The pixels making up the focus indicator achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
+        <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
         <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
     </ul>

From 0064c9003410d5e4ed2cfd1a70a4f805dbbe9009 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 11:08:20 -0800
Subject: [PATCH 06/21] Update focus-appearance-minimum.html

Initial changes to align the wording of the SC in the Understanding document with the new changes from last week. Then began some cleanup of the document, and began focusing on "Relation to non-text contrast"
---
 .../22/focus-appearance-minimum.html          | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index b985bbfe10..228fbb0e31 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -20,18 +20,18 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         <blockquote>
             <p class="conformance-level">AA</p>
         
-            <p>For the keyboard focus indicator of each User Interface Component, all of the following are true:</p>
+            <p>When user interface components receive keyboard focus, all of the following are true:</p>
             <ul>
-                <li><strong>Minimum area:</strong> The <a>focus indication area</a> is greater than or equal to a 1 <a>CSS pixel</a> border of the focused control, or has a thickness of at least 8 CSS pixels along the shortest side of the element.</li>
-                <li><strong>Change of contrast:</strong> The color change for the focus indication area has a contrast ratio of at least 3:1 with the colors of the unfocused state.</li>
-                <li><strong>Adjacent contrast:</strong> The focus indication area has a contrast ratio of at least 3:1 against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.</li>
-                <li><strong>Unobscured:</strong> The item with focus is not entirely hidden by author-created content</li>
+                <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
+                <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states.</li>
+                <li><strong>Adjacent contrast:</strong> TThe focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
+                <li><strong>Unobscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
             </ul>
             <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
             <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>
-            <dt class="new"><dfn>Focus indication area</dfn></dt>
+            <dt class="new"><dfn>Focus indicator</dfn></dt>
             <dd class="new">
-	            <p>the pixels that change between the focused and unfocused states of a <a>User Interface Component</a></p>   				
+	            <p>The pixels that are changed to visually indicate when a user interface component is in a focused state.</p>   				
             </dd>
         </blockquote>
      </section>
@@ -41,24 +41,24 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         <h2>Intent of Focus Appearance (Minimum)</h2>
 
 
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="../20/focus-visible.html">SC 2.4.7 focus visible</a> and defines a minimum level of visibility.</p>
+        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">SC 2.4.7 Focus Visible</a> and defines a minimum level of visibility. Where Focus Visible was </p>
 
-        <p>For sighted people with mobility impairments who use a keyboard-like device (e.g. a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
+        <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
             
-        <p>A keyboard focus indicator can take different forms, this success criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
+        <p>A keyboard focus indicator can take different forms; this success criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
 
         <figure id="focus-indicator-strong">
             <img src="img/focus-indicator-strong.png" alt="Three links on a white background with the middle one encompassed in a thick black border." width="250" />
-            <figcaption> A strong indicator around a link.</figcaption>
+            <figcaption> A strong indicator around the middle example link.</figcaption>
         </figure>
             
         <section id="keyboard-focus">
             <h3>Keyboard focus</h3>
-            <p>The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard operable interface, the keyboard focus can be moved around the interface in order to interact with different elements. Whichever element is being interacted with has focus.</p>
+            <p>The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard-operable interface, the keyboard focus can be moved around the interface in order to interact with different elements. Whichever element is being interacted with has focus.</p>
 
-            <p>In web pages some components may receive focus as a user presses the tab key to move to that component and then use the arrow keys to select an option (e.g. tabs, menu items). The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow-down to a menu item, it is the menu item that is in focus as pressing enter would activate the menu item.</p>
+            <p>In web pages some components may receive focus as a user presses the Tab key to move to that component and then use the arrow keys to select an option (e.g., tabs, menu items). The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow-down to a menu item, it is the menu item that is in focus, as pressing Enter would activate the menu item.</p>
 
-            <p>Some elements can take focus (such as the target of a skip link), however, it is only when the element is operable by keyboard controls that this criterion applies.</p>
+            <p>Some non-operable elements can take focus (such as when a heading is the target of a skip link); however, it is only when the element with focus is operable by keyboard that this criterion applies.</p>
         </section>
         <section id="size-of-indicator">
             <h3>Minimum area</h3>
@@ -202,10 +202,10 @@ <h3>Not fully obscured</h3>
 
         </section>
         <section id="relation-non-text-color-contrast">
-            <h3>Relation to non-text color contrast</h3>
-            <p><a href="non-text-contrasast" class="sc">Success Criterion 1.4.11 Non-text contrast</a> requires that a UI component maintains contrast across it’s states, including when focused. For example, a checkbox must contrast with its adjacent colors, and the check within the checkbox must contrast with its adjacent colors. </p>
+            <h3>Relationship to non-text contrast</h3>
+            <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it has does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does require contrast <em>between</em> the UI component's focused and non-focused states. Merely that in each state it contrasts against the adjacent background. </p>
             
-            <p>Focus-visible (enhanced) requires that the change of color contrast for the focus indicator (only) has contrast compared to the non-focused component.</p>
+            <p>Focus Appearance (Minimum) requires that the focused and unfocused states can be distinguishable from each other. It does this by requiring sufficient differences in contrast between the appearance of a component when focused and when not focused.</p>
             
             <figure id="focus-indicator-checkboxs">
                 <img src="img/focus-indicator-checkboxs.png" alt="Four checkboxes. Unchecked is a plain box. Focused has a circular line outside. Checked is dark green with a white tick. Focused and checked also has a dark green circle around it." width="400" />
@@ -214,7 +214,9 @@ <h3>Relation to non-text color contrast</h3>
            
             <p>In the example above:</p>
             <ul>
-                <li>The checkbox has sufficient contrast with its adjacent background in default, focused, checked, and checked-focused states; </li>
+                <li>The dark square outline of the checkbox has sufficient contrast with its adjacent background in the default state (meeting 1.4.11 Non-text Contrast)</li>
+                <li>When the checkbox is focused, a ring appears around it. The ring contrasts against the adjacent page background sufficiently (meeting 1.4.11). The size of the ring's outline is larger enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading, assuring that both the inner and outer edges of the ring outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.
+                    pixels used to draw the circle contrast sufficiently between their  focused, checked, and checked-focused states; </li>
                 <li>The check (tick) within the checkbox contrasts with its adjacent color; </li>
                 <li>The circular outline around the checkbox that indicates focus has a sufficient <em>change</em> of contrast.</li>
             </ul>

From f37577d733177be45afeb5b92ef89be2dafc24e8 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 14:03:52 -0800
Subject: [PATCH 07/21] Update focus-appearance-minimum.html

Updated the description of the 2 images in the Relationship to Non-text Contrast section
---
 .../22/focus-appearance-minimum.html          | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 228fbb0e31..e300149403 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -202,7 +202,7 @@ <h3>Not fully obscured</h3>
 
         </section>
         <section id="relation-non-text-color-contrast">
-            <h3>Relationship to non-text contrast</h3>
+            <h3>Relationship to Non-text Contrast</h3>
             <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it has does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does require contrast <em>between</em> the UI component's focused and non-focused states. Merely that in each state it contrasts against the adjacent background. </p>
             
             <p>Focus Appearance (Minimum) requires that the focused and unfocused states can be distinguishable from each other. It does this by requiring sufficient differences in contrast between the appearance of a component when focused and when not focused.</p>
@@ -214,11 +214,10 @@ <h3>Relationship to non-text contrast</h3>
            
             <p>In the example above:</p>
             <ul>
-                <li>The dark square outline of the checkbox has sufficient contrast with its adjacent background in the default state (meeting 1.4.11 Non-text Contrast)</li>
-                <li>When the checkbox is focused, a ring appears around it. The ring contrasts against the adjacent page background sufficiently (meeting 1.4.11). The size of the ring's outline is larger enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading, assuring that both the inner and outer edges of the ring outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.
-                    pixels used to draw the circle contrast sufficiently between their  focused, checked, and checked-focused states; </li>
-                <li>The check (tick) within the checkbox contrasts with its adjacent color; </li>
-                <li>The circular outline around the checkbox that indicates focus has a sufficient <em>change</em> of contrast.</li>
+                <li>The dark square outline of the checkbox has sufficient contrast with its adjacent light background in the default state (meeting 1.4.11 Non-text Contrast).</li>
+                <li>When the checkbox receives focus in the second image, a grey ring appears around it. The ring contrasts against the light page background sufficiently (still meeting 1.4.11). The size of the ring's dark outline is larger enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading (another more subtle indicator of focus), so both the inner and outer edges of the ring's outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.</li>
+                <li>In the third image, the checked state is indicated by two visual changes. The checkbox changes color from gray to a greenish teal, and the checkbox is entirely filled in except the outline of a white tick mark. The contrast between the white tick mark and the teal color of the checkbox is sufficient to pass the 1.4.11 Non-text Contrast requirement to identify its (checked) state.</li>
+                <li>The fourth image shows the checkmark both checked and focused. The component still uses a ring to indicate focus. The ring's color has changed, but it still contrasts against the light page background and, on its adjacent inner edge, against the shading. (The color difference between the grey of the unchecked box and the teal of the checked version is irrelevant to the assessment. Since the tick mark indicates the checked state, the color change is just a secondary visual effect.)</li>
             </ul>
                     
             <figure id="focus-indicator-checked">
@@ -226,7 +225,13 @@ <h3>Relationship to non-text contrast</h3>
                 <figcaption>A default checkbox and a focused checkbox. </figcaption>
             </figure>
 
-            <p>The contrast of the default checkbox passes 1.4.11 because the dark border and white background have a contrast ratio greater than 3:1. The 2px dark blue focus outline passes Focus Appearance (Minimum) because the change of contrast is greater than 3:1 with the white background. The component as a whole maintains contrast with the white background so continues to pass 1.4.11.</p>
+            <p>The contrast of the default checkbox passes 1.4.11 because the black border and white background have a contrast ratio greater than 3:1. When the checkbox recieves focus, the dark blue focus indicator passes Focus Appearance (Minimum) because:
+                <ul>
+                    <li>its thick blue border has a sufficient <strong>Minimum area</strong>.</li>
+                    <li>the pixels making up the blue focus indicator have a sufficient <strong>Change of contrast</strong>from their white color in the unfocused state</li>
+                    <li>the blue focus indicator, although not contrasting with the black checkbox border, has a thickness of 2 CSS pixels and so meets <strong>Adjacent contrast</strong>.</li>
+                </ul>
+                The focused state contrasts with the white background, so the component continues to pass 1.4.11.</p>
 
         </section>
 

From 028d51d5853a327d6a5b448ddf97f190c3072782 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 14:29:58 -0800
Subject: [PATCH 08/21] Update focus-appearance-minimum.html

Working through rewrites of the document for clarity and accuracy.
---
 understanding/22/focus-appearance-minimum.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index e300149403..aa62acefa8 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -41,7 +41,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         <h2>Intent of Focus Appearance (Minimum)</h2>
 
 
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">SC 2.4.7 Focus Visible</a> and defines a minimum level of visibility. Where Focus Visible was </p>
+        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely required a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast required a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
 
         <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
             
@@ -49,21 +49,21 @@ <h2>Intent of Focus Appearance (Minimum)</h2>
 
         <figure id="focus-indicator-strong">
             <img src="img/focus-indicator-strong.png" alt="Three links on a white background with the middle one encompassed in a thick black border." width="250" />
-            <figcaption> A strong indicator around the middle example link.</figcaption>
+            <figcaption> The thick outline around the middle example link provides a strong indicator of focus.</figcaption>
         </figure>
             
         <section id="keyboard-focus">
             <h3>Keyboard focus</h3>
             <p>The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard-operable interface, the keyboard focus can be moved around the interface in order to interact with different elements. Whichever element is being interacted with has focus.</p>
 
-            <p>In web pages some components may receive focus as a user presses the Tab key to move to that component and then use the arrow keys to select an option (e.g., tabs, menu items). The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow-down to a menu item, it is the menu item that is in focus, as pressing Enter would activate the menu item.</p>
+            <p>Some components have sub-components that can take focus, such as the menu items on a menu. The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow down to a menu item, it is the menu item that is in focus; pressing Enter would activate the menu item.</p>
 
-            <p>Some non-operable elements can take focus (such as when a heading is the target of a skip link); however, it is only when the element with focus is operable by keyboard that this criterion applies.</p>
+            <p>Some non-operable elements can take focus (such as when a heading is the target of a skip link); however, it is only when the element with focus is operable by keyboard that this Success Criterion applies.</p>
         </section>
         <section id="size-of-indicator">
             <h3>Minimum area</h3>
 
-            <p>The bigger the visible change, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element, or significantly changing the background color.</p>
+            <p>The bigger the visible change when an item receives focus, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element.</p>
 
             <p class="note">A border is the perimeter of the control, and defines its shape. A border is not a reference to the CSS property of the same name.</p>
 
@@ -85,7 +85,7 @@ <h3>Minimum area</h3>
                 <figcaption> The thick (3px) yellow underline is almost as long as the longest edge, 80px x 3 meets the requirement of 240px.</figcaption>
             </figure>
 
-            <p>If controls change size across different variations of a page (e.g. in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.</p>
+            <p>If controls change size across different variations of a page (e.g., in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.</p>
 
             <p>The success criterion includes an alternative size measure of "a thickness of at least 8 CSS pixels along the shortest side of the element". Smaller but very thick indicators can be very visible.</p>
 

From ff8691aae96c81304bf59ca4bfd387fa3beb4f4f Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 14:42:15 -0800
Subject: [PATCH 09/21] Update focus-appearance-minimum.html

Added note on user agent.
---
 understanding/22/focus-appearance-minimum.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index aa62acefa8..042101a681 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -29,6 +29,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
             </ul>
             <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
             <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>
+            <p class="note">The default user agent focus indicator is not excepted from the requirements of Focus Appearance (Minimum). If a user agent implementation fails to meet these requirements, any page relying on that user agent would fail.</p>
             <dt class="new"><dfn>Focus indicator</dfn></dt>
             <dd class="new">
 	            <p>The pixels that are changed to visually indicate when a user interface component is in a focused state.</p>   				
@@ -41,7 +42,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         <h2>Intent of Focus Appearance (Minimum)</h2>
 
 
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely required a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast required a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
+        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
 
         <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
             

From 2e72dc31eee6c2d8fabd7db0ad598e81ce174523 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 14:42:48 -0800
Subject: [PATCH 10/21] Update focus-appearance-minimum.html

made Success Criterion capitalized
---
 understanding/22/focus-appearance-minimum.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 042101a681..d7d00df296 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -42,11 +42,11 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         <h2>Intent of Focus Appearance (Minimum)</h2>
 
 
-        <p>The purpose of this success criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
+        <p>The purpose of this Success Criterion is to ensure a keyboard focus indicator is clearly visible and discernible. This criterion is closely related to <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, 2.4.11 defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, 2.4.11 requires sufficient contrast <em>between</em> the focused and unfocused states.</p>
 
         <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
             
-        <p>A keyboard focus indicator can take different forms; this success criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
+        <p>A keyboard focus indicator can take different forms; this Success Criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
 
         <figure id="focus-indicator-strong">
             <img src="img/focus-indicator-strong.png" alt="Three links on a white background with the middle one encompassed in a thick black border." width="250" />
@@ -88,7 +88,7 @@ <h3>Minimum area</h3>
 
             <p>If controls change size across different variations of a page (e.g., in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.</p>
 
-            <p>The success criterion includes an alternative size measure of "a thickness of at least 8 CSS pixels along the shortest side of the element". Smaller but very thick indicators can be very visible.</p>
+            <p>The Success Criterion includes an alternative size measure of "a thickness of at least 8 CSS pixels along the shortest side of the element". Smaller but very thick indicators can be very visible.</p>
 
             <figure id="focus-indicator-shortside">
                 <img src="img/focus-indicator-thick-short-side.png" alt="Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text." width="284" />
@@ -163,11 +163,11 @@ <h3>Change of contrast</h3>
             </figure>        
 
                     
-            <p>Text and non-text contrast measures use adjacent colors, this success criterion measures the <em>change</em> in color between non-focused and focused states.</p>
+            <p>Text and non-text contrast measures use adjacent colors, this Success Criterion measures the <em>change</em> in color between non-focused and focused states.</p>
 
             <figure id="focus-indicator-non-contrast">
                 <img src="img/focus-indicator-non-contrast.png" alt="Three buttons with light background and dark border on a white background. The middle button has a light grey outline." width="250" />
-                <figcaption>The second link has a light-grey (#ccc) focus outline which <strong>fails</strong> this success criterion because the change from white-background to light-grey outline does not meet 3:1.</figcaption>
+                <figcaption>The second link has a light-grey (#ccc) focus outline which <strong>fails</strong> this Success Criterion because the change from white-background to light-grey outline does not meet 3:1.</figcaption>
             </figure>
 
             <p>It is possible to use visual patterns such as strips switching places to disguise a change of focus indicator. This is not considered a visible indicator.</p>
@@ -180,7 +180,7 @@ <h3>Adjacent contrast</h3>
 
             <figure id="focus-indicator-thin-non-contrast">
                 <img src="img/focus-indicator-thin-non-contrast.png" alt="Three dark buttons, the middle one appears very slightly larger due to a thin dark outline." width="255" />
-                <figcaption>Adding a 1px dark outline around a dark button does not differentiate it, this example <strong>fails</strong> the success criterion.</figcaption>
+                <figcaption>Adding a 1px dark outline around a dark button does not differentiate it, this example <strong>fails</strong> the Success Criterion.</figcaption>
             </figure>
                     
             <p>The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors (including the component), or to be separated from the component, or to be at least 2px thick.</p>

From 2edb78268c59e1df353ea2387f7609a1fff7573e Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 15:00:02 -0800
Subject: [PATCH 11/21] Update focus-appearance-minimum.html

Removed the note on 'border' since it is no longer part of the normative text, and it no longer seemed necessary.
---
 understanding/22/focus-appearance-minimum.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index d7d00df296..8bfbc6bcf3 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -22,7 +22,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         
             <p>When user interface components receive keyboard focus, all of the following are true:</p>
             <ul>
-                <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
+                <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
                 <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states.</li>
                 <li><strong>Adjacent contrast:</strong> TThe focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
                 <li><strong>Unobscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
@@ -46,7 +46,7 @@ <h2>Intent of Focus Appearance (Minimum)</h2>
 
         <p>For sighted people with mobility impairments who use a keyboard-like device (e.g., a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.</p>
             
-        <p>A keyboard focus indicator can take different forms; this Success Criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.</p>
+        <p>A keyboard focus indicator can take different forms; this Success Criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline that contrasts with the background would pass this criterion.</p>
 
         <figure id="focus-indicator-strong">
             <img src="img/focus-indicator-strong.png" alt="Three links on a white background with the middle one encompassed in a thick black border." width="250" />
@@ -66,9 +66,9 @@ <h3>Minimum area</h3>
 
             <p>The bigger the visible change when an item receives focus, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element.</p>
 
-            <p class="note">A border is the perimeter of the control, and defines its shape. A border is not a reference to the CSS property of the same name.</p>
+            <p>The Success Criterion defines a minimum area using a calculation for perimeter. It also provides an alternative way of meeting a minimum area for focus indicators where the design relies on a smaller but very thick indicator.</p>
 
-            <p>The minimum size of the focus indicator must be at least the area taken by a 1 CSS pixel border around the element. The indicator does not have to be a border, but the size of the area must be at least that size. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels.</p>
+            <p>The minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control with focus. The indicator does not have to be a border, but the indicator's area must be at least as large. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels.</p>
 
             <p class="note">A <a>CSS pixel</a> is what developers use in CSS declarations like “width: 200px”, it is device-independent and not to be confused with device pixels which vary depending on the physical pixel density. <br />
                 The rest of this document notates CSS pixels as "px".

From 224714eb1423f8d9a218a32e58e88cc7f741cf8d Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 15:01:20 -0800
Subject: [PATCH 12/21] Update focus-appearance-minimum.html

Fixing typo in most recent language of SC.
---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index 3d7e0fb0d3..7d0c94c557 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -7,7 +7,7 @@ <h4>Focus Appearance (Minimum)</h4>
     
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
-        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
+        <li><strong>Minimum area:</strong> The area of the focus indicator is at least as large as the area of a 1 <a>CSS pixel</a> thick perimeter of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>
         <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states. </li>
         <li><strong>Adjacent contrast:</strong> The focus indicator contrasts at least 3:1 against all adjacent colors, or has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>

From 91b64e3bdf764458d7753b96f1f3852affcbbd21 Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 2 Nov 2020 15:17:26 -0800
Subject: [PATCH 13/21] Update focus-appearance-minimum.html

Made changes up to the Benefits section
---
 understanding/22/focus-appearance-minimum.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 8bfbc6bcf3..797c98062c 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -92,7 +92,7 @@ <h3>Minimum area</h3>
 
             <figure id="focus-indicator-shortside">
                 <img src="img/focus-indicator-thick-short-side.png" alt="Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text." width="284" />
-                <figcaption>The thick (over 8px) yellow block on the left is along the short-side, but very thick.</figcaption>
+                <figcaption>The thick (over 8px) yellow block on the left is along the short side, but very thick.</figcaption>
             </figure>
 
             <p>Typical focus indicators:</p>
@@ -114,7 +114,7 @@ <h4>Unusual shapes and gradients</h4>
                     <figcaption>A circular button in the default state, and then with a focus indicator.</figcaption>
                 </figure>
 
-                <p>If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it helps if the contrasting area is obviously quite large.</p>
+                <p>If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it obviously helps if the contrasting area is quite large.</p>
 
                 <figure id="focus-indicator-star-shadow">
                     <img src="img/focus-indicator-star-shadow.png" alt="Two yellow star symbols, the second has a dark drop-shadow." width="400" />
@@ -163,7 +163,7 @@ <h3>Change of contrast</h3>
             </figure>        
 
                     
-            <p>Text and non-text contrast measures use adjacent colors, this Success Criterion measures the <em>change</em> in color between non-focused and focused states.</p>
+            <p>Text and non-text contrast measures use adjacent colors; this Success Criterion measures the <em>change</em> in color between non-focused and focused states.</p>
 
             <figure id="focus-indicator-non-contrast">
                 <img src="img/focus-indicator-non-contrast.png" alt="Three buttons with light background and dark border on a white background. The middle button has a light grey outline." width="250" />
@@ -180,7 +180,7 @@ <h3>Adjacent contrast</h3>
 
             <figure id="focus-indicator-thin-non-contrast">
                 <img src="img/focus-indicator-thin-non-contrast.png" alt="Three dark buttons, the middle one appears very slightly larger due to a thin dark outline." width="255" />
-                <figcaption>Adding a 1px dark outline around a dark button does not differentiate it, this example <strong>fails</strong> the Success Criterion.</figcaption>
+                <figcaption>Adding a 1px dark outline around a dark button does not differentiate it. This example <strong>fails</strong> the Success Criterion.</figcaption>
             </figure>
                     
             <p>The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors (including the component), or to be separated from the component, or to be at least 2px thick.</p>
@@ -198,8 +198,8 @@ <h3>Adjacent contrast</h3>
         </section>
         <section id="unobscured">
             <h3>Not fully obscured</h3>
-            <p>Where other content can overlap with a focused item, the focused element should not be hidden. Typical content which can overlap focused items are sticky footers, sticky headers, or non-modal dialogues. As a user tabs through the page, these layers of content can obscure the focused item, including the focus indicator.</p>
-            <p class="note">The criterion specifies the "focused item" in the 'Not fully obscured' bullet rather than the "focus indicator". The requirements for the indicator are set in the previous bullets, the last bullet applies to the item as a whole.</p>
+            <p>Where other content can overlap with a focused item, the focused element should not be hidden. Typical types of content that can overlap focused items are sticky footers, sticky headers, or non-modal dialogues. As a user tabs through the page, these layers of content can obscure the focused item, including the focus indicator.</p>
+            <p class="note">The criterion specifies the "focused item" in the 'Not fully obscured' bullet rather than the "focus indicator". The requirements for the indicator are set in the previous bullets; the last bullet applies to the item as a whole.</p>
 
         </section>
         <section id="relation-non-text-color-contrast">
@@ -229,7 +229,7 @@ <h3>Relationship to Non-text Contrast</h3>
             <p>The contrast of the default checkbox passes 1.4.11 because the black border and white background have a contrast ratio greater than 3:1. When the checkbox recieves focus, the dark blue focus indicator passes Focus Appearance (Minimum) because:
                 <ul>
                     <li>its thick blue border has a sufficient <strong>Minimum area</strong>.</li>
-                    <li>the pixels making up the blue focus indicator have a sufficient <strong>Change of contrast</strong>from their white color in the unfocused state</li>
+                    <li>the pixels making up the blue focus indicator have a sufficient <strong>Change of contrast</strong> from their white color in the unfocused state</li>
                     <li>the blue focus indicator, although not contrasting with the black checkbox border, has a thickness of 2 CSS pixels and so meets <strong>Adjacent contrast</strong>.</li>
                 </ul>
                 The focused state contrasts with the white background, so the component continues to pass 1.4.11.</p>

From 276d7acc357ed132b0496c18f476e77ce782a58f Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Wed, 4 Nov 2020 08:54:26 -0800
Subject: [PATCH 14/21] Update focus-appearance-minimum.html

Added "not"
---
 understanding/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 797c98062c..5fd56ed41b 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -204,7 +204,7 @@ <h3>Not fully obscured</h3>
         </section>
         <section id="relation-non-text-color-contrast">
             <h3>Relationship to Non-text Contrast</h3>
-            <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it has does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does require contrast <em>between</em> the UI component's focused and non-focused states. Merely that in each state it contrasts against the adjacent background. </p>
+            <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it has does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does not equire contrast <em>between</em> the UI component's focused and non-focused states. Merely that in each state it contrasts against the adjacent background. </p>
             
             <p>Focus Appearance (Minimum) requires that the focused and unfocused states can be distinguishable from each other. It does this by requiring sufficient differences in contrast between the appearance of a component when focused and when not focused.</p>
             

From 278914dae961b4af7e9a6fa4987321720e977a8b Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Wed, 4 Nov 2020 08:57:42 -0800
Subject: [PATCH 15/21] Update focus-appearance-minimum.html

changed "larger" to "large"
---
 understanding/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 0d66b74d3c..462d83a84f 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -222,7 +222,7 @@ <h3>Relationship to Non-text Contrast</h3>
             <p>In the example above:</p>
             <ul>
                 <li>The dark square outline of the checkbox has sufficient contrast with its adjacent light background in the default state (meeting 1.4.11 Non-text Contrast).</li>
-                <li>When the checkbox receives focus in the second image, a grey ring appears around it. The ring contrasts against the light page background sufficiently (still meeting 1.4.11). The size of the ring's dark outline is larger enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading (another more subtle indicator of focus), so both the inner and outer edges of the ring's outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.</li>
+                <li>When the checkbox receives focus in the second image, a grey ring appears around it. The ring contrasts against the light page background sufficiently (still meeting 1.4.11). The size of the ring's dark outline is large enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading (another more subtle indicator of focus), so both the inner and outer edges of the ring's outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.</li>
                 <li>In the third image, the checked state is indicated by two visual changes. The checkbox changes color from gray to a greenish teal, and the checkbox is entirely filled in except the outline of a white tick mark. The contrast between the white tick mark and the teal color of the checkbox is sufficient to pass the 1.4.11 Non-text Contrast requirement to identify its (checked) state.</li>
                 <li>The fourth image shows the checkmark both checked and focused. The component still uses a ring to indicate focus. The ring's color has changed, but it still contrasts against the light page background and, on its adjacent inner edge, against the shading. (The color difference between the grey of the unchecked box and the teal of the checked version is irrelevant to the assessment. Since the tick mark indicates the checked state, the color change is just a secondary visual effect.)</li>
             </ul>

From 2c1cabec4657d5b1ffe684fff63a1f319be6bdc9 Mon Sep 17 00:00:00 2001
From: Alastair Campbell <ac@alastc.com>
Date: Tue, 24 Nov 2020 16:12:57 +0000
Subject: [PATCH 16/21] Editorial from SarahH

---
 guidelines/terms/22/perimeter.html             |  2 +-
 understanding/22/focus-appearance-minimum.html | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html
index 4523d57628..d5839af1de 100644
--- a/guidelines/terms/22/perimeter.html
+++ b/guidelines/terms/22/perimeter.html
@@ -1,6 +1,6 @@
 <dt class="new"><dfn>Perimeter</dfn></dt>
 <dd class="new">
 	<p class="change">New</p>	
-   <p>the continuous line forming the boundary of a shape. The perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em>, where <em>h</em> is the height and <em>w</em> is the width. The perimeter of a circle is 2𝜋<em>r</em>.</p>
+   <p>continuous line forming the boundary of a shape, not including shared pixels. For example, the perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em> -4, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋<em>r</em>.</p>
    				
 </dd>
\ No newline at end of file
diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 462d83a84f..416ba8f6dc 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -59,7 +59,7 @@ <h3>Keyboard focus</h3>
 
             <p>Some components have sub-components that can take focus, such as the menu items on a menu. The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow down to a menu item, it is the menu item that is in focus; pressing Enter would activate the menu item.</p>
 
-            <p>Some non-operable elements can take focus (such as when a heading is the target of a skip link); however, it is only when the element with focus is operable by keyboard that this Success Criterion applies.</p>
+            <p>Some non-operable elements can take focus (such as a heading element that is the target of a skip link); however, it is only when the element with focus is operable by keyboard that this Success Criterion applies.</p>
         </section>
         <section id="size-of-indicator">
             <h3>Minimum area</h3>
@@ -210,7 +210,7 @@ <h3>Not fully obscured</h3>
         </section>
         <section id="relation-non-text-color-contrast">
             <h3>Relationship to Non-text Contrast</h3>
-            <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it has does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does not equire contrast <em>between</em> the UI component's focused and non-focused states. Merely that in each state it contrasts against the adjacent background. </p>
+            <p><a href="non-text-contrast" class="sc">Success Criterion 1.4.11 Non-text Contrast</a> requires that a UI component maintains contrast against the adjacent <em>background</em> for each of its states. When it does not have focus, it must be visible against the background. When it receives focus, it still must be visible. However, Non-text Contrast does not require contrast <em>between</em> the UI component's focused and non-focused states, merely that in each state it contrasts against the adjacent background. </p>
             
             <p>Focus Appearance (Minimum) requires that the focused and unfocused states can be distinguishable from each other. It does this by requiring sufficient differences in contrast between the appearance of a component when focused and when not focused.</p>
             
@@ -222,7 +222,7 @@ <h3>Relationship to Non-text Contrast</h3>
             <p>In the example above:</p>
             <ul>
                 <li>The dark square outline of the checkbox has sufficient contrast with its adjacent light background in the default state (meeting 1.4.11 Non-text Contrast).</li>
-                <li>When the checkbox receives focus in the second image, a grey ring appears around it. The ring contrasts against the light page background sufficiently (still meeting 1.4.11). The size of the ring's dark outline is large enough to meet the <strong>Minimum area</strong> bullet of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading (another more subtle indicator of focus), so both the inner and outer edges of the ring's outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.</li>
+                <li>When the checkbox receives focus in the second image, a grey ring appears around it. The ring contrasts against the light page background sufficiently (still meeting 1.4.11). The size of the ring's dark outline is large enough to meet the <strong>Minimum area</strong> requirement of 2.4.11 Focus Appearance. The color of the pixels making up the ring's outline versus the same pixels in the unfocused state meets the 2.4.11 <strong>Change of contrast</strong> bullet. The ring's outline also contrasts against the inside shading (another more subtle indicator of focus), so both the inner and outer edges of the ring's outline meet 2.4.11's  <strong>Adjacent contrast</strong> bullet.</li>
                 <li>In the third image, the checked state is indicated by two visual changes. The checkbox changes color from gray to a greenish teal, and the checkbox is entirely filled in except the outline of a white tick mark. The contrast between the white tick mark and the teal color of the checkbox is sufficient to pass the 1.4.11 Non-text Contrast requirement to identify its (checked) state.</li>
                 <li>The fourth image shows the checkmark both checked and focused. The component still uses a ring to indicate focus. The ring's color has changed, but it still contrasts against the light page background and, on its adjacent inner edge, against the shading. (The color difference between the grey of the unchecked box and the teal of the checked version is irrelevant to the assessment. Since the tick mark indicates the checked state, the color change is just a secondary visual effect.)</li>
             </ul>
@@ -232,11 +232,11 @@ <h3>Relationship to Non-text Contrast</h3>
                 <figcaption>A default checkbox and a focused checkbox. </figcaption>
             </figure>
 
-            <p>The contrast of the default checkbox passes 1.4.11 because the black border and white background have a contrast ratio greater than 3:1. When the checkbox recieves focus, the dark blue focus indicator passes Focus Appearance (Minimum) because:
+            <p>The contrast of the default checkbox passes 1.4.11 because the black border and white background have a contrast ratio greater than 3:1. When the checkbox receives focus, the dark blue focus indicator passes Focus Appearance (Minimum) because:
                 <ul>
-                    <li>its thick blue border has a sufficient <strong>Minimum area</strong>.</li>
-                    <li>the pixels making up the blue focus indicator have a sufficient <strong>Change of contrast</strong> from their white color in the unfocused state</li>
-                    <li>the blue focus indicator, although not contrasting with the black checkbox border, has a thickness of 2 CSS pixels and so meets <strong>Adjacent contrast</strong>.</li>
+                    <li>Its thick blue border has a sufficient <strong>Minimum area</strong>.</li>
+                    <li>Ihe pixels making up the blue focus indicator have a sufficient <strong>Change of contrast</strong> from their white color in the unfocused state</li>
+                    <li>Ihe blue focus indicator, although not contrasting with the black checkbox border, has a thickness of 2 CSS pixels and so meets <strong>Adjacent contrast</strong>.</li>
                 </ul>
                 The focused state contrasts with the white background, so the component continues to pass 1.4.11.</p>
 

From e10f8815306bb16cc9914cd356c25530d17a66a0 Mon Sep 17 00:00:00 2001
From: Alastair Campbell <ac@alastc.com>
Date: Tue, 24 Nov 2020 16:41:37 +0000
Subject: [PATCH 17/21] Adding 'ratio' to SC text.

---
 guidelines/sc/22/focus-appearance-minimum.html | 2 +-
 understanding/22/focus-appearance-minimum.html | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/guidelines/sc/22/focus-appearance-minimum.html b/guidelines/sc/22/focus-appearance-minimum.html
index add88702a8..dde2fc2d7e 100644
--- a/guidelines/sc/22/focus-appearance-minimum.html
+++ b/guidelines/sc/22/focus-appearance-minimum.html
@@ -8,7 +8,7 @@ <h4>Focus Appearance (Minimum)</h4>
     <p>When user interface components receive keyboard focus, all of the following are true:</p>
     <ul>
         <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>      
-        <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states.</li>
+        <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast ratio between their colors in the focused and unfocused states.</li>
         <li><strong>Adjacent contrast:</strong> The pixels in the minimum focus indicator area achieve at least a 3:1 against adjacent colors in the focused control or the minimum focus indicator area has a thickness of at least 2 CSS pixels.</li>
         <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
     </ul>
diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 416ba8f6dc..0689ba9103 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -22,10 +22,10 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
         
             <p>When user interface components receive keyboard focus, all of the following are true:</p>
             <ul>
-              <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>      
-              <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast between their colors in the focused and unfocused states.</li>
-              <li><strong>Adjacent contrast:</strong> The pixels in the minimum focus indicator area achieve at least a 3:1 against adjacent colors in the focused control or the minimum focus indicator area has a thickness of at least 2 CSS pixels.</li>
-              <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
+                <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>      
+                <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast ratio between their colors in the focused and unfocused states.</li>
+                <li><strong>Adjacent contrast:</strong> The pixels in the minimum focus indicator area achieve at least a 3:1 against adjacent colors in the focused control or the minimum focus indicator area has a thickness of at least 2 CSS pixels.</li>
+                <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
             </ul>
             <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
             <p class="note">If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.</p>

From 46a02ef410dabdd5314ef99cc74f95800d92671e Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 4 Jan 2021 11:39:23 -0800
Subject: [PATCH 18/21] Update focus-appearance-minimum.html

added info to address comments by Gundula (and AWK)
---
 understanding/22/focus-appearance-minimum.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 0689ba9103..97cbd68bb2 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -24,7 +24,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
             <ul>
                 <li><strong>Minimum area:</strong> The area of the <a>focus indicator</a> is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the focused control, or the focus indicator has a thickness of at least 8 CSS pixels along the shortest side of the user interface component.</li>      
                 <li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast ratio between their colors in the focused and unfocused states.</li>
-                <li><strong>Adjacent contrast:</strong> The pixels in the minimum focus indicator area achieve at least a 3:1 against adjacent colors in the focused control or the minimum focus indicator area has a thickness of at least 2 CSS pixels.</li>
+                <li><strong>Adjacent contrast:</strong> The pixels in the minimum focus indicator area achieve at least a 3:1 contrast against adjacent colors in the focused control or the minimum focus indicator area has a thickness of at least 2 CSS pixels.</li>
                 <li><strong>Not fully obscured:</strong> The item with focus is not entirely hidden by author-created content.</li>
             </ul>
             <p class="note">A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.</p>
@@ -68,7 +68,7 @@ <h3>Minimum area</h3>
 
             <p>The Success Criterion defines a minimum area using a calculation for perimeter. It also provides an alternative way of meeting a minimum area for focus indicators where the design relies on a smaller but very thick indicator.</p>
 
-            <p>The minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control with focus. The indicator does not have to be a border, but the indicator's area must be at least as large. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels.</p>
+            <p>The minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control with focus. The indicator does not have to be a border, but the indicator's area must be at least as large. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels. You then must subtract the 4 corner pixels (which are counted twice, both horizontally and vertically), for a total minimum area of 236 CSS pixels.</p>
 
             <p class="note">A <a>CSS pixel</a> is what developers use in CSS declarations like “width: 200px”, it is device-independent and not to be confused with device pixels which vary depending on the physical pixel density. <br />
                 The rest of this document notates CSS pixels as "px".

From 75392960b03573e0a9cff20bcb248eb3fb9d354c Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 4 Jan 2021 11:53:56 -0800
Subject: [PATCH 19/21] Update focus-appearance-minimum.html

removed "obviously" as per AWK comment in PR.
---
 understanding/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 97cbd68bb2..b8359934fd 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -117,7 +117,7 @@ <h4>Unusual shapes and gradients</h4>
                     <figcaption>A circular button in the default state, and then with a focus indicator.</figcaption>
                 </figure>
 
-                <p>If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it obviously helps if the contrasting area is quite large.</p>
+                <p>If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it helps if the contrasting area is quite large.</p>
 
                 <figure id="focus-indicator-star-shadow">
                     <img src="img/focus-indicator-star-shadow.png" alt="Two yellow star symbols, the second has a dark drop-shadow." width="400" />

From 96733d22a4a80ad4642414f0066b42a3d19e1e0f Mon Sep 17 00:00:00 2001
From: michael-gower <michael.gower@ca.ibm.com>
Date: Mon, 4 Jan 2021 12:06:24 -0800
Subject: [PATCH 20/21] Update focus-appearance-minimum.html

Since the minimum is changed to 236 from 240, made matching changes in example language
---
 understanding/22/focus-appearance-minimum.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index b8359934fd..335d829f15 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -74,16 +74,16 @@ <h3>Minimum area</h3>
                 The rest of this document notates CSS pixels as "px".
             </p>
 
-            <p>The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 240px. The middle button is focused in each example.</p>
+            <p>The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 236px (240px minus corner 4 pixels). The middle button is focused in each example.</p>
 
             <figure id="focus-indicator-innerline">
                 <img src="img/focus-indicator-innerline.png" alt="Three dark blue buttons on a white background. The middle button has a yellow inner border." width="284" />
-                <figcaption> The inner outline is slightly smaller than the outer edge of the component, but using a 2px thick indicator means it is well over the minimum requirement of 240px squared.</figcaption>
+                <figcaption> The inner outline is slightly smaller than the outer edge of the component, but using a 2px thick indicator means it is well over the minimum requirement of 236px squared.</figcaption>
             </figure>
 
             <figure id="focus-indicator-underline">
                 <img src="img/focus-indicator-underline.png" alt="Three dark blue buttons on a white background. The middle button has a thick yellow line under the text." width="284" />
-                <figcaption> The thick (3px) yellow underline is almost as long as the longest edge, 80px x 3 meets the requirement of 240px.</figcaption>
+                <figcaption> The thick (3px) yellow underline is almost as long as the longest edge, 80px x 3 exceeds the requirement of 236px.</figcaption>
             </figure>
 
             <p>If controls change size across different variations of a page (e.g., in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.</p>

From 1913ea4bea0c872a647a9fc30ff3c33691d1ad83 Mon Sep 17 00:00:00 2001
From: Alastair Campbell <ac@alastc.com>
Date: Wed, 6 Jan 2021 21:52:34 +0000
Subject: [PATCH 21/21] Definition update

---
 understanding/22/focus-appearance-minimum.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/understanding/22/focus-appearance-minimum.html b/understanding/22/focus-appearance-minimum.html
index 335d829f15..128e61f2cc 100644
--- a/understanding/22/focus-appearance-minimum.html
+++ b/understanding/22/focus-appearance-minimum.html
@@ -32,7 +32,7 @@ <h2>Focus Appearance (Minimum) Success Criteria text</h2>
             <p class="note">The default user agent focus indicator is not excepted from the requirements of Focus Appearance (Minimum). If a user agent implementation fails to meet these requirements, any page relying on that user agent would fail.</p>
             <dt class="new"><dfn>Focus indicator</dfn></dt>
             <dd class="new">
-	            <p>The pixels that are changed to visually indicate when a user interface component is in a focused state.</p>   				
+	            <p>pixels that are changed to visually indicate when a user interface component is in a focused state.</p>   				
             </dd>
         </blockquote>
      </section>