From 93a8d915259210dd943d7ed130c4434e4d34f56c Mon Sep 17 00:00:00 2001 From: Matt King Date: Wed, 1 Feb 2017 15:24:01 -0800 Subject: [PATCH 01/10] Separate aria 1.0 and aria 1.1 combobox example templates * Made separate subdirectories for the aria 1.0 and aria 1.1 style examples. * Made an HTML template file for each example using the latest template. * Updated title tags and H1 elements for all the combobox example pages. --- .../combobox-autocomplete-both.html | 194 +++++++++++ .../combobox-autocomplete-list.html | 194 +++++++++++ .../combobox-autocomplete-none.html | 194 +++++++++++ .../css/combobox-1.0.css} | 0 .../js/combobox-1.0.js} | 0 .../aria1.1pattern/css/combobox-1.1.css | 4 + .../combobox/aria1.1pattern/dialog-combo.html | 194 +++++++++++ .../combobox/aria1.1pattern/grid-combo.html | 194 +++++++++++ .../aria1.1pattern/js/combobox-1.1.js | 3 + .../aria1.1pattern/listbox-combo.html | 194 +++++++++++ .../combobox/aria1.1pattern/tree-combo.html | 194 +++++++++++ examples/combobox/combobox-aria1.0.html | 304 ----------------- examples/combobox/combobox-aria1.1.html | 306 ------------------ 13 files changed, 1365 insertions(+), 610 deletions(-) create mode 100644 examples/combobox/aria1.0pattern/combobox-autocomplete-both.html create mode 100644 examples/combobox/aria1.0pattern/combobox-autocomplete-list.html create mode 100644 examples/combobox/aria1.0pattern/combobox-autocomplete-none.html rename examples/combobox/{css/example_name.css => aria1.0pattern/css/combobox-1.0.css} (100%) rename examples/combobox/{js/example_name.js => aria1.0pattern/js/combobox-1.0.js} (100%) create mode 100644 examples/combobox/aria1.1pattern/css/combobox-1.1.css create mode 100644 examples/combobox/aria1.1pattern/dialog-combo.html create mode 100644 examples/combobox/aria1.1pattern/grid-combo.html create mode 100644 examples/combobox/aria1.1pattern/js/combobox-1.1.js create mode 100644 examples/combobox/aria1.1pattern/listbox-combo.html create mode 100644 examples/combobox/aria1.1pattern/tree-combo.html delete mode 100644 examples/combobox/combobox-aria1.0.html delete mode 100644 examples/combobox/combobox-aria1.1.html diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html new file mode 100644 index 0000000000..d387490d95 --- /dev/null +++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html @@ -0,0 +1,194 @@ + + + + +Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + +
+

Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion

+

+ NOTE: This page is work in progress; it is not ready for review. + This work is tracked by issue 99. +

+

+ + Replace this paragraph with an overview of the example that is something like the following. The + below example section demonstrates a simple checkbox that implements the + design pattern for checkbox. + This example uses ... summarize salient techniques ) +

+

Similar examples include:

+ + +
+

Example

+ + +
+ +

This is the place where the reader will experience the functioning example.

+
    +
  • The HTML in this section along with the javascript and CSS it uses demonstrate + the design pattern.
    • +
  • + When developing an example implementation for this guide, please follow the + APG example coding guidelines + . +
    • + +
+
+ +
+ +
+

Accessibility Features

+

Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features + demonstrated in this implementation, such as:

+
    +
  1. What distinguishes this example from related examples.
    2. +
  2. Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
    3. +
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. +
  4. Delete this section if not needed.
    5. +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + +
KeyFunction
KeyName + Description of key function. + +
KeyName +
    +
  • If condition 1, performs function 1.
    • +
  • If condition 2, performs function 2.
    • +
  • Only use a list if multiple statements are needed.
    • +
+
+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
RoleNameHTML_ELEMENT + Describe usage/purpose, e.g., indicates the focusable element that serves as the ... +
+ + AttributeName=AttributeValueHTML_ELEMENT +
    +
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • +
  • If making multiple statements, use list for brevity and clarity
    • +
  • Do not make a single item list.
    • +
+
+
+ +
+

Javascript and CSS Source Code

+ + +
+ +
+

HTML Source Code

+ + 

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
new file mode 100644
index 0000000000..085f644aaa
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of Legacy ARIA 1.0 Combobox With an Autocomplete List | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of Legacy ARIA 1.0 Combobox With an Autocomplete List

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 99.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html b/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
new file mode 100644
index 0000000000..92a277ba39
--- /dev/null
+++ b/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of Legacy ARIA 1.0 Combobox Without Autocomplete | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of Legacy ARIA 1.0 Combobox Without Autocomplete

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 99.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/css/example_name.css b/examples/combobox/aria1.0pattern/css/combobox-1.0.css
similarity index 100%
rename from examples/combobox/css/example_name.css
rename to examples/combobox/aria1.0pattern/css/combobox-1.0.css
diff --git a/examples/combobox/js/example_name.js b/examples/combobox/aria1.0pattern/js/combobox-1.0.js
similarity index 100%
rename from examples/combobox/js/example_name.js
rename to examples/combobox/aria1.0pattern/js/combobox-1.0.js
diff --git a/examples/combobox/aria1.1pattern/css/combobox-1.1.css b/examples/combobox/aria1.1pattern/css/combobox-1.1.css
new file mode 100644
index 0000000000..85c190566f
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/css/combobox-1.1.css
@@ -0,0 +1,4 @@
+.annotate{
+	font-style: italic;
+	color: #366ED4;
+}
diff --git a/examples/combobox/aria1.1pattern/dialog-combo.html b/examples/combobox/aria1.1pattern/dialog-combo.html
new file mode 100644
index 0000000000..87a7b7551c
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/dialog-combo.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of ARIA 1.1 Combobox with Dialog Popup | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of ARIA 1.1 Combobox with Dialog Popup

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 100.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html
new file mode 100644
index 0000000000..28d5844004
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/grid-combo.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of ARIA 1.1 Combobox with Grid Popup | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of ARIA 1.1 Combobox with Grid Popup

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 100.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/aria1.1pattern/js/combobox-1.1.js b/examples/combobox/aria1.1pattern/js/combobox-1.1.js
new file mode 100644
index 0000000000..d82228b0dd
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/js/combobox-1.1.js
@@ -0,0 +1,3 @@
+/**
+ * Rename this file to the name of the example, e.g., checkbox.js.
+ */
diff --git a/examples/combobox/aria1.1pattern/listbox-combo.html b/examples/combobox/aria1.1pattern/listbox-combo.html
new file mode 100644
index 0000000000..e1da9a58ee
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/listbox-combo.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of ARIA 1.1 Combobox with Listbox Popup | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of Combobox with Listbox Popup

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 100.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/aria1.1pattern/tree-combo.html b/examples/combobox/aria1.1pattern/tree-combo.html
new file mode 100644
index 0000000000..8f3639e007
--- /dev/null
+++ b/examples/combobox/aria1.1pattern/tree-combo.html
@@ -0,0 +1,194 @@
+
+
+
+
+Example of ARIA 1.1 Combobox with Tree Popup | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Example of ARIA 1.1 Combobox with Tree Popup

