Skip to content

Change Log for June 2017 Working Draft

Matt King edited this page Jun 21, 2017 · 2 revisions

https the IPP URI

By Michael Cooper on Wed Dec 14 11:03:31 2016 -0500

View commit a8f4463

relative link fix

By Michael Cooper on Wed Dec 14 16:20:41 2016 -0500

View commit 5516e53

Fixing redirects, partial URIs

By Michael Cooper on Wed Dec 14 16:26:14 2016 -0500

View commit 6327d7c

Fixing tabindex for example button

By Manish Dahamiwal on Mon Dec 26 16:30:01 2016 +0530

View commit 0921775

Merge pull request #234 from mdahamiwal/mdahamiwal-button-fix

By James Nurthen on Thu Dec 29 20:46:18 2016 -0800

Fixing tabindex for example button

View commit a1551ef

updated button example

By Jon Gunderson on Fri Jan 13 16:53:28 2017 -0600

View commit 3ff5785

Update alert example to new template

By Michiel Bijl on Mon Jan 23 16:20:35 2017 +0000

View commit 9f3209e

Remove duplicate ID

By Michiel Bijl on Mon Jan 23 16:21:56 2017 +0000

View commit 2452223

Fix jscs error in button example

By Matt King on Mon Jan 23 15:14:15 2017 -0800

modified: examples/button/js/button.js to fix white space format issues.

View commit 56de6f7

Merge pull request #235 from jongund/button

By Matt King on Mon Jan 23 15:20:40 2017 -0800

Updated button example to fix problems listed in issue #189.

View commit 42e044a

Added Disclosure Design Pattern Placeholder

By Matt King on Tue Jan 24 15:41:12 2017 -0800

modified aria-practices.html: In the design pattern section, added a subsection placeholder for the disclosure (show/hide) design pattern with a link to issue #9.

View commit a50306d

Merge pull request #263 from jongund/menu-button to remove keypress charCode dependency

By Jon Gunderson on Mon Jan 30 11:22:01 2017 -0600

Addressess issue #249 for menu button examples.

View commit 50a45b3

Remove Enter as key for changing checkbox state

By Jon Gunderson on Mon Jan 30 11:50:17 2017 -0600

Resolve issue #233.

View commit a9b91bd

Initial implementation of two disclosure examples for issue #244

By Jon Gunderson on Mon Jan 30 18:37:14 2017 -0600

Adds two disclosure pattern examples. One for an image long description and one for answers in an FAQ.

View commit b930590

Fix disclosure example jscs errors

By Matt King on Mon Jan 30 16:47:07 2017 -0800

modified: examples/disclosure/js/disclosureButton.js Fixed 10 jscs errors using auto fix.

View commit 7c03546

Pre Element for HTML source in Example Page Templates

By Matt King on Tue Jan 31 09:28:14 2017 -0800

Fix issue #248 by changing the source code display div elements to pre elements and updating associated comments in:

  • examples/coding-template/Depricated-MultipleImplementationExample-Template.html
  • examples/coding-template/Example-Template.html

View commit 87214e5

Disclosure Pattern Outline for Issue #9

By Matt King on Tue Jan 31 10:18:14 2017 -0800

modified disclosure pattern section of aria-practices.html:

  • Add outline of disclosure pattern.
  • Draft keyboard subsection content.
  • Add links to roles/properties that need to be described.
  • Add links to disclosure example pages.

View commit cab8678

Fix HTML validation issue in toggle button description

By Matt King on Tue Jan 31 10:29:34 2017 -0800

modified aria-practices.html: Removed quote characters from the toggle button description and replaced them with named entities ".

View commit 7c233e1

Remove Presentation Role Section Review Issue Link

By Matt King on Tue Jan 31 11:20:01 2017 -0800

modified aria-practices.html: Remove link to issue #176 from presentation_role section.

View commit 6a5dd16

Remove Issue 178 Link from Children Presentational Section

By Matt King on Tue Jan 31 14:31:50 2017 -0800

modified aria-practices.html: Removed link to review issue #178 because the review of the children_presentational section is now complete.

View commit 502ddd8

removed keypress events for treeview examples

By Jon Gunderson on Tue Jan 31 17:19:26 2017 -0600

  • removed keypress events
  • Addresses issue #249 for treeview examples.

View commit 69a36ff

Separate aria 1.0 and aria 1.1 combobox example templates

By Matt King on Wed Feb 1 15:24:01 2017 -0800

  • 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.

View commit 93a8d91

Add tabs widget example that does not follow focus

By Michiel Bijl on Thu Feb 2 13:44:09 2017 +0000

View commit eb14297

Feed Pattern First Draft and Example Template

By Matt King on Fri Feb 3 07:17:10 2017 -0800

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

View commit f73152e

Fix HTML syntax errorin Feed Example Template

By Matt King on Fri Feb 3 07:30:02 2017 -0800

modified examples/feed/feed.html: Deleted partial comment that did not have correct comment markup.

View commit c798103

Editorial revision of feed pattern

By Matt King on Fri Feb 3 09:47:30 2017 -0800

modified aria-practices.html in the feed pattern section:

  • Add link to grid pattern.
  • Revise wording of description.

View commit 095aabf

Revise Intro for file directory tree with computed properties

By Matt King on Fri Feb 3 15:44:25 2017 -0800

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.

View commit 073a4b0

Updated link examples to latest example template

By Jon Gunderson on Mon Feb 6 01:06:19 2017 -0600

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.

View commit 7898a65

Breadcrumb Example Updates for issue #187

By Michiel Bijl on Mon Feb 6 17:37:58 2017 +0000

  • 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

View commit d0f7ae4

Make Link Context Menu Optional

By Matt King on Tue Feb 7 11:13:12 2017 -0800

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."

View commit 01be11e

Feed Pattern Editorial Revisions

By Matt King on Tue Feb 7 19:36:02 2017 -0800

modified the feed pattern section of aria-practices.html to fix multiple typos and make minor editorial revisions to the description of the pattern.

View commit 6f22bdd

Fix issue #276 in tabs example

By Matt King on Wed Feb 8 17:15:29 2017 -0800

modified examples/tabs/tabs.html:

  • Changed link in intro to point to #tabpanel instead of #checkbox
  • Removed comments that had instructions from the template.

View commit 85aab94

Resolve merge conflicts in tabs examples/breadcrumb/index

By Matt King on Wed Feb 8 23:38:28 2017 -0800

Modified examples/tabs/tabs-1/tabs.html to resolve conflicts when merging tabs branch with master for pull request #269:

  • Update href of design pattern link in intro paragraph
  • Update href of design pattern in link in footer nav
  • Delete some template comments

View commit a6bc19d

Add tabs widget example where selection does not follow focus

By Matt King on Wed Feb 8 23:44:00 2017 -0800

Merge for pull request #269 that resolves issue #152.

View commit 3d6f84e

Revise Titles of Tabs Examples

By Matt King on Thu Feb 9 00:37:55 2017 -0800

Made the titles of the examples:

  1. "Tabs With Automatic Activation"
  2. "Tabs With Manual Activation"

modified examples subsection of the tabs pattern in aria-practices.html:

  • Changed link text of links to examples
  • Added descriptions of examples after each link

modified examples/tabs/tabs-1/tabs.html:

  • Changed title tab and H1 to "Tabs With Automatic Activation"
  • Changed link text and description for the link to the manual activation tabs example.

modified examples/tabs/tabs-2/tabs.html

  • Changed title tab and H1 to "Tabs With Manual Activation"
  • Changed link text and description for the link to the automatic activation tabs example.

View commit 32e406c

Editorial, Template, and Functional Updates to Example of Tabs With Automatic Activation

By Matt King on Thu Feb 9 11:31:35 2017 -0800

modified examples/tabs/tabs-1/tabs.html:

  1. Move script elements to head so HTML source will display.

  2. Editorial revisions to introduction.

  3. Added link to section that provides guidance on selection follows focus.

  4. Per example template, Removed region around example and replaced with screen reader sepearator elements.

  5. Added aria-label="Entertainment" to the tablist.

  6. Added tabindex="0" to the tabpanel elements

  7. Editorial revisions to the keyboard table.

  8. Remove delete from keyboard table since it is not supported.

  9. In roles, states and properties table:

    • added scope attribute and TH elements per template.
    • Added row for aria-label on tablist
    • Added rows for aria-selected true and false on tab
    • Added row for aria-labelledby on tabpanel
    • Added row for tabindex on tabpanel.
  10. Per template, Added screen reader separators around HTML source display and removed role region from the source code display div.

  11. Added link to review issue #278.

View commit 4850426

Fix broken links to tabs examples

By Matt King on Thu Feb 9 11:51:33 2017 -0800

modified examples subsection of tabs design pattern section in aria-practices.html: The href attributes of the two links to tabs examples were missing the "tabs" subdirectory in their path.

View commit d3caf71

