From 76aea707f34cf34750e478d15c7078d297756ed1 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 9 Aug 2023 17:51:52 -0700 Subject: [PATCH 01/25] Move feed example inside the page --- .../coverage-and-quality-report.html | 15 +--- .../feed/examples/css/feedDisplay.css | 68 ++++++++++++++++++ .../patterns/feed/examples/feed-display.html | 51 ------------- content/patterns/feed/examples/feed.html | 36 ++++++++-- .../patterns/feed/examples/imgs/rating-1.png | Bin 5863 -> 0 bytes .../patterns/feed/examples/imgs/rating-2.png | Bin 6120 -> 0 bytes .../patterns/feed/examples/imgs/rating-3.png | Bin 6112 -> 0 bytes .../patterns/feed/examples/imgs/rating-4.png | Bin 6004 -> 0 bytes .../patterns/feed/examples/imgs/rating-5.png | Bin 4369 -> 0 bytes .../patterns/feed/examples/js/feedDisplay.js | 12 ++-- test/util/report_files/ignore_html_files | 1 - 11 files changed, 106 insertions(+), 77 deletions(-) delete mode 100644 content/patterns/feed/examples/feed-display.html delete mode 100644 content/patterns/feed/examples/imgs/rating-1.png delete mode 100644 content/patterns/feed/examples/imgs/rating-2.png delete mode 100644 content/patterns/feed/examples/imgs/rating-3.png delete mode 100644 content/patterns/feed/examples/imgs/rating-4.png delete mode 100644 content/patterns/feed/examples/imgs/rating-5.png 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 7c2832352d..3d47f09474 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -1582,19 +1582,6 @@

Coding Practices

5 heading,menu,menuitem,feed,article,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription,aria-describedby,aria-posinset,aria-setsize - - Feed Display - prototype - Yes - Yes - - not found - 0 - 0 - 6 - 0 - aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize - Advanced Data Grid prototype @@ -2261,7 +2248,7 @@

Graphics Techniques

Yes - Feed Display + Feed diff --git a/content/patterns/feed/examples/css/feedDisplay.css b/content/patterns/feed/examples/css/feedDisplay.css index 4229c7d03d..cd8addba73 100644 --- a/content/patterns/feed/examples/css/feedDisplay.css +++ b/content/patterns/feed/examples/css/feedDisplay.css @@ -1,3 +1,71 @@ +/* dialog styles */ + +.hidden { + display: none; +} + +[role="dialog"] { + box-sizing: border-box; + padding: 15px; + border: 1px solid #000; + background-color: #fff; + max-height: 500px; + overflow: scroll; +} + +@media screen and (min-width: 640px) { + [role="dialog"] { + position: absolute; + top: 2rem; + left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */ + transform: translateX( + -50% + ); /* move backwards 50% of this element's width */ + + min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */ + min-height: auto; + box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%); + } +} + +.dialog_action { + position: absolute; + top: 0; + right: 0; + padding: 5px; +} + +/* native element uses the ::backdrop pseudo-element */ + +/* dialog::backdrop, */ +.dialog-backdrop { + display: none; + position: fixed; + overflow-y: auto; + inset: 0; +} + +@media screen and (min-width: 640px) { + .dialog-backdrop { + background: rgb(0 0 0 / 30%); + } +} + +.dialog-backdrop.active { + display: block; +} + +.no-scroll { + overflow-y: auto !important; +} + +/* this is added to the body when a dialog is open */ +.has-dialog { + overflow: hidden; +} + +/* feed styles */ + body { background: #fafafa; font-family: Helvetica, Arial, sans-serif; diff --git a/content/patterns/feed/examples/feed-display.html b/content/patterns/feed/examples/feed-display.html deleted file mode 100644 index 00c486be6b..0000000000 --- a/content/patterns/feed/examples/feed-display.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - Feed Display - - - - - - - - - - - - - - - - - - -
-

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

-
- -
-
-
- -
- - -
-
- - diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html index 05c8b32b65..d05d8ab9dd 100644 --- a/content/patterns/feed/examples/feed.html +++ b/content/patterns/feed/examples/feed.html @@ -12,6 +12,14 @@ + + + + + + + +