+  

+    NOTE: This page is work in progress; it is not ready for review.
+    This work is tracked by issue 100.
+  

+  

+    
+    Replace this paragraph with an overview of the example that is something like the following. The
+    below example section demonstrates a simple checkbox that implements the
+    design pattern for checkbox.
+    This example uses ... summarize salient techniques )
+  

+  
Similar examples include: 

+  
+
+  

+    
Example

+    
+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+    
+  

+  

+  
+
+
diff --git a/examples/combobox/combobox-aria1.0.html b/examples/combobox/combobox-aria1.0.html
deleted file mode 100644
index 3bcef0b25b..0000000000
--- a/examples/combobox/combobox-aria1.0.html
+++ /dev/null
@@ -1,304 +0,0 @@
-
-
-
-
-
-
-Legacy (ARIA 1.0) Combobox Examples | WAI-ARIA Authoring Practices 1.1
-
-
-
-
-
-
-
-
-
-
-
-
-  
 
-  
Legacy (ARIA 1.0) Combobox Examples

-  

-    NOTE: This is work in progress; it is not ready for review.
-    Once ready, feedback will be welcom in issue 99.
-  

-  

-    ARIA 1.1 introduced an additional approach to implementing combobox widgets intended to help assistive technologies to render more user friendly presentations and give authors greater design flexibility.
-    While authors are encouraged to adopt the ARIA 1.1 combobox pattern, 
-    browsers and assistive technologies will continue to support the ARIA 1.0 combobox standard since it has wide-spread and successful adoption.
-    Following are three example implementations of the design pattern for combobox
-    that conform to the ARIA 1.0 specification.
-  

-  

-    
Examples

-    
If there is a brief, important note that applies to all the implementations, put it here.

-
-    

-      
Example 1: title of this variation of the implementation

-      
-      
This is the preferred implementation whenever feasible. (Delete this paragraph if there
-        is not a preferred implementation.)

-      

-        
-        

-          
-          
This is the place where the reader will experience the first functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-    

-      
Example 2: title of this variation of the implementation

-      

-        
-        

-          
-          
This is the place where the reader will experience the second functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-    

-      
Example 3: title of this variation of the implementation

-      

-        
-        

-          
-          
This is the place where the reader will experience the third functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-  

-
-  

-    
Accessibility Features

-    
Please replace this content with a list of accessibility features
-      demonstrated in this implementation, such as the following. If the content will vary
-      significantly for the above implementations, make this a level 4 section inside each of the
-      above level 3 implementation sections.

-    
    
-      
  • ARIA roles
    • 
-      
  • property and state information
    • 
-      
  • Event handlers
    • 
-      
  • 
-        tabindex values
-      
    • 
-    

-  

-
-  

-    
Keyboard Support

-    
-    
-      
-        
-          
-          
-        
-      
-      
-        
-          
-          
-        
-        
-          
-          
-        
-        
-          
-          
-        
-      
-    
KeyFunction

-            key 1
-          Key 1 action

-            key 2
-          Key 2 action

-            key 3
-          Key 3 action

-  

-
-  

-    
ARIA Roles, Properties, and States

-    
-    
-      
-        
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-      
-    
RoleProperty/StateElementUsage

-            role
-          
-            element X
-          
-            
    
-              
  • 
-                Identify element with the role behavior
-              
    • 
-            

-          

-            aria-xxxxx
-          
-            X[role="yyy"] element
-          
-            
    
-              
  • Purpose of aria properties or aria states within example
    • 
-            

-          

-  

-
-  

-    
Javascript and CSS Source Code

-    
-    
-  

-
-  

-    
HTML Source Code

-    
Example 1: title of this variation of the implementation

-
-    

-    
-    
-
-    
Example 2: title of this variation of the implementation

-    

-    
-    
-
-    
Example 3: title of this variation of the implementation

-    

-    
-    
-
-    
-    
-
-  

-
-  

-  
-
-
diff --git a/examples/combobox/combobox-aria1.1.html b/examples/combobox/combobox-aria1.1.html
deleted file mode 100644
index f6636593b2..0000000000
--- a/examples/combobox/combobox-aria1.1.html
+++ /dev/null
@@ -1,306 +0,0 @@
-
-
-
-
-
-
-Combobox Examples | WAI-ARIA Authoring Practices 1.1
-
-
-
-
-
-
-
-
-
-
-
-
-  
 