Editorial, Template, and Functional Updates to Example of Tabs With Manual Activation

By Matt King on Thu Feb 9 14:43:19 2017 -0800

modified examples/tabs/tabs-2/tabs.html:

  1. Move examples.js script element to head and fix src attribute path so HTML source will display.
  2. Make H1 content match page title.
  3. Editorial revisions to introduction.
  4. Correct href of link to tabs design pattern in introduction.
  5. Added link to section that provides guidance on selection follows focus.
  6. Per example template, Removed region around example and replaced with screen reader sepearator elements.
  7. Added aria-label="Entertainment" to the tablist.
  8. Added tabindex="0" to the tabpanel elements
  9. Editorial revisions to the keyboard table.
  10. Remove delete from keyboard table since it is not supported.
  11. In roles, states and properties table:
    • added scope attribute and TH elements per template.
    • Added row for aria-label on tablist
    • Added rows for aria-selected true and false on tab
    • Added row for aria-labelledby on tabpanel
    • Added row for tabindex on tabpanel.
  12. Per template, Added screen reader separators around HTML source display and removed role region from the source code display div.
  13. Corrected href attribute of link to tabs design pattern in footer nav.
  14. Added link to review issue #279.

View commit 70c1dc2

Clarify Tab Key Behavior in Tabs pattern

By Matt King on Fri Feb 10 18:02:19 2017 -0800

Modified tabs pattern keyboard section of aria-practices.html based on feedback from @shirsha in issue #278.

Changed: "Tab: When the tab list receives focus, places focus on the active tab element ." To: "Tab: When focus moves into the tab list, places focus on the active tab element ."

View commit 0879bb7

Clarify Tab Key Behavior on Tabs Widget Example Pages

By Matt King on Fri Feb 10 18:23:00 2017 -0800

Based on feedback from @shirsha in issue #278, made the two below changes in the following two files:

  1. examples/tabs/tabs-1/tabs.html
  2. examples/tabs/tabs-2/tabs.html

Change 1: Changed When the tab list is receiving focus, places focus on the active <code>tab</code> element . To: When focus moves into the tab list, places focus on the active <code>tab</code> element .

Change 2: Changed When the tab list contains the focus, moves focus to the <code>tabpanel</code> element. To: When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the <code>tabpanel</code> element.

View commit a69d871

Revise Intorduction of File Directory Treeview Example Using Declared Properties

By Matt King on Fri Feb 10 19:38:57 2017 -0800

Modified examples/treeview/treeview-1/treeview-1b.html for issue #224:

  • Fixed typos
  • Editorial revision to wording
  • Added description of function of example

View commit 842b59d

Revise Introduction of Navigation Treeview Example Using Computed Properties

By Matt King on Sat Feb 11 00:56:53 2017 -0800

Modified examples/treeview/treeview-2/treeview-2a.html for issue #225:

  • Corrected typos.
  • Editorial revision to wording.
  • Added description of function of the example.
  • Revised statement that said treeitems cannot contain interactive elements because they can contain other treeitems.

View commit 56bc1a8

Revise Introduction of Navigation Treeview Example Using Declared Properties

By Matt King on Sat Feb 11 01:09:11 2017 -0800

Modified examples/treeview/treeview-2/treeview-2b.html for issue #226:

  • Corrected typos.
  • Editorial revision to wording.
  • Added description of function of the example.
  • Revised statement that said treeitems cannot contain interactive elements because they can contain other treeitems.

View commit 30b4a44

Treeview Example Warning About Computed Position and Level Properties

By Matt King on Sat Feb 11 01:59:42 2017 -0800

Per issue #109, In the treeview examples that rely on browser calculation of position and level information, added guidance to declare position and level information if testing reveals gaps in support for automatic computation.

In "File Directory Treeview Example Using Computed Properties" in file "examples/treeview/treeview-1/treeview-1a.html", added two sentences to this paragraph:

"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 their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties."

In the Navigation Treeview Example Using Computed Properties in file "examples/treeview/treeview-2/treeview-2a.html", added two sentences to this paragraph:

"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 their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a Navigation Treeview using declared properties."

View commit 7dee95d

Revise features, keyboard, and states/properties for File Directory Treeview Example Using Computed Properties

By Matt King on Sun Feb 12 14:50:07 2017 -0800

For issue #223, modified examples/treeview/treeview-1/treeview-1a.html:

  • removed redundant information about computed level, setsize, and posinset from accessibility features section.
  • Added summary of treeview terminology with link to pattern.
  • Revisions for editorial consistency to keyboard table.
  • Updated states/properties section header.
  • Revisions for editorial consistency to states and properties table.
  • Removed level, setsize, and posinset rows since they are not used in this example.

View commit c718355

Revise features, keyboard, and states/properties for File Directory Treeview Example Using Declared Properties

By Matt King on Sun Feb 12 16:34:12 2017 -0800

For issue #224, modified examples/treeview/treeview-1/treeview-1b.html:

  • removed redundant information about computed level, setsize, and posinset from accessibility features section.
  • Added summary of treeview terminology with link to pattern.
  • Revisions for editorial consistency to keyboard table.
  • Updated states/properties section header.
  • Revisions for editorial consistency to states and properties table.

View commit 96d2313

Revise features, keyboard, and states/properties for Navigation Treeview Example Using Computed Properties

By Matt King on Sun Feb 12 21:39:46 2017 -0800

For issue #225, modified examples/treeview/treeview-2/treeview-2a.html:

  • Under accessibility features, removed redundant information about computed level, setsize, and posinset.
  • Under accessibility features, removed incorrect statement: "The expandable treeitem widgets cannot behave as links, their only action can be to open and close a leaf in the tree."
  • Added section summarizing treeview terminology with link to the pattern.
  • Corrected action defined for enter and space (had the action from the file tree example).
  • Revisions for editorial consistency to keyboard table.
  • Updated states/properties section header.
  • For the tree element, corrected row for label. It specified aria-label instead of aria-labelledby.
  • Revisions for editorial consistency to states and properties table.
  • Removed level, setsize, and posinset rows since they are not used in this example.

View commit dd45548

Revise features, keyboard, and states/properties for Navigation Treeview Example Using Declared Properties

By Matt King on Sun Feb 12 22:04:58 2017 -0800

For issue #226, modified examples/treeview/treeview-2/treeview-2b.html:

  • Under accessibility features, removed redundant information about computed level, setsize, and posinset.
  • Under accessibility features, removed incorrect statement: "The expandable treeitem widgets cannot behave as links, their only action can be to open and close a leaf in the tree."
  • Added section summarizing treeview terminology with link to the pattern.
  • Corrected action defined for enter and space (had the action from the file tree example).
  • Revisions for editorial consistency to keyboard table.
  • Updated states/properties section header.
  • For the tree element, corrected row for label. It specified aria-label instead of aria-labelledby.
  • Revisions for editorial consistency to states and properties table.

View commit 63cf981

Corrected Label Attribute Documentation for File Directory Treeview Examples

By Matt King on Sun Feb 12 22:17:32 2017 -0800

For issue #223, modified examples/treeview/treeview-1/treeview-1a.html:

  1. Added bullet describing tree role to the tree row of the roles, states, and properties table.
  2. In roles, states, and properties table, corrected the row for label of the tree element: changed from aria-label to aria-labelledby to reflect the example code.

For issue #224, Modified examples/treeview/treeview-1/treeview-1b.html:

  1. Added bullet describing tree role to the tree row of the roles, states, and properties table.
  2. In roles, states, and properties table, corrected the row for label of the tree element: changed from aria-label to aria-labelledby to reflect the example code.

View commit 0000208

menubar examples: removed keypress events and use images instead of entities

By Jon Gunderson on Mon Feb 13 18:29:40 2017 -0600

  • removed keypress events
  • Updated to use images instead of entities for visual indicators of down arrow, right arrow and checked state
  • removed unused images
  • updated example page notes to include information about using :before and :after CSS techniques for visual cues

View commit bbc4c09

button example: document need for tabindex on link without href

By Jon Gunderson on Mon Feb 13 18:39:54 2017 -0600

View commit b72db55

Treeview Examples: Remove keypress events and use images instead of entities for visual state information

By Jon Gunderson on Mon Feb 13 18:55:21 2017 -0600

  • removed keypress events
  • use images instead of entities for visual indicators of expanded/collapsed states.
  • Removed white space formatting errors in:
    1. examples/treeview/treeview-1/js/treeitem.js
    2. examples/treeview/treeview-2/js/treeitemLinks.js

View commit 0d6b2d0

Link Examples: Remove link 4 and Strengthen Visual Focus Indicator

By Michiel Bijl on Tue Feb 14 02:27:31 2017 +0000

Per issue #228, make changes to examples/link/link.html:

  1. Remove link 4, which used a background image that disappears in Windows high contrast mode.
  2. Edit introduction, states and properties table, and source code section to reflect removal of link 4.
  3. Change CSS to fix disappearance of custom focus ring on link 3.
  4. Change CSS to make the custom focus ring more visually distinct.

