wg-ui-and-a11y Quarterly Working Group Update - Oct 2019

[nainar]

WG Processes

• Moved our meetings to public meetings. See here for details on how to join.
• Working with the AC and TSC on how to work in the Open from idea to launch.
• Change in WG Facilitators from @aghassemi to @nainar
• Added 3 new members - @kristoferbaxter, @wassgha and @leafsy. All Googlers.

What was accomplished

Autocomplete component

• Allows for autosuggest use-cases
• Server and client side filtering
• Fully accessible with keyboard and screen reader
  

All-new Loaders

• New improved loaders based UX research
• Launched to 100% of AMP pages.
• Blog post explaining design philosophy here
• Why was this difficult: Getting pixel perfect performant animations is hard! Also had an issue with Chrome 77 with LayoutNG enabled. Had to ship a workaround on our end.
  

Floating headers

• Allows for sticky headers that hide/show based on user scroll
• Why was this difficult: Adding support for iOS was hard.
  

<amp-carousel> V2

• Same API as <amp-carousel> V1, better performance.
• Developers need to upgrade the version of <amp-carousel> they are using to 0.2.
• Why was this difficult: Making sure implementation of browser primitives we rely on are interoperable across browsers. E.g. scroll-snap

Add <amp-megaphone>

• Embeds podcast episodes and playlists from http://megaphone.fm (requested by CNET)
• Allows the new component to be embedded inside <amp-story>

Add parallax support for <amp-story>

• On mobile:
  
• On desktop (follows cursor instead of DeviceOrientation):
  

Component for truncating text (Reference documentation)

• Efficient algorithm to display/truncate text
• Allows "call to action" links after truncation (e.g. "Show more")
  
• Available experimentally currently, next step is launching this fully.

User-location component (Reference documentation)

• Uses geolocation API for precise user-location data
• Unlocks use-cases where dynamic data is tied to user's location
  - Intend to deprecate since no one is currently using it and the API is inconsistent with <am-geo>

Stateful Pages

• Allows for keeping session state client-side between page transitions
• We were being kept out of the BF Cache in Safari and FF due to onload listeners. We removed all calls from AMP's codebase. However 3P scripts we integrate into AMP still have them.
  - This + the main PoC not being on AMP anymore means we are deprioritizing it.

Bugs fixes worth mentioning:

• A11y Fixes:
  • Making sure focus doesn't leave the modal for <amp-sidebar>: 🐛♿Restrict focus / screenreaders to sidebar when it is open. amphtml#23250
  • amp-list fixes for keyboard navigation and the load more button: ♿ Prevent amp-list from losing focus when using keyboard controls amphtml#23650
  • Ensure amp-form validation messages are appropriately accessible: ♿ Read validation messages politely amphtml#23581
• Polish:
  • Sidebar swipe to dismiss
    
• Component Maintenance: amp-lightbox: Scroll position doesn't reset on some browsers amphtml#17140, amp-autocomplete does request on page load amphtml#23772. amp-date-display inside amp-list does not render correctly amphtml#23731

What's next

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.

Better menu experience with <amp-sidebar>

• Done: A new sidebar that allows better nesting of both an accordion and drill down menu. Intent to Implement
  Accordion menu:
  
  Drilldown:
  
• Better responsive desktop/mobile experience via <amp-mega-menu> - a component that allows you to have a mega menu on desktop. Important for SEO. WIP Intent to Implement
  
• Will be available as <amp-sidebar> 0.2

<amp-next-page> (Reference documentation)

• Component is already available experimentally
• Has no analytics support
• Has technical issues (e.g. Pulls in V0 itself)
• Doesn't support infinite pages - caps off at 3 pages.

Inline autocomplete

• Support for inline autocompleting a piece of text in an input.
• Use case: Gmail mentions for Docs comments when the user types '@/+'

Payments

• High level components for payments in AMP