-  
Combobox Examples

-  

-    NOTE: This is work in progress; it is not ready for review.
-    Once ready, feedback will be welcom in issue 100.
-  

-  

-    The following three example implementations of the design pattern for combobox
-    take advantage of implementation options introduced by the ARIA 1.1 specification.
-    The intent of the ARIA 1.1 changes are to help assistive technologies render more user friendly presentations and give authors greater design flexibility.
-    For example, in addition to allowing listbox as a type of pop-up element, ARIA 1.1 combobox widgets may use a tree, grid, or dialog to present completion values.
-  

-  

-    NOTE: Browsers and assistive technologies will continue to support implementations of the legacy ARIA 1.0 combobox pattern since it already has wide-spread and successful adoption.
-  

-  

-    
Examples

-    
If there is a brief, important note that applies to all the implementations, put it here.

-
-    

-      
Example 1: title of this variation of the implementation

-      
-      
This is the preferred implementation whenever feasible. (Delete this paragraph if there
-        is not a preferred implementation.)

-      

-        
-        

-          
-          
This is the place where the reader will experience the first functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-    

-      
Example 2: title of this variation of the implementation

-      

-        
-        

-          
-          
This is the place where the reader will experience the second functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-    

-      
Example 3: title of this variation of the implementation

-      

-        
-        

-          
-          
This is the place where the reader will experience the third functioning example.

-          
    
-            
  • The HTML in this section along with the javascript and CSS it uses demonstrate
-              the design pattern.
    • 
-            
  • 
-              When developing an example implementation for this guide, please follow the
-              APG example coding guidelines
-              .
-            
    • 
-            
-          

-        

-      

-      
In this implementation:

-      
    
-        
  • First of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • Second of a short list of distinguishing characteristics of this implementation.
    • 
-        
  • ... Continue as needed.
    • 
-        
  • Do not describe common features that will be included in other sections below.
    • 
-      

-    

-
-  

-
-  

-    
Accessibility Features

-    
Please replace this content with a list of accessibility features
-      demonstrated in this implementation, such as the following. If the content will vary
-      significantly for the above implementations, make this a level 4 section inside each of the
-      above level 3 implementation sections.

-    
    
-      
  • ARIA roles
    • 
-      
  • property and state information
    • 
-      
  • Event handlers
    • 
-      
  • 
-        tabindex values
-      
    • 
-    

-  

-
-  

-    
Keyboard Support

-    
-    
-      
-        
-          
-          
-        
-      
-      
-        
-          
-          
-        
-        
-          
-          
-        
-        
-          
-          
-        
-      
-    
KeyFunction

-            key 1
-          Key 1 action

-            key 2
-          Key 2 action

-            key 3
-          Key 3 action

-  

-
-  

-    
ARIA Roles, Properties, and States

-    
-    
-      
-        
-          
-          
-          
-          
-        
-      
-      
-        
-          
-          
-          
-          
-        
-        
-          
-          
-          
-          
-        
-      
-    
RoleProperty/StateElementUsage

-            role
-          
-            element X
-          
-            
    
-              
  • 
-                Identify element with the role behavior
-              
    • 
-            

-          

-            aria-xxxxx
-          
-            X[role="yyy"] element
-          
-            
    
-              
  • Purpose of aria properties or aria states within example
    • 
-            

-          

-  

-
-  

-    
Javascript and CSS Source Code

-    
-    
-  

-
-  

-    
HTML Source Code

-    
Example 1: title of this variation of the implementation

-
-    

-    
-    
-
-    
Example 2: title of this variation of the implementation

-    

-    
-    
-
-    
Example 3: title of this variation of the implementation

-    

-    
-    
-
-    
-    
-
-  

-
-  

-  
-
-

From f73152ecaff5ed252a3194edcad0f5a2e55c590b Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Fri, 3 Feb 2017 07:17:10 -0800
Subject: [PATCH 02/10] Feed Pattern First Draft and Example Template

Modified aria-practices.html:
* Added a design pattern section titled "Feed" with first draft of content.
* Added note to beginning of section with a link to issue #245 to capture feedback.

Set up example template for feed example development, which is tracked by issue #246.
new file:   examples/feed/css/feed.css
new file:   examples/feed/feed.html
new file:   examples/feed/js/feed.js
---
 aria-practices.html        | 152 +++++++++++++++++++++++++++++++
 examples/feed/css/feed.css |   4 +
 examples/feed/feed.html    | 177 +++++++++++++++++++++++++++++++++++++
 examples/feed/js/feed.js   |   3 +
 4 files changed, 336 insertions(+)
 create mode 100644 examples/feed/css/feed.css
 create mode 100644 examples/feed/feed.html
 create mode 100644 examples/feed/js/feed.js

diff --git a/aria-practices.html b/aria-practices.html
index dc11f22475..e135d89895 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -562,6 +562,158 @@ 
Examples

       
     
 
+    

+      
Feed

+      

+        This section contains an early draft of new content.
+        Feedback is welcom in 
+        issue 245.
+      

+      

+        A feed is a section of a page that automatically loads new content as the user reads.
+        Content in a feed is segmented into article elements. Thus, it can be thought of as a dynamic list of articles
+        that often appears to scroll infinitely.
+      

+      

+        The primary difference between a feed and other ARIA patterns that support scrolling
+        information, e.g., a grid, is that feed is a structure, not a widget. This means assistive
+        technologies with a reading mode, such as screen readers will default to reading mode when
+        interacting with feed content, making the feed pattern most useful for blocks of
+        unstructured information that may contain links or other interactive elements.
+      

+      

+        For example, a product page on a shopping site may have a related products section that
+        displays five products at a time and, as the user scrolls,  loads more product suggestions into the DOM.
+         While a static design might include a next button for loading five more products, a dynamic implementation
+        that automatically loads data as needed simplifies the user
+        experience and reduces the inertia associated with viewing more than 5 suggestions.
+      