View commit d84d9a2

Make Breadcrumb Example Link Separators With CSS Boarders

By Michiel Bijl on Tue Feb 14 07:06:46 2017 +0000

Per discussion in issue #187, the visual separators between breadcrumb links are only for visual presentation and create unnecessary verbosity if they are announced by screen readers. This change displays them with CSS boarders so they are not announced.

This commit also includes revisions to the accessibility features section of the breadcrumb example page to describe this feature.

View commit 1cd36b7

Restored Delete to Example of Tabs With Automatic Activation

By Matt King on Tue Feb 14 00:43:51 2017 -0800

Per discussion in issue #278, modified examples/tabs/tabs-1/tabs.html:

  1. Added description of the delete feature in the accessibility features section.
  2. Added Delete to the keyboard table.
  3. To be consistent with editorial guidelines, gave key names initial caps in the keyboard table.

View commit a9d2f3f

Restored Delete to Example of Tabs With Manual Activation Per discussion in issue #279, modified examples/tabs/tabs-2/tabs.html:

By Matt King on Tue Feb 14 00:56:56 2017 -0800

  1. Added description of the delete feature in the accessibility features section.
  2. Added Delete to the keyboard table.
  3. To be consistent with editorial guidelines, gave key names initial caps in the keyboard table.

View commit 247026c

