Facets and accessibility of font size increases over the app

Development & Design Design proposals
1

When working with Facets, there are a few accessibility issues that appear thus far from my testing on other Facet panel issues.

  1. Going from a default font size in browser of 14 to 20 can cause issues of unnecessary padding and wrapping for the leftPanelTabs specifically in regards to the <ui role="tablist".
  2. Unneccesary jumping up/down of Facet panels while users click on selections. The div browsing-panel-indicator will quickly show a hidden spinner “Refreshing facets…” which is above the browsing-panel-controls and hence causes all child elements underneath to suddenly move down and then back up. The effect to a user is disconcerting with jerky motion.

Current Results

Expected Behavior

We should try to have more flexible handling (Flex Box, CSS Grid, whatever other means) so that adaptive resizing is more easily handled in various places. Simple font size increases which is a common accessibility item, should not break (force wrapping?) feature areas, but instead those areas should just adaptively resize larger or smaller.

I.E. Containers should grow larger or smaller to fit the font size, instead of font size fitting the container. In the case of increasing the font size in the browser, a common expectation would be that text size is increased over the entire app, which would mean that the datagrid is likely to show much less columns which is fine, and the Facet panel would be allowed to grow wider.

Ideally the Facet panel could then have a draggable resize handle in the middle bar so that users can make it wider, at the cost of pushing out into the datagrid and losing some columns in the view that would overflow with horizontal scrollbar growing.

Alternative Behavior

For the “Refreshing facets…” an alternative might be to move this notification into the processPanelDiv where other notifications are handled. Even though it is currently located above the datagrid area, this is where all other notifications are displayed for processes. This would offer more room in the Facet Panel when a refresh is happening and not disconcert the user experience.

VIDEO: Google Drive link - Facet Filter accessibility.mp4

2

Thad, I feel like this could be a GitHub issue, since you are proposing a fairly concrete and likely consensual bug to address.

3

It’s not a bug because we never designed complete flexibility with the panel divs (although it was envisioned at some point to do so in the future, we never got there). Now that my eyes are getting older, I myself am having to now deal with increased font sizes even on 34" monitors! It’s just one of many long-standing enhancements that were buried in previous Google mailing lists threads that we never did surface into issues. I’d prefer we just keep this discussion open for UI designers to give their input on flexible container handling since I’m not an expert.

Let’s not rush a solution here without community feedback.

4

I’m trying to migrate the various parts of the UI I’m touching to CSS grid/flex. My personal motivation is that it makes the UI more robust to other code changes.

The recent changes to the header is a good example and I have some local progress towards migrating the home-screen as well.

1 Like