From b51d6644dd4be652bed7fe690d4848b27e06918d Mon Sep 17 00:00:00 2001 From: p_craft Date: Sat, 19 Oct 2024 15:54:51 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feed=20=E3=82=92=20b606e34=20=E3=81=AB?= =?UTF-8?q?=E8=BF=BD=E5=BE=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/index/index.html | 14 ++--- .../feed/examples/css/feedDisplay.css | 53 ++++++++++++++++++- .../patterns/feed/examples/feed-display.html | 25 ++------- content/patterns/feed/examples/feed.html | 42 ++++++++++----- .../patterns/feed/examples/js/feedDisplay.js | 36 ++++++++++--- content/patterns/feed/examples/js/main.js | 5 +- content/patterns/feed/feed-pattern.html | 13 ++--- 7 files changed, 128 insertions(+), 60 deletions(-) diff --git a/content/index/index.html b/content/index/index.html index e0ccd255..d983fe12 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -47,7 +47,7 @@

Examples by Role

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

Examples by Role

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

Examples By Properties and States

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

Examples By Properties and States

  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Feed
    • +
  • Infinite Scrolling Feed
  • Table
    • @@ -672,7 +672,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
    • @@ -755,7 +755,7 @@

    Examples By Properties and States

    aria-posinset @@ -825,7 +825,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 64a44dfa..eaa13a96 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; @@ -79,3 +83,48 @@ body { padding: 10px; width: 100%; } + +.restaurant-rating svg g { + color: #ffde00; +} + +.restaurant-rating svg .star { + stroke-width: 2px; + stroke: #f8951d; + fill-opacity: 0; +} + +.restaurant-rating[data-rating-value="1"] svg .star-1 .star { + fill: currentcolor; + fill-opacity: 1; +} + +.restaurant-rating[data-rating-value="2"] svg .star-2 .star { + fill: currentcolor; + fill-opacity: 1; +} + +.restaurant-rating[data-rating-value="3"] svg .star-3 .star { + fill: currentcolor; + fill-opacity: 1; +} + +.restaurant-rating[data-rating-value="4"] svg .star-4 .star { + fill: currentcolor; + fill-opacity: 1; +} + +.restaurant-rating[data-rating-value="5"] svg .star-5 .star { + fill: currentcolor; + fill-opacity: 1; +} + +@media (forced-colors: active) { + .restaurant-rating svg g { + color: currentcolor; + } + + .restaurant-rating svg .star { + stroke: currentcolor; + } +} diff --git a/content/patterns/feed/examples/feed-display.html b/content/patterns/feed/examples/feed-display.html index 00c486be..fd79544b 100644 --- a/content/patterns/feed/examples/feed-display.html +++ b/content/patterns/feed/examples/feed-display.html @@ -12,7 +12,7 @@ - + @@ -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 05c8b32b..e92c8731 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 @@ -11,7 +11,7 @@ - +
    -

    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.

    + +
    @@ -67,12 +81,12 @@

    Keyboard Support

    Move focus to previous article. - Control + End + Control + End Move focus to the first focusable element after the feed. - Control + Home - Move focus to the first focusable element before the feed. + Control + Home + Move focus to the first focusable element in the feed. @@ -191,8 +205,8 @@

    Role, Property, State, and Tabindex Attributes

    JavaScript and CSS Source Code

    The following Javascript and CSS is used by the feed-display.html page:

    -
    diff --git a/content/patterns/feed/examples/js/feedDisplay.js b/content/patterns/feed/examples/js/feedDisplay.js index 644f1cb5..fa7f90de 100644 --- a/content/patterns/feed/examples/js/feedDisplay.js +++ b/content/patterns/feed/examples/js/feedDisplay.js @@ -207,18 +207,40 @@ aria.FeedDisplay.prototype.renderItemData = function (itemData) { ''; if (itemData.rating) { + const starText = `${itemData.rating} ${ + itemData.rating === 1 ? 'star' : 'stars' + }`; var ratingID = 'restaurant-rating-' + this.feedSize; itemContent += '
    ' + - '' + + '">' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + '
    '; describedbyIDs.push(ratingID); } diff --git a/content/patterns/feed/examples/js/main.js b/content/patterns/feed/examples/js/main.js index d889d6b0..d183f9d5 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 9b57aa0e..b4bcc0d1 100644 --- a/content/patterns/feed/feed-pattern.html +++ b/content/patterns/feed/feed-pattern.html @@ -10,7 +10,7 @@ - +
    @@ -62,9 +62,10 @@

    About This Pattern

    +

    Example

    - Example Implementation of Feed Pattern + Infinite Scrolling Feed Example

    @@ -78,8 +79,8 @@

    Keyboard Interaction

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

    Note

    @@ -95,8 +96,8 @@

    Note

    Users move focus into the nested feed from the content of the containing article with Tab. This may be slow if the article contains a significant number of links, buttons, or other widgets. -
  • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
    • -
  • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
    • +
  • Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
    • +
  • To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
  • In the rare circumstance that a feed article contains a widget that uses the above suggested keys, the feed navigation key will operate the contained widget, and the user needs to move focus to an element that does not utilize the feed navigation keys in order to navigate the feed.
    • From 4b8c9805f71181119706ee2817e671c7e7f4ea06 Mon Sep 17 00:00:00 2001 From: p_craft Date: Sat, 23 Nov 2024 17:30:33 +0900 Subject: [PATCH 2/6] =?UTF-8?q?copilot=E3=81=A7=E7=B2=97=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/index/index.html | 14 +-- content/patterns/feed/examples/feed.html | 115 ++++++++++----------- content/patterns/feed/feed-pattern.html | 122 +++++++++++------------ 3 files changed, 126 insertions(+), 125 deletions(-) diff --git a/content/index/index.html b/content/index/index.html index d983fe12..52d3bb6f 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -47,7 +47,7 @@

    Examples by Role

    article - Infinite Scrolling Feed + 無限スクロールフィードの例 banner @@ -124,7 +124,7 @@

    Examples by Role

    feed - Infinite Scrolling Feed + 無限スクロールフィードの例 form @@ -482,7 +482,7 @@

    Examples By Properties and States

    aria-busy - Infinite Scrolling Feed + 無限スクロールフィードの例 aria-checked @@ -555,7 +555,7 @@

    Examples By Properties and States

  • Date Picker Combobox (HC)
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Infinite Scrolling Feed
    • +
  • 無限スクロールフィードの例
  • Table
    • @@ -672,7 +672,7 @@

    Examples By Properties and States

  • Editable Combobox with Grid Popup
  • Date Picker Dialog (HC)
  • Modal Dialog
    • -
  • Infinite Scrolling Feed
    • +
  • 無限スクロールフィードの例
  • Data Grid
  • Layout Grid
  • (Deprecated) Collapsible Dropdown Listbox
    • @@ -755,7 +755,7 @@

    Examples By Properties and States

    aria-posinset @@ -825,7 +825,7 @@

    Examples By Properties and States

    aria-setsize diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html index e92c8731..715d1fca 100644 --- a/content/patterns/feed/examples/feed.html +++ b/content/patterns/feed/examples/feed.html @@ -3,7 +3,7 @@ - Infinite Scrolling Feed Example + 無限スクロールフィードの例 @@ -21,30 +21,31 @@
    -

    Infinite Scrolling Feed Example

    +

    無限スクロールフィードの例

    +
    -

    About This Example

    +

    この例について

    - 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. + 注記: フィードロールは WAI-ARIA 1.1 によって導入されました。 + ネイティブデスクトップオペレーティングシステムはフィードパターンに適用できる規約がほとんどないため、この例で示されているフィードの実装は提案として機能することを意図しています。 + フィードバックは 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. - This example includes an article load time selector that simulates data fetch delays. + 以下の例はレストランレビューサイトのための フィードパターン を実装しています。 + 無限にスクロールするデータセットを模倣するために、利用者がフィードを読むときに 10 件のレストラン情報が繰り返し読み込まれます。 + この例にはデータ取得の遅延をシミュレートする記事読み込み時間セレクターが含まれています。

    -

    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. + 次の記事読み込み遅延時間セレクターは、データ取得によって導入されるさまざまな量の遅延をシミュレートすることを可能にします。 + そのような遅延は、支援技術機能を使用して記事ごとにナビゲートする際に支援技術の動作に影響を与える可能性があります。

    - +