Change Disclosure Examples to Use DL Semantics restore use of DL/DT/DD and use button element (#282)

By Jon Gunderson on Tue Feb 14 17:21:33 2017 -0600

  • updated example to use images instead of entities for visual state information and removed the use of DL/DT/DD elements in FAQ example

  • Updated disclosure example, restored DL, DT and DD and used the button element instead of span elements with role=button

  • Revisions to disclosure FAQ Example

modified: examples/disclosure/disclosure-faq.html:

  • Moved answers inside of a p element inside of the dd element.

  • Fixed call to method for displaying html source.

  • Editorial revisions.

  • Editorial Corrections to Disclosure Examples

modified examples/disclosure/disclosure-faq.html:

  • Revised title and H1 to include the word "Example".

modified examples/disclosure/disclosure-img-long-description.html:

  • Revised title and H1 to include the word "Example".
  • Change heading inside of example to H3
  • Fix typos
  • Editorial revision to wording of accessibility features for clarity.

View commit 9009bf5

Change Disclosure Examples to Use DL Semantics and Revise CSS

By Jon Gunderson on Tue Feb 14 17:21:33 2017 -0600

Per discussion in issue #264 and #265 for review of disclosure examples, made the following changes.

  1. Use CSS generated images instead of entities for visual state information
  2. For disclosure controls, use HTML button element instead of span elements with role=button
  3. In FAQ, moved answers inside of a p element inside of the dd element.
  4. Fixed call to method for displaying html source.
  5. Revised title and H1 to include the word "Example".
  6. Change heading inside long description example to H3 from H2
  7. Fix typos
  8. Add accessibility features section describing use of CSS.

View commit db57547

Amend commit statement for merge of pull request #282

By Matt King on Tue Feb 14 15:35:05 2017 -0800

View commit 7b232dd

After tab deletion focus is correctly set

By Michiel Bijl on Wed Feb 15 00:45:50 2017 +0000

View commit 47b9529

Menu pattern fixes for issues 215 and 266

By Matt King on Mon Jan 30 17:54:53 2017 -0800

modified the menu pattern section of aria-practices.html.

For issue #215, modified states and properties subsection:

  • Added a statement that parent menuitems contain their submenu.
  • Added statement that parent menuitems are labeled with aria-label or aria-labelledby.
  • Simplified aria-haspopup statement to use parent menuitem terminology.

For issue #261, modified states and properties subsection:

  • Added a statement for aria-orientation of menubar.
  • Added a statement for aria-orientation of menu.

View commit cbe304b

Add Presentation to DL in Accordion Example

By Matt King on Wed Feb 15 21:52:20 2017 -0800

modified: examples/accordion/accordion1.html to address feedback in issue #210 from @jasonkiss:

  1. Added role presentation to the dl element.
  2. Added a row to the states and properties table for the presentation role.
  3. Revised the heading row of the states and properties table.
  4. Revised the aria-level row of the states and properties table.

View commit c63e7aa

Include Optional Region Role in Accordion Pattern

By Matt King on Thu Feb 16 07:31:28 2017 -0800

modified aria-practices.html To address feedback from @annabbott and @jasonkiss in issue #210. Added the following text to the roles, states, and properties section of the accordion pattern:

Optionally, each element that serves as a container for panel content has role region and aria-labelledby with a value that refers to the button that controls display of the panel.

  • Avoid using the region role in circumstances that create landmark region proliferation, e.g., in an accordion that contains more than approximately 6 panels that can be expanded at the same time.
  • Role region is especially helpful to the perception of structure by screen reader users when panels contain heading elements or a nested accordion.

View commit e07aa78

Remove Issue #210 Feedback Link From Accordion Example Page

By Matt King on Thu Feb 16 07:37:06 2017 -0800

View commit 7cbf6f8

New design for tabs widget

By Michiel Bijl on Fri Feb 17 01:12:58 2017 +0000

View commit 1b7de6b

Fix broken link to css file in tabs example pages

By Matt King on Thu Feb 16 23:03:07 2017 -0800

View commit b5c5b61

Alert Example Page Editorial Revisions

By Matt King on Fri Feb 17 01:10:04 2017 -0800

Made the following changes to examples/alert/index.html:

  1. Moved alert role to <div id="example">. It was previously part of the text inserted when the button was activated.
  2. Moved the script template from the head element to the example div so it will be included in the source code section.
  3. Made editorial revisions to the introduction.
  4. Added some explanitory text to the example.
  5. Revised the accessibility features content to eliminate redundant information and explain how assistive technologies may exploit the alert role.
  6. Made editorial revisions to the roles, states, and properties table.
  7. Replaced source code display section with template version of the section. It previously contained manually generated text that didn't match the actual source.

View commit 9a30de1

Hide alert when empty, manual source code

By Michiel Bijl on Fri Feb 17 10:46:55 2017 +0000

View commit 5423bf7

New design for code blocks

By Michiel Bijl on Fri Feb 17 11:41:23 2017 +0000

View commit 01ae36a

New design for all example pages (#296)

By Michiel Bijl on Sat Feb 18 22:22:13 2017 +0000

  • Included default spec stylesheet
  • Added a style for <kbd>
  • Added some fixes on top of the default spec sheet to fix table styles

View commit f74dc3a

Remove internal page because Travis tripped over it

By Michiel Bijl on Sat Feb 18 22:48:39 2017 +0000

View commit 02f2234

Exclude highlight.js from jscs

By Michiel Bijl on Sat Feb 18 22:52:03 2017 +0000

View commit c4f2b7d

Button design (#298)

By Michiel Bijl on Sat Feb 18 23:02:45 2017 +0000

  • New style for examples pages

  • Correct breadcrumb links

  • New design for code example pages

  • Update button design

View commit 18d9133

Fix width of example pages on large screens

By Michiel Bijl on Sat Feb 18 23:10:08 2017 +0000

View commit e74ba02

Prevent icon from triggering state change

By Michiel Bijl on Sat Feb 18 23:56:09 2017 +0000

View commit 8c23a88

New design for checkboxes

By Michiel Bijl on Mon Feb 20 18:55:02 2017 +0000

View commit 4781f28

New design for accordion example

By Michiel Bijl on Wed Feb 22 01:50:02 2017 +0000

View commit 7d71a01

Fix link example outline in Firefox

By Michiel Bijl on Wed Feb 22 01:53:17 2017 +0000

View commit cd4bf0b

Add Visual Indicators That Arrow Keys Work to Layout Grid Example

By Tatiana Iskandar on Wed Feb 22 00:31:11 2017 -0800

For issue #227, in the first layout grid example in examples/grid/LayoutGrids.html:

  1. Change the focus ring in the grid to include indicators that directional navigation is available with the arrow keys.
  2. Add a NUX in a labeled region after the grid. The NUX explains the meaning of the indicators.
  3. The NUX is the first item in the tab sequence after the grid.
  4. When users close the NUX, focus returns to the grid.

View commit 7ecba6f

Slider example update to fix issue #229 and #230

By Jon Gunderson on Wed Feb 22 06:36:09 2017 -0600

  • Update focus style
  • Update page title
  • Update description
  • Fix JSCS bugs

View commit 3b8c118

Rename accordion example file

By Michiel Bijl on Wed Feb 22 12:51:00 2017 +0000

View commit 8787afd

New design for radio button examples

By Michiel Bijl on Wed Feb 22 13:34:01 2017 +0000

View commit 347a83f

Added check for this.deleteButton (#303)

By thomascorthals on Tue Feb 28 02:27:21 2017 +0100

Check if this.deleteButton is set before trying to change an attribute on it after a select item is toggled.

View commit a603344

Layout Grid Example: Show Keyboard NUX only if Grid Focused With Tab Key

By Tatiana Iskandar on Thu Mar 9 15:51:25 2017 -0800

Introduce an enhancement for the layout grid example review in issue #227.

The first layout grid provides a NUX to help new keyboard users understand that arrow keys can be used to navigate. This change will cause the NUX to be displayed only if the grid receives focus via the tab key.

View commit a00c079

Grid Examples: Before Moving Focus, Identify Focused Element

By Tatiana Iskandar on Thu Mar 9 16:12:46 2017 -0800

Focus may move inside the grid as a result of a mouse click or screen reader call to an accessibility API. This change adds a check for the location of focus before processing navigation key events.

View commit 067d52f

Listbox Example: Add Scroll Support

By thomascorthals on Fri Mar 10 19:59:28 2017 +0100

  1. Adds js for visual scrolling when using keyboard navigation in a listbox with scrollHeight > clientHeight.
  2. Adds third example implementation with larger set of options to demonstrate scrolling.

View commit 3500257

Feed Example: Add JS and Content

By Tatiana on Thu Feb 9 14:34:06 2017 -0800

For issue #246, add javascript and content for an example feed.

View commit 7ba516c

Editorial Revision of Feed Pattern

By Matt King on Tue Feb 7 19:19:37 2017 -0800

For issue #245, modified feed pattern section in aria-practices.html to correct multiple typos and make minor editorial revisions to wording of the description.

View commit 574dc1b

Link Examples: Remove Review Issue Link

By Matt King on Fri Mar 10 16:33:36 2017 -0800

The review process is now complete for this example page.

modified examples/link/link.html: Removed paragraph with link to issue #228, which was the review issue for this example.

View commit e74f3aa

FAQ Disclosure Example: Fix Typos Described in Issue 265

By Matt King on Fri Mar 10 17:35:12 2017 -0800

modified examples/disclosure/disclosure-faq.html: Corrected two misspellings of the word "hidden" identified by @annabbott in issue #265.

View commit 16b75b4

Horizontal Slider Example: Revised for Consistency with Editorial Guidelines and Example Template

By Matt King on Sat Mar 11 08:28:28 2017 -0800

For issue #229, modified examples/slider/slider-1.html and examples/slider/css/slider.css:

  1. Changed title from "Color Picker Using Slider Widgets" to "Horizontal Slider Example".
  2. Made H1 consistent with title element.
  3. Added link to review issue.
  4. Added link to design pattern in intro paragraph and made editorial revisions and corrections.
  5. Made editorial revisions and corrections to vertical slider link and description.
  6. Moved stylles for idColorBox and idColorInfo divs to slider.css from <head> element so they are viewable by the reader as part of the example.
  7. Changed the heading inside of the example to H3 from H2 so it fits in the structure of the page.
  8. Added missing screen reader separator element that marks the end of the example code.
  9. Fixed H2 for roles, states, and properties to be consistent with template.
  10. Added a row for tabindex to the attributes table and made other editorial revisions and corrections.
  11. Fixed href value of design pattern link in nav footer.

View commit a7cca9c

Slider Example with aria-orientation: Editorial Revisions

By Matt King on Sat Mar 11 17:23:47 2017 -0800

For issue #230, made following changes to examples/slider/slider-2.html to make it consistent with editorial guidelines and the template for examples:

  1. Changed title to "Slider Examples with aria-orientation and aria-valuetext"
  2. Made H1 consistent with title element.
  3. Added link to review issue.
  4. Added link to design pattern in intro paragraph and made editorial revisions and corrections.
  5. Made editorial revisions and corrections to horizontal slider link and description.
  6. Removed region role from example container.
  7. Removed an H2 heading before the horizontal sliders and made all three sliders part of a single example container.
  8. Added missing separator elements that mark the start and end of the example container for screen reader users.
  9. Made editorial revisions to the keyboard table.
  10. Made text of H2 for roles, states, and properties consistent with template.
  11. Added a row for tabindex to the attributes table and made other editorial revisions and corrections.
  12. Fixed href value of design pattern link in nav footer.

View commit 00e896d

Horizontal Slider Example: Update Similar Example Link

By Matt King on Sat Mar 11 17:50:11 2017 -0800

For issue #229, modified examples/slider/slider-1.html: changed the name and description of the link to the thermostat slider example. The name of that example was changed when working on issue 230.

View commit 132777b

Slider Pattern: Minor Editorial Revisions

By Matt King on Sat Mar 11 18:10:39 2017 -0800

Modified slider design pattern section in aria-practices.html:

  1. Changed keyboard list to put one key per list item per editorial guidelines.
  2. Made example link names and descriptions consistent with the updated example pages.

View commit d99821f

Disclosure Examples: Fix Space Bar Bug

By Jon Gunderson on Sun Mar 12 11:41:24 2017 -0500

For issue #311:

  1. Update js so space bar now toggles the expanded/collapsed state of the disclosure.
  2. Update documentation.

View commit db44c5a

Examples JS: Resolve issue #294 for HTML Source Display on Example Pages

By Jon Gunderson on Mon Mar 13 12:02:07 2017 -0500

Updated code generation script to:

  1. exclude container element
  2. Include comments
  3. fixed problem that excluded script element content.

View commit 5dc7b50

Button Examples: Editorial Revisions for Issue #189

By Matt King on Tue Mar 14 15:35:51 2017 -0700

Modified examples/button/button.html:

  1. Add link to review issue 316.
  2. Fix href of links to button design pattern.
  3. Revise wording of introduction.
  4. Add links to menubutton examples.
  5. Add elements from template that provide separators that mark start and end of example for screen reader users.
  6. Remove two H2 headings for the buttons and replace with a single H2 for the example section.
  7. Editorial revisions to keyboard table.
  8. Editorial revisions to states and properties table.

View commit 4cc308d

Fix 3 JSCS Errors in examples.js and disclosure

By Matt King on Tue Mar 14 15:46:30 2017 -0700

View commit b655696

set list-style=none

By Jon Gunderson on Tue Mar 14 21:57:54 2017 -0500

View commit e7019fd

Slider Examples: Include tabindex in HTML and Improve Rail Focus Indicator

By Jon Gunderson on Wed Mar 15 13:33:34 2017 -0600

For issues #229 and #230, In response to feedback from @mcking65 logged in issue #229, made the following changes for both slider example pages:

  1. Include tabindex for thumbs in HTML; was previously added with javascript during instantiation.
  2. Remove note about dynamic addition of tabindex from roles, states, and properties tables.
  3. Improve focus styling of rail.
  4. Removed un used CSS.

View commit 039ee3f

Initial HTML/JS draft for modal dialog example

By Matt King on Fri Nov 18 13:43:41 2016 -0800

View commit 2493510

Modal Dialog Example: Start Review Process

By Matt King on Wed Mar 15 18:06:43 2017 -0700

The modal dialog example development for issue #103 is complete. The following changes start the review process.

Modified aria-practices.html to replace link to issue 103 with a link to the new example page. Modified examples/dialog-modal/dialog.html to add link to review issue 321.

View commit 7192755

Tabs Examples: Fix Typo and Revise Titles

By Matt King on Wed Mar 15 22:04:22 2017 -0700

On pages for both tabs with automatic activation and tabs with manual activation, made changes to:

  1. Fix missing space character in keyboard table noticed by @annabbott in issues #278 and #279.
  2. For editorial consistency, added "Example of " to the beginning of the title in title tag, H1, and in link text.
  3. Lower case "with" in titles.

View commit 9b3de6e

Button Example: Fix Grammar Error for Issue #316

By Matt King on Thu Mar 16 00:42:32 2017 -0700

Per comment by @annabbott in issue #316, Modified examples/button/button.html: changed "a A element" to "an A element".

View commit 3591c38

Add automatic source code example generation back to alert

By Michiel Bijl on Thu Mar 16 15:47:41 2017 +0100

View commit ef34006

Radio Example: correct path to CSS

By Michiel Bijl on Thu Mar 16 17:33:08 2017 +0100

View commit 4073006

Close Review for Slider Examples with aria-orientation and aria-valuetext

By Matt King on Thu Mar 16 09:33:50 2017 -0700

The review process for this example is now complete.

Modified examples/slider/slider-2.html to remove link to review issue #230.

View commit 48e0189

Data Grid Example: Add Similar Example Links and Revise Properties Table

By Matt King on Thu Mar 16 10:11:12 2017 -0700

Modified examples/grid/dataGrids.html:

  1. In the introduction, add links to layout grid and advanced data grid examples.
  2. IN roles, states, and properties table, make editorial changes to rowcount and colcount rows suggested by @annabbott in issue #160.

View commit 74a2d14

Modal Dialog Example: Fix Style Issues

By Matt King on Thu Mar 16 10:52:31 2017 -0700

Per feedback in issue #321 from @annabbott, modified examples/dialog-modal/dialog.html so it matches current example template styles:

  1. Added link to w3c style sheet.
  2. Add highlight.pack.js script.
  3. Add "def" class to keyboard table.
  4. Add data and attributes classes to properties table.

View commit 162bb98

Modal Dialog Example: Describe Maintaining Point of Regard

By Matt King on Thu Mar 16 11:36:28 2017 -0700

Per feedback from @annabbott in issue #321, modified: examples/dialog-modal/dialog.html. In the "Accessibility Features" section, added bullet points that describe how each dialog maintains the user's point of regard when it closes.

View commit 25f97a6

Close Review of Horizontal Slider Example

By Matt King on Thu Mar 16 12:16:49 2017 -0700

The authoring practices task force review process is complete for this example. Modified examples/slider/slider-1.html to remove link to review issue #229.

View commit 10f0a8e

Document Status Section with GitHub Issues Link

By Matt King on Thu Mar 16 13:27:37 2017 -0700

Per @MichielBijl's suggestion in issue #288, modified aria-practices.html to include a "Status of this Document" section that includes a link to github for feedback.

View commit 5ca6a91

Complete Draft of Dialog Pattern

By Matt King on Thu Mar 16 15:40:23 2017 -0700

For issue #42, made the following changes to dialog_modal section of aria-practices.html:

  1. Minor editorial revisions to the introduction for clarity.
  2. Made reference to nonmodal dialogs a link to the nonmodal pattern.
  3. Added notes providing guidance on initial focus placement.
  4. Included a link to alert dialog pattern for circumstances where the dialog is confirming a destructive action.
  5. Expanded guidance for focus placement after the dialog closes.
  6. Added link to review issue 325 and removed link to development issue #42.

View commit b59b3df

Tree Pattern and Examples: Clarify Home Key Description

By Matt King on Thu Mar 16 16:28:54 2017 -0700

For issues #223, #224, #225, and #226, modified the keyboard table of the tree view example pages and the keyboard section of the tree view design pattern. For the description of the Home key, per suggestion from @annabbott and @MichielBijl, added the phrase "without opening or closing a node".

View commit 3c6c0e2

Merge pull request #319 from jongund/checkbox

By James Nurthen on Fri Mar 17 09:34:15 2017 -0700

Checkbox Example (Mixed State): Hide bullets in checkbox list

View commit f566b21

Alert Example: Add lang definitions to alert text

By Michiel Bijl on Mon Mar 20 15:17:03 2017 +0100

View commit d7b2db4

Remove redundant CSS files

By Michiel Bijl on Mon Mar 20 15:53:56 2017 +0100

View commit 5ea0e2b

Button Example: Moved SVG for mute button to external file (pull #333)

By Jon Gunderson on Mon Mar 20 11:52:32 2017 -0500

The svg for the toggle button was inline in the button.html file. To be consistent with other examples and with the template, moved that svg code to an svg file.

View commit ff402d0

Modal Dialog Example: fix overflow style (Pull #335)

By Tatiana Iskandar on Mon Mar 20 11:22:12 2017 -0700

View commit 70a696a

Disclosure FAQ Example: Completed Review Process

By Matt King on Mon Mar 20 12:10:38 2017 -0700

Review process is complete for examples/disclosure/disclosure-faq.html. Removed link to review issue #265.

View commit ce02202

Modal Dialog Example: Fix Scrolling (pull #337)

By Tatiana Iskandar on Mon Mar 20 13:52:37 2017 -0700

For issue #321, fix issue where underlying page scrolls when dialog scrolls.

  1. Move dialog divs to div outside of main container.
  2. Only scroll the dialog layer when a dialog is open.

View commit b90d2de

Dialog Example: Fix HTML Source Display

By Matt King on Mon Mar 20 14:07:11 2017 -0700

For issue #321, because pull #337 moved dialog divs after the main content, the call to scripts for displaying the html source needed to be moved after the main content.

modified examples/dialog-modal/dialog.html: Move call to html source display scripts after the dialog_layer div.

View commit d2dd6cc

Button Example: Completed Task Force Reviews

By Matt King on Mon Mar 20 21:01:02 2017 -0700

The Authoring Practices Task Force review process is now complete for this example. The revisions prescribed by issue #189 and reviewed in issue #316 are complete.

Modified examples/button/button.html: Close task force review process by removing link to review issue #316.

View commit ec52a5e

Example Pages: Grid Lines for Role, Property, State, and Tabindex Attributes Tables (pull #329)

By James Nurthen on Mon Mar 20 21:23:50 2017 -0700

For issue #168, modified examples/css/core.css to have grid cell lines in complete table.

View commit 0b49e3a

Menu Design Pattern: Document Optional Behaviors for Space and Up Arrow

By Matt King on Mon Mar 20 21:52:42 2017 -0700

For issue #336, modified keyboard interaction subsection of menu or menubar design pattern section in aria-practices.html:

  1. Mark space bar toggle of menuitemcheckbox as optional.
  2. Mark space bar toggle of menuitemradio as optional.
  3. Add optional up arrow behavior for menuitem elements in a menubar. (Note, this behavior is implemented in the examples).

View commit d97757d

Dialog Pattern: Address @jnurthen review feedback in issue #325

By Matt King on Wed Mar 22 11:58:42 2017 -0700

Modify the modal dialog design pattern section in aria-practices.html to:

  1. Recommend tabindex of -1 when focusing static elements at the top of large dialogs.
  2. Rephrase initial focus guidance for potentially destructive actions.
  3. Add aria-modal to states and properties.

View commit ba0a447

Modal Dialog Pattern: Add aria-hidden guidance

By Matt King on Wed Mar 22 12:08:37 2017 -0700

For issue #325, modified the modal dialog design pattern section of aria-practices.html to add:

Optionally, if content outside a dialog is completely inert and visually obscured to an extent that is intentionally unreadable, each element containing a portion of the inert layer has aria-hidden set to true. In this circumstance, the dialog container element cannot be a descendant of an element that has aria-hidden set to true. However, if content outside a modal dialog is visually discernable, aria-hidden is not present.

View commit b805355

Example of Tabs with Automatic Activation: Task Force Reviews Completed

By Matt King on Wed Mar 22 14:06:34 2017 -0700

The task force reviews of this example are complete and documented in issue #278.

removing the link to review issue #278 from the example page -- examples/tabs/tabs-1/tabs.html.

View commit 0899241

Modal Dialog Example: IE polyfill for remove and checks for focus (pull #343)

By Tatiana Iskandar on Thu Mar 23 12:15:53 2017 -0700

To fix IE issues raised by @accdc in issue #321, added polyfill for remove and checks for focus.

View commit 7862b13

Modal Dialog example: Update replace logic for IE ( pull#344)

By Tatiana Iskandar on Thu Mar 23 14:16:23 2017 -0700

For issue #321, change logic so that, when using IE, focus is set correctly on the last element instead of the first element in the add confirmation dialog.

View commit a9d5771

Modal Dialog Example: Change tabindex from 0 to -1 when putting initial focus on static element

By Matt King on Thu Mar 23 14:58:48 2017 -0700

For issue #321, to make the example match the design pattern update made in commit ba0a447, made the following changes.

modified examples/dialog-modal/dialog.html:

  1. On first paragraph of verification dialog (dialog2), change tabindex from 0 to -1 to match guidance in pattern.
  2. Change script call on button that opens verification address dialog to specify id of first paragraph.

modified examples/dialog-modal/js/dialog.js: Fix bug where the window.openDialog method didn't pass through the firstFocus parameter to the dialog constructor.

View commit cccb08b

add grid arrow key indicator to corner of page

By Tatiana on Mon Mar 20 09:57:33 2017 -0700

View commit 9f2a013

changed focus outline for grid to dotted line

By Tatiana on Thu Mar 23 11:26:00 2017 -0700

View commit 23f171f

Updated NUX description to describe new focus indicators

By Tatiana on Thu Mar 23 14:56:54 2017 -0700

View commit 7463d3b

Add focus indicators to datagrids

By Tatiana on Thu Mar 23 15:06:40 2017 -0700

View commit 277267e

Layout Grid Example: NUX Revision and Example Notes

By Matt King on Fri Mar 24 11:49:35 2017 -0700

Revised NUX wording. Added information about the NUX and arrow key nav indicators to the notes section of example 1.

View commit b5f90db

General: Remove references to table.css #338

By Michiel Bijl on Mon Mar 27 15:44:36 2017 +0100

View commit b5ba28c

Example design: correct colour contrast #292

By Michiel Bijl on Mon Mar 27 15:57:01 2017 +0100

View commit 6e95c37

General: simplify table CSS #328

By Michiel Bijl on Mon Mar 27 16:12:46 2017 +0100

View commit e389a15

Spelling correction

By Jonathan Neal on Fri Mar 31 00:47:29 2017 -0400

�ssection� should be �section�

View commit 15e849e

Merge pull request #350 from jonathantneal/fix/typo

By James Nurthen on Thu Mar 30 21:48:33 2017 -0700

Spelling correction

View commit dee0daf

Grid Examples: Do not focus menu buttons on page load (pull #354)

By Tatiana Iskandar on Mon Apr 10 00:40:12 2017 -0700

For issue #160, fix issue where menubutton elements in the grids were receiving focus when the page loaded. They should not be focused automatically.

View commit b06858a

Feed Example: Fix Styling Dependency on table.css (pull #349)

By Tatiana Iskandar on Mon Apr 10 00:53:07 2017 -0700

For feed example development issue #246, fix styling problems that resulted from removal of examples/css/table.css as described in issue #338.

This fixes infinite scroll FF.

View commit 207db41

Merge pull request #339 from w3c/issue336

By James Nurthen on Mon Apr 10 08:09:37 2017 -0700

Menu Design Pattern: Document Optional Behaviors for Space and Up Arrow

View commit 5121320

Modified langauage to add caveats for not using aria-hidden on dialogs

By jnurthen on Mon Apr 10 08:38:27 2017 -0700

#325

View commit 2c8f898

Menubar Example: Change Space Bar Behavior (pull #340)

By Matt King on Fri Apr 14 15:20:55 2017 -0700

This commit includes changes made by @jongund for issue #324.

It includes the following changes.

  1. Behavior of space bar: When focus is on menuitemradio or menuitemcheckbox, space will now activate the item without closing the menu. Enter and click still activate and close the menu.
  2. Removed the initialization javascript from the html file and put it into a new file -- menubar-2-init.js.
  3. Add documentation to the keyboard table in the html file about the optional space bar behavior.

These changes were originally part of pull #332, but merging 332 was too complicated due to conflicts with files outside of the menubar pattern. So, @mcking65 copied the menubar pattern changes into a fresh branch made from the latest master and created pull #340. Pull #348 added additional commits before the squash and merge.

View commit 34894e8

Image Description Disclosure Example: Revised alt and figcaption text and left align figcaption (pull #315)

By Jon Gunderson on Sun Apr 16 17:58:01 2017 -0500

Made the following updates for issue #264.

  1. Made the alt text and figcaption text different so the alt text is brief and the caption is more detailed:
    • Revise alt text to be shorter.
    • Revise figcaption text to include english translation of text that is in the figure.
  2. To be consistent with HTML requirements for figcaption, made figcaption last element in figure.
    • Structured text in figcaption element with <p> elements.
    • Moved disclosure button and disclosure content inside of the <figcaption> element.
  3. Updated CSS to improve styling and left align the caption.

View commit 383f192

Tabs with Manual Activation Example: Task Force Review Complete

By Matt King on Sun Apr 16 23:25:07 2017 -0700

The Practices Task Force review of this example page is now complete as discussed in the telecon on April 10, 2017.

Modified examples/tabs/tabs-2/tabs.html to remove link to review issue #279.

View commit db3bb0a

fixed file reference

By Jon Gunderson on Mon Apr 17 14:36:32 2017 -0500

View commit aae7fcb

Menubar Example: fix script file reference (pull #359)

By Matt King on Wed Apr 19 17:35:04 2017 -0700

For issue #355, fixed typo in script src attribute. Correct styleManager.js is now loaded and menuitem widths are now consistent.

View commit 1ee2944

Long Description Disclosure Example: Correct Typos in Disclosure H3

By Matt King on Wed Apr 19 19:22:33 2017 -0700

For issue #264, per feedback from @annabbott, modified examples/disclosure/disclosure-img-long-description.html: Corrected two typos in the H3 contained inside the disclosure.

View commit faad012

Image Description Disclosure Example: Task Force Review Process Completed

By Matt King on Fri Apr 21 14:35:33 2017 -0700

The Authoring Practices Task Force review process for this example page is now complete.

Modified examples/disclosure/disclosure-img-long-description.html to remove link to review issue #264.

View commit e12e7ae

Changed dialog to use absolute positioning; made dialogs fullscreen on mobile

By Tatiana on Fri Apr 21 14:48:28 2017 -0700

View commit fc666fe

Modal Dialog Example: Use Absolute Position and Make Full Screen For Small Devices (pull #370)

By Matt King on Fri Apr 21 15:01:35 2017 -0700

For issue #321, to address feedback from @jnurthen, changed modal dialog to:

  1. Use absolute positioning instead of fixed positioning.
  2. Make full screen if screen size less than 640PX.

View commit b526164

add momentum scrolling and use same height for layer as main window

By Tatiana on Fri Apr 21 15:39:59 2017 -0700

View commit 0ab5112

Modal Dialog Example: Change Dialog Layer Height and Add Momentum Scrolling (pull #371)

By Matt King on Fri Apr 21 15:54:32 2017 -0700

For issue #321, change the modal dialog example to:

  1. Add momentum scrolling.
  2. Make dialog layer same height as main window.

View commit 4ebce80

Treeview Examples: Fix Left Arrow and Modifier Key Behaviors (pull #374)

By Jon Gunderson on Mon Apr 24 11:20:17 2017 -0500

  1. For issues #364 and #367, fix modifier key behavior. When a modifier key is pressed, the key press is ignored. One defect remains with modifiers: if shift is the only modifier pressed in combination with a printable char, the key press should not be ignored.
  2. To fix issue #365, changed left arrow behavior so a branch is not collapsed when navigating from a child node to a parent node.
  3. Fixed a formatting bug.

View commit 1197fa6

Add paragraph to note that controls must be child nodes of dialogs

By jnurthen on Mon Apr 24 09:32:38 2017 -0700

#325

View commit 215367e

Modal Dialog Example: Make Full Screen on Small Devices (pull #373)

By Tatiana Iskandar on Mon Apr 24 09:44:31 2017 -0700

For issue #321, when displayed on screen under 640px, make the dialog full screen with no margins.

View commit cfa6cfd

#325 Changes based on review on 4/24/2017

By jnurthen on Mon Apr 24 10:45:26 2017 -0700

Moved child element dfiscussion to states and properties section

View commit aaa8536

Treeview Examples: Treeview Fix Shift and Enter Key Handling (pull #377)

By Jon Gunderson on Tue Apr 25 01:50:47 2017 -0500

For issue #364, fix bug preventing Enter, CTRL+Enter, and Shift+Enter from executing links in the navigation treeview examples.

For issue #367, allow the Shift modifier to be used with printable characters for typeahead in the treeviews.

View commit 81865eb

Menu Button Examples: Add activedescendant example and fix multiple bugs (pull #375)

By Jon Gunderson on Wed Apr 26 13:45:06 2017 -0500

Made the following changes to the menu button examples:

  1. Added an example that uses aria-activedescendant to manage focus in the menu; there are now three example pages instead of two.
  2. For issue #363, changed how aria-expanded is implemented.
  3. fixed a formatting bug.
  4. Fixed link execution bugs; enter, ctrl+enter, and shift+enter all work as expected in the navigation menu example.
  5. Fixed alt, ctrl, and meta key modifier bugs; Key events that include these key events are no longer captured and ignored by the JavaScript.
  6. Put all three example HTML files in the same directory.
  7. Made numerous editorial corrections and revisions to improve accuracy and clarity.

View commit 35cd0b9

Menu Button Pattern: update Example Link List (pull #376)

By Jon Gunderson on Wed Apr 26 15:35:47 2017 -0500

  1. Add link to new aria-activedescendant menu button example.
  2. Correct HREF attributes for existing menu button example links.
  3. Revise descriptions of menu button examples.

View commit 91ff2e6

Menu Button Pattern: Guidance for aria-controls and aria-expanded

By Matt King on Wed Apr 26 15:17:31 2017 -0700

Modified aria-practices.html:

  1. Added guidance for aria-controls stating that using aria-controls is optional and how to set it.
  2. For issue #362, added guidance for aria-expanded: set true when menu displayed and remove when not displayed, alternatively set false when menu is hidden.

View commit dc12564

To address feedback from @MichielBijl in issue #325, made the following changes to the modal dialog pattern.

By Matt King on Wed Apr 26 20:31:02 2017 -0700

Change 1: Replaced "If a dialog is limited to interactions that either provide additional information or continue processing, it might set focus to the element deemed to be most frequently desired, such as a �OK� or �Continue� button." with "If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an �OK� or �Continue� button."

Change 2: Replaced "When a dialog closes, focus typically returns to the element that had focus before the dialog was invoked. This is often the control that opened the dialog. In circumstances where that element no longer exists, focus is set on an element that supports a logical work flow." with "When a dialog closes, focus is set on an element that supports a logical work flow. If the element that had focus before the dialog was invoked still exists, that element is usually the most appropriate choice."

Also made the following additional revisions and editorial consistency corrections.

Change 1: Replaced "The window under a modal dialog is typically inert; users cannot interact with content outside the dialog window. If the background window is not inert, then interaction with elements in the background window cause the modal window to close." with "Windows under a modal dialog are inert; users cannot interact with content outside an active dialog window. The inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close."

Change 2: Added a third note to the keyboard section notes: "3. It is strongly recommended all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button, and that the element is in the Tab sequence."

Changed 3: Replaced "All controls required to operate the dialog are child nodes of the element which has role set to dialog." with "All elements required to operate the dialog are descendants of the element that has role dialog."

Change 4: Replaced "The aria-describedby property can be set on the element with the dialog role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog." with "Optionally, the aria-describedby property is set on the element with the dialog role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog."

Changed 5: Replaced "If the dialog has aria-modal set to true and content outside the dialog is completely inert and visually obscured to an extent that is intentionally unreadable, it is no longer necessary to set aria-hidden to true on each element containing a portion of the inert layer. However, if you do still use aria-hidden set to true, the dialog container element cannot be a descendant of any element that has aria-hidden set to true and the content outside the modal dialog must not be visually discernable." with two notes:

  • Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but is not modal for other users. So, mark a dialog modal only when:
    1. Application code prevents all users from interacting in any way with content outside of it.
    2. Visual styling obscures the content outside of it.
  • The aria-modal property introduced by ARIA 1.1 replaces aria-hidden for informing assistive technologies that content outside a dialog is inert. However, in legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that:
    1. aria-hidden is set to true on each element containing a portion of the inert layer.
    2. The dialog element is not a descendant of any element that has aria-hidden set to true.

View commit 2c2f6bc

Modal Dialog Pattern: Minor Editorial Correction in Keyboard Notes

By Matt King on Wed Apr 26 21:13:15 2017 -0700

Slightly revised note 3 in the keyboard subsection.

View commit 8427482

Landmark Examples: Fix Links in Related W3C Specs Complementary Region

By Matt King on Wed Apr 26 22:59:09 2017 -0700

  1. For issue #232, in the complementary aside element for related w3c specs, Changed HREF attributes and some link text.
  2. Changed region name from "Related W3C Specs" to "related W3C Documents".

View commit dd0245f

Landmark Examples: Fix Task Force Name in Footer

By Matt King on Wed Apr 26 23:21:57 2017 -0700

In footers, changed "Authoring Practices Guide Working Group" to "Authoring Practices Task Force".

View commit 657d8a9

Disclosure Examples: Remove Unnecessary Setting of tabindex (pull #387)

By Jon Gunderson on Thu Apr 27 03:02:26 2017 -0500

In disclosure.js, tabindex was unnecessarily being set to 0 on the button that controls the disclosure. Removed that line of code.

View commit 20afc42

Menu Button Examples: Fix 11 JSCS Errors

By Matt King on Thu Apr 27 01:04:25 2017 -0700

View commit 50d0eb8

Treeview Examples: Fix Left Arrow Behavior (pull #389)

By Jon Gunderson on Thu Apr 27 13:17:13 2017 -0500

  1. For issue #365, fixed bug where left arrow collapsed a branch when navigating from a child parent node to its parent.
  2. For issue #386, deleted unused file treeitemClick.js

View commit 07da839

Dialog Pattern: Clarify Description of Focus Movement

By Matt King on Thu Apr 27 12:18:56 2017 -0700

I was reminded that some focusable elements are not in the tab sequence so the description of the keyboard behavior is not clear because it says that tab moves focus to next focusable element.

So, for issue #325, made the following changes.

Added the following paragraph to the beginning of the keyboard subsection:

In the following description, the term �tabbable element� refers to any element with a tabindex value of zero or greater. Note that values greater than 0 are strongly discouraged.

Added the following to the keyboard interaction description as the first item in the list:

When a dialog opens, focus moves to an element inside the dialog. See notes below regarding initial focus placement.

In the subsequent bullet items in the keyboard description, replaced the word "focusable" with "tabbable".

View commit 1ace662

Treeview Examples: Make Right Arrow Move Focus to First Child (Pull #390)

By Jon Gunderson on Sun Apr 30 04:08:24 2017 -0500

For issue #385, changed right arrow behavior so that when focus is on an expanded parent node, pressing right arrow moves focus to the first child of that parent.

View commit 033f857

Treeview Examples: Revise Tree Role Info and Fix Broken JS Source Link

By Matt King on Sun Apr 30 17:57:45 2017 -0700

For issues #223, #224, #225, and #226, made the following changes.

  1. In the tree row of the states and properties table, change "an tree" to "a tree".
  2. In the tree row of the states and properties table, removed unnecessary bullet that defines the tree role.
  3. In the tree row of the states and properties table, reworded the bullet about the roving tabindex focus management.
  4. In the source code section of the navigation treeview examples, removed link to no longer existent treeitemClick.js file.

View commit 6cb9a58

Navigation Menu Button Example: Fix Typo and Pattern Link

By Matt King on Mon May 1 09:02:45 2017 -0700

For issue #384:

  1. Per feedback from @a11ydoer, fixed broken link in footer nav.
  2. Per feedback from @annabbott, changed spelling of "lable" to "label".

View commit e3e2bae

Navigation Menu Button Example: Remove Space From Menu Keys Table

By Matt King on Mon May 1 09:22:16 2017 -0700

Per feedback from @annabbott in issue #384, the optional behavior for the space bar of activating a menu item is not implemented. Removed this key from the table of keys supported in the menu.

View commit 9c51c87

Menu Button Pattern: Editorial Revision to Keyboard Subsection For Issue #326

By Matt King on Mon May 1 09:40:25 2017 -0700

Per feedback from @annabbott in issue #326, revised documentation for enter and space to fix subject/verb agreement.

View commit 4db52a2

Modal Dialog Pattern: Clarify First Note in States and Properties Subsection

By Matt King on Mon May 1 09:48:57 2017 -0700

Per feedback from @a11ydoer in issue #325, changed:

Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but is not modal for other users.

To:

Because marking a dialog modal by setting aria-modal to true can prevent users of some assistive technologies from perceiving content outside the dialog, users of those technologies will experience severe negative ramifications if a dialog is marked modal but does not behave as a modal for other users.

View commit cd6d9d5

Modal Dialog Pattern: Modify Warning About Use of aria-modal

By Matt King on Mon May 1 13:17:25 2017 -0700

Per feedback from @annabbott on issue #325 in the May 1, 2017 task force meeting, changed:

So, mark a dialog modal only when:

To add the word both:

So, mark a dialog modal only when both:

View commit dfe45e1

Menu Button Examples: fixe left and right arrow and misspelling of "label" (pull #392)

By Jon Gunderson on Wed May 3 12:55:53 2017 -0500

  1. To fix bug raised by @racer2207 in issue #384, removed event support for LEFT and RIGHT arrow keys.

  2. Changed "lable" to "label" in keyboard table.

View commit 75d0273

Button Example: Fix Broken Links to Menu Button Examples

By Matt King on Sun May 7 00:44:14 2017 -0700

The button example page includes the menu button examples in its list of similar examples. In pull #375, the directory structure and file names for menubutton examples were changed, which broke those links. This commit updates the list of similar examples to include all 3 menu buttons with appropriate descriptions and correct href attributes.

View commit 9d045ff

Fix typo

By Michiel Bijl on Mon May 8 00:14:25 2017 +0100

View commit d9edcd4

Menu Button Pattern: Add Up Arrow Documentation

By Matt King on Thu May 18 17:10:58 2017 -0700

Modified aria-practices.html per feedback from @jared-w-smith in issue #384 to add optional up arrow key behavior for menubutton: (Optional) Up Arrow: opens the menu and moves focus to the last menu item.

View commit 343c691

Modal Dialog Pattern: Revise Note About Focus After Close

By Matt King on Sun May 21 10:06:17 2017 -0700

For issue #325, rewrite note 2 in the keyboard section that explains where focus should go after the dialog closes. This revised version includes an example of a scenario where moving focus away from the invoking element is appropriate.

View commit 9ae09df

Modal Dialog Pattern: Wrap Up Task force Pattern Review

By Matt King on Mon May 22 11:14:18 2017 -0700

Removed link to review issue #325 from the modal dialog pattern section.

The task fforce internal review process for changes to this pattern is now complete.

View commit 25727df

Place example section after introduction

By Michiel Bijl on Mon Jun 12 22:38:13 2017 +0100

View commit df26880

Treeview examples: remove aria-label from parent nodes (pull #399)

By Jon Gunderson on Sun Jun 18 12:23:42 2017 -0500

This commit fixes issue #395 for the treeview examples. It removes the aria-label attribute from parent treeitem elements in all four tree view example html files.

View commit e19d3c4

Menubar Examples: remove aria-label from parent menuitems (pull #398)

By Jon Gunderson on Sun Jun 18 13:23:51 2017 -0500

This commit resolves issue #395 for the menubar examples:

  1. Removes aria-label from the parent menuitems
  2. Updates roles, states, and properties documentation table

View commit 597799f

Accordion Example: add optional keys (pull #397)

By gerardkcohen on Sun Jun 18 13:11:03 2017 -0700

  1. Adds the following (optional) keyboard commands based on issue #158:
    • Up/ Down: Cycle focus through accordion toggle controls/ headings
    • Home/ End: Focus first/ last accordion toggle control/ heading
    • Control + Page Up/ Down: Move focus from accordion panel to accordion heading, and then cycle through headings.
  2. Refactors JS and CSS to be simpler to understand.

View commit f6e1121

Accordion Example: Add link to review issue #401

By Matt King on Sun Jun 18 14:06:15 2017 -0700

Given the significance of the updates made in pull request #397 by @gerardkcohen, This commit adds a link to a review issue to gather feedback on the updates and collect issues.

View commit cf84a9b

Menu and Tree Patterns: Remove parent node labeling guidance

By Matt King on Sun Jun 18 15:23:04 2017 -0700

Per issue #395, made the following deletions from the menu and tree patterns.

Removed following from menu pattern:

A parent menuitem has either aria-label or aria-labelledby set to specify a label. Warning: parent menuitems missing a label are labeled by all child elements, causing screen readers to announce every child menuitem and often making a menu so verbose that it is unusable.

Removed the following from the treeview pattern:

Each element with role treeitem that serves as a parent node has either aria-label r aria-labelledby set to specify a label. Warning: parent nodes missing a label are labeled by all child elements, causing screen readers to announce every child and often making a tree so verbose that it is unusable.

View commit 38e693c

Modal Dialog Example: Fix links to modal dialog pattern

By Matt King on Sun Jun 18 16:17:28 2017 -0700

For issue #321, fixed the following:

  • The link in the description had incorrect ID in the href.
  • Link in the footer was missing href and link text.

View commit b74592b

Modal Dialog Example: Add aria-describedby to special instructions input

By Matt King on Sun Jun 18 16:28:21 2017 -0700

  1. Per feedback from @shirsha in issue #321, added aria-describedby to the special instructions input.
  2. Improved text of the special instructions field description.

View commit 21858b6

Navigation Menu Button Example: Fix CSS link and keyboard description grammar

By Matt King on Sun Jun 18 17:10:46 2017 -0700

Made the following changes to examples/menu-button/menu-button-links.html for issue #384.

  1. Made grammar change in keyboard table as suggested by @racer2207.
  2. Fixed link to css.

View commit c4d70e8

Navigation Menu Button Example: Remove review link to complete task force review process

By Matt King on Sun Jun 18 17:41:28 2017 -0700

Removed link to issue #384 from examples/menu-button/menu-button-links.html. The internal task force review is complete for this example.

View commit 2bf33bc

Actions Menu Button Example: Fix nav link, fix grammar, remove space key documentation

By Matt King on Sun Jun 18 18:03:04 2017 -0700

To resolve feedback in issue #382 about examples/menu-button/menu-button-actions.html, made the following changes.

  1. Per feedback from @annabbott, Removed documentation of space key behavior. It is optional. It can be restored if appropriate after issue #403 is resolved.
  2. Adjusted grammar in keyboard table to be consistent with similar changes made for issue #384 in commit c4d70e8.
  3. Per feedback from @annabbott, Fixed href of pattern link in footer.

View commit fcb8d0a

Menu Button Example Using element.focus: Remove review issue link to complete review process

By Matt King on Sun Jun 18 18:10:18 2017 -0700

Removed link to issue #382 from examples/menu-button/menu-button-actions.html. The internal task force review process is now complete.

View commit 6ddfaa9

Actions Menu Button Example Using aria-activedescendant: fix grammar, remove space key documentation

By Matt King on Sun Jun 18 20:03:17 2017 -0700

To resolve feedback in issue #383 about examples/menu-button/menu-button-actions-active-descendant.html, made the following changes.

  1. Per feedback from @annabbott, Removed documentation of space key behavior. It is optional. It can be restored if appropriate after issue #403 is resolved.
  2. Adjusted grammar in keyboard table to be consistent with similar changes made for issue #384 in commit c4d70e8.

View commit 6e2f217

Actions Menu Button Example Using aria-activedescendant: Remove review issue link to complete review process

By Matt King on Sun Jun 18 20:05:36 2017 -0700

Removed link to issue #383 from examples/menu-button/menu-button-actions-active-descendant.html. The internal task force review process is complete.

View commit 651d3a3

File Directory Treeview Example Using Computed Properties: Remove review issue link to complete review process

By Matt King on Sun Jun 18 21:47:15 2017 -0700

Remove link to issue #223 from examples/treeview/treeview-1/treeview-1a.html. The internal task force review process is complete.

View commit 4bdf7d6

File Directory Treeview Example Using Declared Properties: Remove review issue link to complete review process

By Matt King on Sun Jun 18 22:04:04 2017 -0700

remove link to issue #224 from examples/treeview/treeview-1/treeview-1b.html. The internal task force review process is complete.

View commit d7d7d9e

Navigation Treeview Example Using Computed Properties: Editorial revision to accessibility features

By Matt King on Sun Jun 18 22:51:01 2017 -0700

For issue #225, in examples/treeview/treeview-2/treeview-2a.html accessibility features section, added brief description of purpose of custom focus indicator.

View commit 4ce65b3

Navigation Treeview Example Using Declared Properties: Fix js link and editorial revision

By Matt King on Sun Jun 18 23:06:27 2017 -0700

For issue #226, changed examples/treeview/treeview-2/treeview-2b.html:

  1. Revised accessibility features section to explain benefit of custom focus and hover styles.
  2. Removed link to javascript file that is no longer included.

View commit 0dd639d

Navigation Treeview Example Using Declared Properties: Add new review issue link

By Matt King on Sun Jun 18 23:42:28 2017 -0700

Adds link to issue 405in file examples/treeview/treeview-2/treeview-2b.html.

View commit 6d0b561

Appendix: Add Change Log Section

By Matt King on Tue Jun 20 16:32:04 2017 -0700

In preparation for June 2017 publication of a working draft, modified aria-practices.html to add a section to the appendix for change logs and added a section listing changes for the June 2017 working draft.

View commit 2446dfc

Modal Dialog Example: Document Small Screen Sizing and Escape Key Behavior

By Matt King on Tue Jun 20 17:40:39 2017 -0700

For issue #321, made the following changes to examples/dialog-modal/dialog.html.

Added the following item to the list of accessibility features:

To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen. Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog.

Added a row to the keyboard table to document Escape key behavior.

View commit b7c349f

Modal Dialog Example: Remove link to review issue to complete review process.

By Matt King on Tue Jun 20 17:46:03 2017 -0700

Removed link to issue #321 from examples/dialog-modal/dialog.html. The internal task force review process is complete.

View commit 0c8582a

Editor Menubar Example: Improve Editorial Consistency and Fix Broken Links

By Matt King on Tue Jun 20 21:37:42 2017 -0700

For issue #144, made the following changes to the editor menubar example in examples/menubar/menubar-2/menubar-2.html.

  1. Clarified and simplified introduction.
  2. Moved Notes from example section in to a separate accessibility features section to be consistent with the example template.
  3. Removed use of term "popup" and used "submenu" as agreed in issue #268.
  4. Editorial revisions to keyboard tables.
  5. Editorial revisions to role, state, and property tables.
  6. Fix broken links to source files.

View commit ff0b869

Editor Menubar example: Link to new review issue 409

By Matt King on Tue Jun 20 21:59:36 2017 -0700

Issue #144 had a lot of feedback that is all resolved; it is now closed. So, changed the link to issue #144 to a new review issue 409 in examples/menubar/menubar-2/menubar-2.html.

View commit bab62cf

Navigation Menubar Example: Corrections and editorial revisions

By Matt King on Wed Jun 21 01:33:18 2017 -0700

For issue #267, made the following changes to examples/menubar/menubar-1/menubar-1.html.

  1. Simplified and clarified introduction.
  2. Revised notes for each example; removed incorrect information about use of named entities for icons.
  3. Moved information about using CSS content property to accessibility features section.
  4. Removed all uses of the term "popup" as agreed in issue #268 and revised to use the term "submenu" as appropriate.
  5. Revised keyboard tables for consistency with editorial guidelines.
  6. Add information about behavior of left and right arrrows when in sub submenus.
  7. Revised role, state, and property tables for consistency with editorial guidelines.
  8. Replaced link to closed review issue 145 with link to new review issue 410.

View commit 8b40802

Data Grid Examples: Remove review issue link to complete task force review

By Matt King on Wed Jun 21 01:56:31 2017 -0700

Removed link to review issue #160 from examples/grid/dataGrids.html. The internal task force review process is complete for this example.

View commit ec8181d

Clone this wiki locally