+      

+        Unfortunately, when web pages load content dynamically based on scroll events, it
+        creates interoperability difficulties for users of assistive technologies that cannot
+        sufficiently mimic visual scrolling. The web page could also observe focus movements in
+        order to identify when more content is needed. However, requiring assistive technologies to
+        move DOM focus in response to every reading cursor movement, regardless of context, can also have negative
+        side effects on the screen reading experience.
+      

+      

+        The feed pattern enables reliable assistive technology reading mode interaction by
+        establishing the following interoperability agreement between the web page and assistive
+        technologies:
+      

+      
    
+        
  1. In the context of a feed, the web page code is responsible for:
+        
      
+          
    • 
+            Appropriate visual scrolling of the content based on which article contains DOM focus. 
+          
      • 
+          
    • Loading or removing feed articles based on which article contains DOM focus.
      • 
+        
    
+      
    2. 
+        
  2. In the context of a feed, assistive technologies with a reading mode are responsible for:
+          
      
+            
    • Indicating which article contains the reading cursor by ensuring the article element or one of its descendants has DOM focus.
      • 
+            
    • providing reading mode keys that move DOM focus to the next and previous articles.
      • 
+            
    • Providing reading mode keys for moving the reading cursor and DOM focus past the end and before the start of the feed.
      • 
+          
    
+        
    3. 
+      

+      

+        Thus, implementing the feed pattern allows a screen reader to reliably read and load
+        feed content while staying in its reading mode.
+      

+      

+        Another feature of the feed pattern is its ability to facilitate skim reading by
+        assistive technology users. Web page authors may provide both an accessible name and
+        description for each article. By identifying the elements inside of an
+        article that provide the title and the primary content, assistive technologies can provide
+        functions that enable users to jump from article to article and efficiently discern which
+        articles may be worthy of more attention.
+      

+      

+        
Keyboard Interaction

+        

+          The feed pattern is not based on a desktop GUI widget so the feed role is not associated with any well-established keyboard conventions.
+          Supporting the following, or a similar,  interface is recommended.
+        

+        
When focus is inside the feed:

+        
    
+          
  • Page Down: Move focus to next article.
    • 
+          
  • Page Up: Move focus to previous article.
    • 
+          
  • Control + End: Move focus to the first focusable element after the feed.
    • 
+          
  • Control + Home: Move focus to the first focusable element before the feed.
    • 
+        

+        
    
+          
  1. Due to the lack of convention, providing easily discoverable keyboard interface documentation is especially important.
    2. 
+          
  2. 
+            In some cases, a feed may contain a nested feed.
+            For example, an article in a social media feed may contain a feed of comments on that article.
+            To navigate the nested feed, users first move focus inside the nested feed. 
+            Options for supporting nested feed navigation include:
+            
      
+              
    • 
+                Users simply move focus into the nested feed from the content of the containing article with Tab. 
+                This may be slow if the aarticle contains a significant number of links, buttons, or other widgets.
+               
      • 
+              
    • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
      • 
+              
    • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
      • 
+            
    
+          
    3. 
+          
  3. In the rare circumstance that a feed article contains a widget that uses the above suggested keys, the feed navigation key will operate the contained widget, and the user needs to move focus to an element that does not utilize the feed navigation keys in order to navigate the feed.
    4. 
+        

+      

+      

+        
WAI-ARIA Roles, States, and Properties

+        
    
+          
  • The element that contains the set of feed articles has role feed.
    • 
+          
  • 
+            If the feed has a visible title, the feed element has aria-labelledby referring to the element containing the title.
+            Otherwise, the feed element has a label specified with aria-label.
+          
    • 
+          
  • 
+            Each unit of content in a feedis contained in an element with role article.
+            All content inside the feed is contained in an article  element.
+          
    • 
+          
  • 
+            Each article element has 
+            aria-labelledby 
+            referring to elements inside the article that can serve as a distinguishing label. 
+          
    • 
+          
  • 
+            It is optional but strongly recommended for Each article element to have 
+            aria-describedby 
+            referring to one or more elements inside the article that serve as the primary content of the article.
+          
    • 
+          
  • 
+            Each article element has
+            aria-posinset 
+            set to a value that represents its position in the feed.
+          
    • 
+          
  • 
+            Each article element has
+            aria-setsize 
+            set to a value that represents either the total number of articles that have been loaded or the tototal number in the feed, 
+            depending on which value is deemed more helpful to users.
+            If the total number in the feed is undetermined, it can be represented by a aria-setsize value of -1.
+          
    • 
+          
  • 
+            When article elements are being added to or removed from the feed container, 
+            and if the operation requires multiple DOM operations, 
+            the feed element has 
+            aria-busy 
+            set to true during the update operation. 
+            Note that it is extremely important that aria-busy is set to false when the operation is complete or the changes may not become visible to some assistive technology users.
+          
    • 
+        

+      

+      

+        
Example

+        

+        Example Implementation of Feed Pattern
+        

+      

+    

+
     

       
Grids : Interactive Tabular Data and Layout Containers

 
diff --git a/examples/feed/css/feed.css b/examples/feed/css/feed.css
new file mode 100644
index 0000000000..85c190566f
--- /dev/null
+++ b/examples/feed/css/feed.css
@@ -0,0 +1,4 @@
+.annotate{
+	font-style: italic;
+	color: #366ED4;
+}
diff --git a/examples/feed/feed.html b/examples/feed/feed.html
new file mode 100644
index 0000000000..9c2ad2b959
--- /dev/null
+++ b/examples/feed/feed.html
@@ -0,0 +1,177 @@
+
+
+
+
+  e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
+Feed Example | WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
+
+
+
+
+
+  

