wg-ui-and-a11y Quarterly Status Update April, 2020

[nainar]

What was accomplished

Bento components

• Migrated over the following AMP components to being powered by Preact
  • <amp-social-share>
  • <amp-timeago>

Storybook integration for Bento and AMP

• Created Storybook integration for AMP and Bento AMP components
• Added Storybook examples for:
  • <amp-date-display>
  • <amp-timeago>
  • <amp-youtube>
  • <amp-social-share>
  • <amp-image-slider>
  • <amp-sidebar>
• CSS in Storybook

Performance and stability

• <amp-social-share> (Reference documentation) design review and resolution to prerender to prevent layout shift with type=system in cache cases.
• <amp-carousel> 0.2 interactivity and lightbox enhancements
• <amp-timeago> and <amp-date-display> design to prevent layout shift for dynamically resolved text
• Stabilized visual tests:
  • <amp-sidebar>
  • <amp-accordion>

Display Locking API

• Experimentally enabled display locking on <amp-accordion> to allow user agent features such as Find-in-Page and scrollIntoView to expand and collapse relevant sections.

<amp-next-page> (Reference documentation)

• Better API
• Improved handling of sticky/fixed elements
• Infinite loading of documents (with memory management)
• Better default separator and bookend
• Templated separators and bookends
• Support for amp-analytics, and more!

<amp-video-iframe> (Reference documentation)

• Better support for Jwplayer video documents.
• data-param-* for simpler vendor use.

<amp-list> (Reference documentation)

• a11y: Simpler screen-reader sequence with single-item

Bugs fixes worth mentioning:

• A11y Fixes:
  • ` - Remove ‘role’ attribute when ‘single-item’ is specified for a11y
• Component Maintenance:
  • <amp-form> - Add support for ‘application/x-www-form-urlencoded’ encoding format
  • <amp-recaptcha-input> - Add support for global recaptcha endpoint
  • <amp-sidebar> - Update documentation on amp.dev to include an always visible desktop sidebar
  • <amp-img> - Add support for disable-inline-width attribute to propagate sizes without inline styling

What's next

Bento components

• Work on migrating over more AMP components to being powered by Preact
  • <amp-selector>
  • <amp-video> and other 3P players
  • <amp-twitter> and other social media components
  • <amp-fit-text>

Storybook integration for Bento and AMP

• More Storybook integrations!

All-new Carousel components

• <amp-base-carousel> : Next generation amp-carousel with many bug fixes and new features. Code complete
• <amp-stream-gallery>: High level for scrolling carousels. Code complete
• <amp-inline-gallery>: High level component that supports captions, thumbnails and progress dots.
• <amp-story-animation>: Use animation effect specs like <amp-animation> in <amp-story>
• <amp-video-docking>: Support to seamlessly dock multiple videos.
• <amp-video-iframe>: Alias as a vendor component.