diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index f1b521862a..3876be8ae9 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -125,7 +125,7 @@

Roles with at Least One Guidance or Exampl article - Feed + Infinite Scrolling Feed @@ -145,7 +145,7 @@

Roles with at Least One Guidance or Exampl feed Feed Pattern - Feed + Infinite Scrolling Feed @@ -759,7 +759,7 @@

Properties and States with at Least One Gu aria-busy - Feed + Infinite Scrolling Feed @@ -920,7 +920,7 @@

Properties and States with More than One
  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Table
    • @@ -1042,7 +1042,7 @@

    Properties and States with More than One
  • Editable Combobox with Grid Popup
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Data Grid
  • Layout Grid
  • (Deprecated) Collapsible Dropdown Listbox
    • @@ -1113,7 +1113,7 @@

    Properties and States with More than One aria-posinset @@ -1185,7 +1185,7 @@

    Properties and States with More than One aria-setsize @@ -1631,7 +1631,7 @@

    Coding Practices

    aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize - Feed + Infinite Scrolling Feed prototype Yes @@ -2741,7 +2741,7 @@

    Mouse and Pointer Events

    Yes - Feed + Infinite Scrolling Feed Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index ed19b10250..7effc0b049 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -2,14 +2,14 @@ "aria-activedescendant","1","11","Guidance: Managing Focus in Composites Using aria-activedescendant","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Radio Group Using aria-activedescendant" "aria-atomic","0","1","Example: Alert" "aria-autocomplete","0","5","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup" -"aria-busy","0","1","Example: Feed" +"aria-busy","0","1","Example: Infinite Scrolling Feed" "aria-checked","0","9","Example: Checkbox (Mixed-State)","Example: Checkbox (Two State)","Example: Editor Menubar","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Switch Using HTML Button","Example: Switch","Example: Toolbar" "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" "aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" -"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Table" +"aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" @@ -22,7 +22,7 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" @@ -31,7 +31,7 @@ "aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" -"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-posinset","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-pressed","0","3","Example: Button (IDL Version)","Example: Button","Example: Toolbar" "aria-readonly","0","0" "aria-relevant","0","0" @@ -41,7 +41,7 @@ "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" "aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" -"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-setsize","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index 104fad9ec2..cbebe3fb38 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -2,7 +2,7 @@ "alert","2","2","Guidance: Alert Pattern","Guidance: Alert and Message Dialogs Pattern","Example: Alert","Example: Alert Dialog" "alertdialog","0","1","Example: Alert Dialog" "application","0","0" -"article","0","1","Example: Feed" +"article","0","1","Example: Infinite Scrolling Feed" "banner","1","3","Guidance: Banner","Example: Navigation Menubar","Example: Navigation Treeview","Example: Banner Landmark" "button","2","2","Guidance: Button Pattern","Guidance: Menu Button Pattern","Example: Button (IDL Version)","Example: Button" "caption","0","0" @@ -19,7 +19,7 @@ "directory","0","0" "document","0","0" "emphasis","0","0" -"feed","1","1","Guidance: Feed Pattern","Example: Feed" +"feed","1","1","Guidance: Feed Pattern","Example: Infinite Scrolling Feed" "figure","0","0" "form","2","1","Guidance: Form","Guidance: Naming Form Controls with the Label Element","Example: Form Landmark" "generic","0","0" diff --git a/content/index/index.html b/content/index/index.html index b004007e85..bda61e74ce 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -48,7 +48,7 @@

    Examples by Role

    article - Feed + Infinite Scrolling Feed banner @@ -125,7 +125,7 @@

    Examples by Role

    feed - Feed + Infinite Scrolling Feed form @@ -483,7 +483,7 @@

    Examples By Properties and States

    aria-busy - Feed + Infinite Scrolling Feed aria-checked @@ -556,7 +556,7 @@

    Examples By Properties and States

  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Table
    • @@ -676,7 +676,7 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Data Grid
  • Layout Grid
  • (Deprecated) Collapsible Dropdown Listbox
    • @@ -759,7 +759,7 @@

    Examples By Properties and States

    aria-posinset @@ -829,7 +829,7 @@

    Examples By Properties and States

    aria-setsize diff --git a/content/patterns/feed/examples/css/feedDisplay.css b/content/patterns/feed/examples/css/feedDisplay.css index 4229c7d03d..eaa13a9635 100644 --- a/content/patterns/feed/examples/css/feedDisplay.css +++ b/content/patterns/feed/examples/css/feedDisplay.css @@ -60,12 +60,16 @@ body { } .restaurant-type { - color: #777; + color: black; font-size: 13px; } +.bookmark-button { + height: 24px; +} + .location-block { - color: #777; + color: black; display: inline-block; vertical-align: top; margin: 0 15px 10px; diff --git a/content/patterns/feed/examples/feed-display.html b/content/patterns/feed/examples/feed-display.html index d49daf25b4..fd79544b7a 100644 --- a/content/patterns/feed/examples/feed-display.html +++ b/content/patterns/feed/examples/feed-display.html @@ -22,30 +22,11 @@ -
    -

    Recommended Restaurants

    - -
    -

    About This Example

    -

    - NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1. - This page provides a proposed implementation of a feed component. - This proposal does not yet have ARIA Practices Task Force consensus. - Feedback is welcome in issue 565. -

    -
    +

    Recommended Restaurants

    - -
    - - -
    -
    + diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html index 5eb04dcfc3..907a35dab9 100644 --- a/content/patterns/feed/examples/feed.html +++ b/content/patterns/feed/examples/feed.html @@ -3,7 +3,7 @@ - Feed Example + Infinite Scrolling Feed Example @@ -21,30 +21,43 @@
    -

    Feed Example

    +

    Infinite Scrolling Feed Example

    About This Example

    - NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1. - This page provides a proposed implementation of a feed component. - This proposal does not yet have ARIA Practices Task Force consensus. + NOTE: The feed role was introduced by WAI-ARIA 1.1. + Since native desktop operating systems offer only a few conventions that are applicable to the feed pattern, the implementation of a feed illustrated by this example is intended to serve as as a proposal. Feedback is welcome in issue 565.

    The example below implements the Feed Pattern for a restaurant review site. To imitate an infinitely scrolling set of data, information about ten restaurants is repeatedly loaded as the user reads the feed. - Outside of the feed, an article load time selector is available for simulating data fetch delays. + This example includes an article load time selector that simulates data fetch delays.

    -

    Unlike other examples in the WAI-ARIA Authoring Practices, the example experience has its own page separate from this documentation page.

    +
    + +
    +

    Example Usage Option

    +

    + The following article loading delay time selector enables simulation of different amounts of latency introduced by data fetches. + Such latency can affect assistive technology behavior when using assistive technology functions for navigating by article. +

    + +

    Example

    -

    The example feed experience is presented on a separate feed display page.

    +

    The example feed experience below is presented in an iframe in order not to obstruct from the rest of the content of the page.

    + +
    @@ -73,7 +86,7 @@

    Keyboard Support

    Control + Home - Move focus to the first focusable element before the feed. + Move focus to the first focusable element in the feed. diff --git a/content/patterns/feed/examples/imgs/rating-1.png b/content/patterns/feed/examples/imgs/rating-1.png deleted file mode 100644 index def9a045cf..0000000000 Binary files a/content/patterns/feed/examples/imgs/rating-1.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-2.png b/content/patterns/feed/examples/imgs/rating-2.png deleted file mode 100644 index 72b3ec4b77..0000000000 Binary files a/content/patterns/feed/examples/imgs/rating-2.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-3.png b/content/patterns/feed/examples/imgs/rating-3.png deleted file mode 100644 index b15fb792d5..0000000000 Binary files a/content/patterns/feed/examples/imgs/rating-3.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-4.png b/content/patterns/feed/examples/imgs/rating-4.png deleted file mode 100644 index 3e9b283ed2..0000000000 Binary files a/content/patterns/feed/examples/imgs/rating-4.png and /dev/null differ diff --git a/content/patterns/feed/examples/imgs/rating-5.png b/content/patterns/feed/examples/imgs/rating-5.png deleted file mode 100644 index 8472c0e912..0000000000 Binary files a/content/patterns/feed/examples/imgs/rating-5.png and /dev/null differ diff --git a/content/patterns/feed/examples/js/main.js b/content/patterns/feed/examples/js/main.js index d889d6b0d0..d183f9d5e0 100644 --- a/content/patterns/feed/examples/js/main.js +++ b/content/patterns/feed/examples/js/main.js @@ -15,8 +15,9 @@ */ window.addEventListener('load', function () { var feedNode = document.getElementById('restaurant-feed'); - var delaySelect = document.getElementById('delay-time-select'); - var restaurantFeed = new aria.Feed(feedNode, delaySelect); + var delaySelect = window.parent.document.getElementById('delay-time-select'); + var termsOfUse = window.parent.document.getElementById('terms-of-use'); + var restaurantFeed = new aria.Feed(feedNode, termsOfUse); var restaurantFeedDisplay = new aria.FeedDisplay(restaurantFeed, function () { return aria.RestaurantData; diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html index 5e01061210..7ae27f47f0 100644 --- a/content/patterns/feed/feed-pattern.html +++ b/content/patterns/feed/feed-pattern.html @@ -65,7 +65,7 @@

    About This Pattern

    Example

    - Example Implementation of Feed Pattern + Infinite Scrolling Feed Example

    diff --git a/test/tests/feed_feed.js b/test/tests/feed_feed.js index 03387763a6..e253fc4ad8 100644 --- a/test/tests/feed_feed.js +++ b/test/tests/feed_feed.js @@ -10,26 +10,16 @@ const assertAriaDescribedby = require('../util/assertAriaDescribedby'); const exampleFile = 'content/patterns/feed/examples/feed.html'; const ex = { - feedLinkSelector: '#ex1 a', + frameID: 'feed_frame', feedSelector: '[role="feed"]', articleSelector: '[role="article"]', timeToLoad10Articles: 2500, numArticlesLoadedInSet: 10, - delayTimeSelector: '#delay-time-select', + termsOfUse: '#terms-of-use', }; const navigateToFeed = async function (t) { - await t.context.session.findElement(By.css(ex.feedLinkSelector)).click(); - - return t.context.session.wait( - () => { - return t.context.session.getCurrentUrl().then((url) => { - return url != t.context.url; - }); - }, - t.context.waitTime, - 'The feed url did not load after clicking: ' + ex.feedLinkSelector - ); + await t.context.session.switchTo().frame(ex.frameID); }; const waitForArticlesToLoad = async function (t) { @@ -264,12 +254,13 @@ ariaTest( await waitForArticlesToLoad(t); let articles = await t.context.queryElements(t, ex.articleSelector); - articles[0].sendKeys(Key.chord(Key.CONTROL, Key.END)); + await articles[0].sendKeys(Key.chord(Key.CONTROL, Key.END)); + await t.context.session.switchTo().defaultContent(); t.true( - await checkFocus(t, ex.delayTimeSelector, 0), + await checkFocus(t, ex.termsOfUse, 0), 'Focus should move off the feed (onto element: ' + - ex.delayTimeSelector + + ex.termsOfUse + ') after sending keys CONTROL+END' ); }