+  
Feed Example

+  

+    NOTE: This page is work in progress; is not ready for review.
+    Work on this example is tracked by 
+    issue 246.
+  

+  

+    The example below demonstrates an implementation of the 
+    This example uses ... summarize salient techniques )
+  

+  
+  

+    
Example

+    
+    

+      
+      
This is the place where the reader will experience the functioning example.

+      
    
+        
  • The HTML in this section along with the javascript and CSS it uses demonstrate
+          the design pattern.
    • 
+        
  • 
+          When developing an example implementation for this guide, please follow the
+          APG example coding guidelines
+          .
+        
    • 
+        
+      

+    

+    
+  

+
+  

+    
Accessibility Features

+    
Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
+      demonstrated in this implementation, such as:

+    
    
+      
  1. What distinguishes this example from related examples.
    2. 
+      
  2. Keyboard chortcuts, live regions,  unusual event handling, or other ancillary best practices that are employed.
    3. 
+      
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. 
+      
  4. Delete this section if not needed.
    5. 
+    

+  

+
+  

+    
Keyboard Support

+    
+    
+      
+        
+          
+          
+        
+      
+      
+        
+          
+          
+        
+        
+          
+          
+        
+      
+    
KeyFunction
KeyName
+            Description of key function.
+            
+          
KeyName
+            
    
+              
  • If condition 1, performs function 1.
    • 
+              
  • If condition 2, performs function 2.
    • 
+              
  • Only use a list if multiple statements are needed.
    • 
+            

+          

+  

+
+  

+    
Role, Property, State, and Tabindex  Attributes

+    
+    
+      
+        
+          
+          
+          
+          
+        
+      
+      
+        
+          
+          
+          
+          
+        
+        
+          
+          
+          
+          
+        
+      
+    
RoleAttributeElementUsage
RoleNameHTML_ELEMENT
+            Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
+          

+            
+          AttributeName=AttributeValueHTML_ELEMENT
+            
    
+              
  • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
    • 
+              
  • If making multiple statements, use list for brevity and clarity
    • 
+              
  • Do not make a single item list.
    • 
+            

+          

+  

+
+  

+    
Javascript and CSS Source Code

+    
+    
+  

+
+  

+    
HTML Source Code

+    
+    

+    
+    
+  

+  

+  
+
+
diff --git a/examples/feed/js/feed.js b/examples/feed/js/feed.js
new file mode 100644
index 0000000000..d82228b0dd
--- /dev/null
+++ b/examples/feed/js/feed.js
@@ -0,0 +1,3 @@
+/**
+ * Rename this file to the name of the example, e.g., checkbox.js.
+ */

From c798103d5be16a08a9926ea75bfae669b806b3f7 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Fri, 3 Feb 2017 07:30:02 -0800
Subject: [PATCH 03/10] Fix HTML syntax errorin Feed Example Template

modified examples/feed/feed.html:
Deleted partial comment that did not have correct comment markup.
---
 examples/feed/feed.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/feed/feed.html b/examples/feed/feed.html
index 9c2ad2b959..8dc4a9bacb 100644
--- a/examples/feed/feed.html
+++ b/examples/feed/feed.html
@@ -2,7 +2,6 @@
 
 
 
-  e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
 Feed Example | WAI-ARIA Authoring Practices 1.1
 
 

From 095aabfd359429550623824bcf5b106e80b430ad Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Fri, 3 Feb 2017 09:47:30 -0800
Subject: [PATCH 04/10] Editorial revision of feed pattern

modified aria-practices.html in the feed pattern section:
* Add link to grid pattern.
* Revise wording of description.
---
 aria-practices.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/aria-practices.html b/aria-practices.html
index e135d89895..d0b60e291d 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -575,8 +575,8 @@ 
Feed

         that often appears to scroll infinitely.
       

       

-        The primary difference between a feed and other ARIA patterns that support scrolling
-        information, e.g., a grid, is that feed is a structure, not a widget. This means assistive
+        The primary difference between a feed and other ARIA patterns that support loading data as users scroll, 
+        e.g., a grid, is that a feed is a structure, not a widget. This means assistive
         technologies with a reading mode, such as screen readers will default to reading mode when
         interacting with feed content, making the feed pattern most useful for blocks of
         unstructured information that may contain links or other interactive elements.
@@ -591,10 +591,12 @@ 
Feed

       

         Unfortunately, when web pages load content dynamically based on scroll events, it
         creates interoperability difficulties for users of assistive technologies that cannot
-        sufficiently mimic visual scrolling. The web page could also observe focus movements in
-        order to identify when more content is needed. However, requiring assistive technologies to
-        move DOM focus in response to every reading cursor movement, regardless of context, can also have negative
-        side effects on the screen reading experience.
+        sufficiently mimic visual scrolling. 
+        Even if the page also observes focus movements in
+        order to identify when more content is needed, 
+        there can still be problems because requiring assistive technologies to
+        move DOM focus in response to every reading cursor movement, regardless of context, 
+        can also negatively impact a screen reading experience.
       

       

         The feed pattern enables reliable assistive technology reading mode interaction by
@@ -619,8 +621,8 @@ 
Feed

         
       
       

-        Thus, implementing the feed pattern allows a screen reader to reliably read and load
-        feed content while staying in its reading mode.
+        Thus, implementing the feed pattern allows a screen reader to reliably read and trigger the loading
+        of feed content while staying in its reading mode.
       

       

         Another feature of the feed pattern is its ability to facilitate skim reading by

From 073a4b0a11cadfd16a9f47d978935d0fd67c6313 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Fri, 3 Feb 2017 15:44:25 -0800
Subject: [PATCH 05/10] Revise Intro for file directory tree with computed
 properties

Fix editorial issues for issue #223.

modified examples/treeview/treeview-1/treeview-1a.html:
* Fix typos and spelling errors in introductory paragraphs.
* Added brief explanation of the function of  the example to introduction.
* Minor editorial revisions to the structure and wording of the introduction.
---
 examples/treeview/treeview-1/treeview-1a.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/examples/treeview/treeview-1/treeview-1a.html b/examples/treeview/treeview-1/treeview-1a.html
index cdcb75dc5b..ed90d6f6a6 100644
--- a/examples/treeview/treeview-1/treeview-1a.html
+++ b/examples/treeview/treeview-1/treeview-1a.html
@@ -25,7 +25,16 @@ 
File Directory Treeview Example Using Computed Properties

         Feedback and progress on editorial work on this page are being tracked in 
         issue 223.
       

-      
This example implements the features of the Treeview Design Pattern for simulation of a file selector.  This example relies on the browser to compute values for aria-setsize, aria-posinset and arial-level.   The ARIA 1.0 Spectification for these properties states the browser can compute these values, but is not required to.

+      

+        The below example implements the 
+        Treeview Design Pattern 
+        to simulate a file selector.  
+        When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree.
+      

+      

+        This example relies on the browser to compute values for aria-setsize, aria-posinset and aria-level.   
+        The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute these values.
+       

       
Similar examples include: 

       
    
         
  • File Directory Treeview using declared properties
    • 

From 7898a65f70c6d0faab2be8b5292c25b74297896a Mon Sep 17 00:00:00 2001
From: Jon Gunderson 
Date: Mon, 6 Feb 2017 01:06:19 -0600
Subject: [PATCH 06/10] Updated link examples to latest example template

Made the following updates for issue #228:
* updated link examples to use new example template
* fixed bug in CSS
* updated description
* Editorial revisions to link example page.
---
 examples/link/css/link.css |   9 +-
 examples/link/link.html    | 301 ++++++++++++++++++++-----------------
 2 files changed, 169 insertions(+), 141 deletions(-)

diff --git a/examples/link/css/link.css b/examples/link/css/link.css
index b778bb8938..e68ddaacbf 100644
--- a/examples/link/css/link.css
+++ b/examples/link/css/link.css
@@ -13,17 +13,22 @@
     cursor: pointer;
 }
 
-[role="link"].w3c1 {
+[role="link"].link3:before {
   display: block;
   content: url('../images/w3c-logo.png');
   width:153px;
   height:104px; 
 }
 
-[role="link"].w3c2 {
+[role="link"].link4 {
   display: block;
   background-repeat: no-repeat;
   background-image: url('../images/w3c-logo.png');
   width:153px;
   height:104px; 
 }
+
+td div {
+  margin-bottom: 0.25em;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/examples/link/link.html b/examples/link/link.html
index 91465ff1f8..88f249ceb7 100644
--- a/examples/link/link.html
+++ b/examples/link/link.html
@@ -1,134 +1,121 @@
 
 
 
-  
-  ARIA Example: link role
-  
-  
-  
-  
-  
-
-
-    
    ARIA Example: link role
    
-    
    
-      This page requires updates as described in 
-      issue 228.
-    
    
+
 
-  
    
+Link Examples | WAI-ARIA Authoring Practices 1.1
 
-    
    Creating links using role=link
    
+
+
+
+
 
-    
     Authoring Practice Design Patten for Link
    
-    
    Note: When using HTML use the <a> element. It is recommended that authors not re-purpose other elements to create links.
    
-    
    Example Links
    
-    
    
-    
+
+
+
+
+
+  
     
+  
    Link Examples
    
+  
    
+    NOTE: provide feedback on this example page in 
+    issue 228.
+  
    
+  
    
+    The examples below demonstrate four variations of the 
+    design pattern for link.
+     The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.
+  
    
+  
    Note: Use the HTML a element to create links whenever possible.
    
+  
    
+    
    Examples
    
+    
+    
    
-          
+          
+          
-          
-          
+          
-         
-        
-        
-        
+          
+          
+          
-          
+          
-          
-          
+          
-          
    
       
         
    TechniqueNumberDescription
           LinkAccessibility Features
         
    
           
       
         
    span element with text content
+            1
+          
           
-          
    
-            span element with text content.
+          
+          
    		
+            
               W3C website
             
-            
-          
-            
      
-              
    • span element with role="link".
      • 
-              
    • span element has onclick event to handle mouse clicks.
      • 
-              
    • span element has onkeydown event to handle keyboard support.
      • 
-              
    • span element has tabindex="0" to become part of tab order of the page.
      • 
-              
    • Accessible name (e.g. what a screen reader will say) from child text content of span element.
      • 
-            
    
               		
         
    
         
    img element
-          
    
-            W3C Website
-          
    
-            		
-        
      
-              
    • img element with alt attribute.
      • 
-              
    • img element has onclick event to handle mouse clicks.
      • 
-              
    • img element has onkeydown event to handle keyboard support.
      • 
-              
    • img element has tabindex="0" to become part of tab order of the page.
      • 
-              
    • Accessible name from alt attribute.
      • 
-        
    
-            		
+            2
+          
+            img element with alt attribute.
+          
+            W3C Website
+          
         
    
         
    Content
+            3
+          
           
-              
    
-                
-                
-              
    
+            CSS :before content property on a span element.
               		
-            
      
-              
    • span element with background image and with role="link".
      • 
-              
    • span element has onclick event to handle mouse clicks.
      • 
-              
    • span element has onkeydown event to handle keyboard support.
      • 
-              
    • span element has tabindex="0" to become part of tab order of the page.
      • 
-              
    • Accessible name from aria-label attribute.
      • 
-            
    
+              		
+            
+            
           
         
    
         
    Background Image
+            4
+          
           
-              
    
-                
-                
-              
    
+            CSS background image on a span element.
               		
-            
      
-              
    • span element with background image and with role="link".
      • 
-              
    • span element has onclick event to handle mouse clicks.
      • 
-              
    • span element has onkeydown event to handle keyboard support.
      • 
-              
    • span element has tabindex="0" to become part of tab order of the page.
      • 
-              
    • Accessible name from aria-label attribute.
      • 
-            
    
+              		
+            
+            
           
         
    
           
     
    
-    
    
-
-    
    Keyboard Support
    
-
-    
+    
+  
+  
    
+    
    Keyboard Support
    
+    
    
@@ -137,71 +124,107 @@ 
    Keyboard Support
    
-          
-          
+          
+          
    
       
         
    
           Key
       
    
       
         
    Enter/ReturnActivate linkenter
+          Activates the link.
+          
         
    
           
     
    
+  

 
-    
ARIA Roles, Properties and States

-
-    
+  

+    
Role, Property, State, and Tabindex  Attributes

+    

-          
-          
-          
-          
+          
+          
+          
+          
-          
+          
+          
+          
+          
+        
+        
-          
-          
+          
+          
+          
-          
-          
-          
+          
+          
+          
+        
+        
+          
+          
+          
+          
-
       

       
         
RoleProperty/StateComponentUsageRoleAttributeElementUsage
         

       
       
         
linklink
+          span
img		
+            
    
+            
  • Examples 1, 3, and 4: Identifies the span element as a link.
    • 
+            
  • Example 2: Identifies the img element as a link.
    • 
+            

+          

           spanIdentify element with the link behaviortabindex="0"span, 
img		Includes the link element in the page tab sequence.
         

         

           aria-labelspanDefine accessible name for link.altimg
+                Example 2: Defines the accessible name of the link.
+          
aria-labelspan
+            Examples 3 and 4: Defines the accessible name of the link.
         

     

+  
 
-    
-
-    
Source Code

-
+  

+    
Javascript and CSS Source Code

     
-
-    
HTML Code

-      
HTML source code is generated by scripting using ID references.

-      
First Example: span element with text content 

-      

-
-      
Second Example: img element

-      

-
-      
Third Example: Content 

-      

-
-       
Fourth Example: Background image

-       

-
+  

+
+  

+    
HTML Source Code

+    
Link 1

+    
+    

+    
+    
Link 2

+    
+    

+    
+    
Link 3

+    
+    

+    
+    
Link 4

+    
+    

+    
     
+  

   
+  
 
 

From d0f7ae4a377306d32a35257000c1159baefaaecd Mon Sep 17 00:00:00 2001
From: Michiel Bijl 
Date: Mon, 6 Feb 2017 17:37:58 +0000
Subject: [PATCH 07/10] Breadcrumb Example Updates for issue #187

* Update to new template
* Fix typos
* Changed crumb links to better represent the position of this page in APG architecture:
   * First crumb now points to APG main doc, not outside APG.
    * Second crumb points to the design pattern section in main doc
    * Third crumb points to the breadcrumb pattern in design pattern section
    * final crumb points to the breadcrumb example page.
* Editorial revisions to intro and accessibility features.
* Editorial revisions to breadcrumb example property table
    * Remove links from states and properties in Breadcrumb example. We are not maintaining links to the aria spec or html spec from example pages; they are not respec documents.
    * Editorial revision to description in aria-current row.

* Added aria-label for the nav element to breadcrumb example properties table
---
 examples/breadcrumb/index.html | 114 ++++++++++++++++++++++-----------
 1 file changed, 75 insertions(+), 39 deletions(-)

diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
index 791d8177e7..586b98149a 100644
--- a/examples/breadcrumb/index.html
+++ b/examples/breadcrumb/index.html
@@ -2,83 +2,119 @@
 
   
     
-    ARIA Breadcrumb Design Pattern Example
+    Breadcrumb Example | WAI-ARIA Authoring Practices 1.1
+
     
     
+    
     
   
   
     

-      
ARIA Breadcrumb Design Pattern Example

-      

-        This page requires updates per
-        issue 187.
-        Please provide any additional feedback in this issue.
-      

-      
This example shows the breadcrumb design pattern.

-
-	  

-	    It is recommended authors use an ordered list to structure the list of links.
-	    Visual separators should be added through CSS.
-	  

-
-      

-
+    
Breadcrumb Example

+    
The following example demonstrates the breadcrumb design pattern.

+    

+      
Example

+      
+      
+      
+    

 
-      
Accessibility Feature

-
-      
If markedup with a labelled nav element, the breadcrumb will be exposed as such.

-
-      
Keyboard Support

+    

+      
Accessibility Features

+      
    
+        
  • The set of links is structured using an ordered list .
    • 
+        
  • The visual separators between links are added through CSS so they do not add unnecessary screen reader verbosity.
    • 
+        
  • A labelled nav element identifies the structure and makes it easy to identify and locate.
    • 
+      

+    

 
+    

+      
Keyboard Support

       
No keyboard interaction needed.

+    

 
-      
ARIA Roles, Properties and States

-
-      
+    

+      
Role, Property, State, and Tabindex  Attributes

+      

-            
-            
-            
+            
+            
+            
+            
-            
+            
+            
+          
+          
+            
+            
+            
+            

         
           
RoleProperty/StateUsageRoleAttributeElementUsage
           

         
         
           

             aria-current with a value of page
+              aria-label=Breadcrumb
+            
+              nav
+            
             
-              Mark the current page within the widget.
+              Provides a label that describes the type of navigation provided in the nav element.
+            

+              aria-current=page
+            
+              a
+            
+              Applied to the last link in the set to indicate that it represents the current page.
             
           

         
       

+    
 
-      
-
-      
Source Code

-
+    

+      
Javascript and CSS Source Code

       
+    

+
+    

+      
HTML Source Code

+      
+      

+      
+      
+    

     

+
+    
   
 

From 01be11ef45acec76a4de96b9b2ab6c4e1a820b4f Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Tue, 7 Feb 2017 11:13:12 -0800
Subject: [PATCH 08/10] Make Link Context Menu Optional

Made the following changes Per discussion of issue #228 in Feb 6 authoring practices meeting.

modified aria-practices.html:
In the link pattern section, keyboard subsection, marked the context menu key (shift+f10) as optional.

modified examples/link/link.html:
In the example introduction, added the following sentence to the note encouraging authors to use native HTML links:
"Browsers provide valuable functionality for native HTML links, e.g., open the target in a new window and copy the target URL to the system clipboard."
---
 aria-practices.html     | 2 +-
 examples/link/link.html | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/aria-practices.html b/aria-practices.html
index d0b60e291d..9cc668cee9 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -1092,7 +1092,7 @@ 
Link

         
Keyboard Interaction

         
    
           
  • Enter: Executes the link and moves focus to the link target.
    • 
-          
  • Shift + F10: Opens the link's context menu.
    • 
+          
  • Shift + F10 (Optional): Opens a context menu for the link.
    • 
         

       
       

diff --git a/examples/link/link.html b/examples/link/link.html
index 88f249ceb7..e02331dd83 100644
--- a/examples/link/link.html
+++ b/examples/link/link.html
@@ -26,7 +26,10 @@ 
Link Examples

     design pattern for link.
      The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.
   

-  
Note: Use the HTML a element to create links whenever possible.

+  

+    Note: Use the HTML a element to create links whenever possible.
+    Browsers provide valuable functionality for native HTML links, e.g., open the target in a new window and copy the target URL to the system clipboard.
+  

   

     
Examples

     

From 6f22bddae1174349e0d1714202670393d968f035 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Tue, 7 Feb 2017 19:36:02 -0800
Subject: [PATCH 09/10] Feed Pattern Editorial Revisions

modified the feed pattern section of aria-practices.html to
fix multiple typos and make minor editorial revisions to the description of the pattern.
---
 aria-practices.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/aria-practices.html b/aria-practices.html
index 9cc668cee9..89744d19b4 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -577,16 +577,16 @@ 
Feed

       

         The primary difference between a feed and other ARIA patterns that support loading data as users scroll, 
         e.g., a grid, is that a feed is a structure, not a widget. This means assistive
-        technologies with a reading mode, such as screen readers will default to reading mode when
+        technologies with a reading mode, such as screen readers, will default to reading mode when
         interacting with feed content, making the feed pattern most useful for blocks of
         unstructured information that may contain links or other interactive elements.
       

       

-        For example, a product page on a shopping site may have a related products section that
-        displays five products at a time and, as the user scrolls,  loads more product suggestions into the DOM.
-         While a static design might include a next button for loading five more products, a dynamic implementation
+        For example, a product page on a shopping site has a related products section that
+        displays five product suggestions at a time. As the user scrolls,  more suggestions are requested and loaded into the DOM.
+         While a static design might include a next button for loading five more product suggestions, a dynamic implementation
         that automatically loads data as needed simplifies the user
-        experience and reduces the inertia associated with viewing more than 5 suggestions.
+        experience and reduces the inertia of viewing more than the first five suggestions.
       

       

         Unfortunately, when web pages load content dynamically based on scroll events, it
@@ -654,8 +654,8 @@ 
Keyboard Interaction

             Options for supporting nested feed navigation include:
             
    
               
  • 
-                Users simply move focus into the nested feed from the content of the containing article with Tab. 
-                This may be slow if the aarticle contains a significant number of links, buttons, or other widgets.
+                Users move focus into the nested feed from the content of the containing article with Tab. 
+                This may be slow if the article contains a significant number of links, buttons, or other widgets.
                
    • 
               
  • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
    • 
               
  • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
    • 
@@ -673,7 +673,7 @@ 
    WAI-ARIA Roles, States, and Properties
    
             Otherwise, the feed element has a label specified with aria-label.
           
           
  • 
-            Each unit of content in a feedis contained in an element with role article.
+            Each unit of content in a feed is contained in an element with role article.
             All content inside the feed is contained in an article  element.
           
    • 
           
  • 
@@ -694,7 +694,7 @@ 
    WAI-ARIA Roles, States, and Properties
    
           
  • 
             Each article element has
             aria-setsize 
-            set to a value that represents either the total number of articles that have been loaded or the tototal number in the feed, 
+            set to a value that represents either the total number of articles that have been loaded or the total number in the feed, 
             depending on which value is deemed more helpful to users.
             If the total number in the feed is undetermined, it can be represented by a aria-setsize value of -1.
           
    • 

From 85aab94f404e7222d9f8d7d03085fe0967926dcb Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Wed, 8 Feb 2017 17:15:29 -0800
Subject: [PATCH 10/10] Fix issue #276 in tabs example

modified examples/tabs/tabs.html:
* Changed link in intro to point to `#tabpanel` instead of `#checkbox`
* Removed   comments that had instructions from the template.
---
 examples/tabs/tabs.html | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/examples/tabs/tabs.html b/examples/tabs/tabs.html
index 8e611bb74c..43734d45d0 100644
--- a/examples/tabs/tabs.html
+++ b/examples/tabs/tabs.html
@@ -2,37 +2,21 @@
 
   
     
-    
-
-    
     Tabs | WAI-ARIA Authoring Practices 1.1
 
     
     
     
 
-    
+    
     
   
   
     
    
-      
       
    Tabs
    
 
       
    
-          
-          The below example section demonstrates a tabs widget that implements the  design pattern for tabs.
+          The below example section demonstrates a tabs widget that implements the  design pattern for tabs.
       
    
 
       
    
@@ -203,7 +187,6 @@ 
    HTML Source Code