Floating action bars/footers in Console

[apombo-ux]

Background

A Flex console feature I'm working on has a long list of items that we display in a table. The friendly names of all of the items are editable, and we've opted to make the input fields open so the user can bulk-edit them without having to go in and out of modals for each list item they want to modify. Because of this, my first thought was to use a sticky footer on the screen so that the save button stays visible no matter where in the list the user has scrolled. However the screen also has in-page navigation tabs, which seem a bit mismatched with the footer since it's only relevant to one tab, and it seems like the sticky footer might be a legacy Console pattern so may not even be a recommended Paste patter.

I'd be interested in your input on options for this use case if you have any thoughts, but more broadly I'd like your perspective on the use of sticky footers for page actions.

Feedback

Does Paste have any recommenations about whether to use sticky footers/floating action bars in Console? Are there accessibility concerns with the sticky footers? Are the other recommended patterns for spot-editing long lists (where a button at the bottom of the list may take considerable scrolling, but where paging would hide whether you've made edits on other pages)?

Stage of design

No response

Research

No response

Relevant links

See example of the screen this came up for here: https://www.figma.com/file/CK5eNJyyxStD5cceZFXnsb/2023-24%C2%A0Flex-Unify-Admin-Profile-Configuration?type=design&node-id=4413-259766&mode=design&t=PtVqX9WzzmR00mkO-4

Are you looking for visual design support?

• Yes

Additional Information

No response

[apombo-ux]

Here's an image of what the figma link above goes to for reference:

[dosubot[bot]]

Based on the context provided, both sticky footers and floating action bars can be used in the Twilio Console for spot-editing long lists, provided they adhere to the accessibility principles emphasized in the provided context. The choice between them should be based on which option can be implemented in a manner that best supports all users, including those with accessibility needs.

For Sticky Footers, they are typically easier for keyboard navigation and can be less intrusive to the user's workflow. However, ensure that they do not obstruct any content or in-page navigation tabs, especially when zoomed in or when the screen size is reduced.

For Floating Action Bars, they can be more visually prominent and easier to access with various input devices, but they must be implemented carefully to ensure they do not cover content or interfere with screen readers and other assistive technologies. They should be easily dismissible and should not move focus unexpectedly.

In terms of specific guidelines or components for implementing sticky footers or floating action bars in the Paste design system, I wasn't able to find any within the repository. However, the Box component could potentially be used to create a sticky footer or floating action bar, using appropriate styling and positioning properties.

For example, a sticky footer could be implemented with the Box component like this:

<Box
  as="footer"
  position="sticky"
  bottom="0"
  backgroundColor="colorBackgroundBody"
  padding="space60"
  // Add any other styling properties as needed
>
  {/* Footer content goes here */}
</Box>

And a floating action bar could be implemented like this:

<Box
  as="nav"
  position="fixed"
  bottom="0"
  right="0"
  backgroundColor="colorBackgroundBody"
  padding="space60"
  // Add any other styling properties as needed
>
  {/* Action bar content goes here */}
</Box>

Remember to test your implementation with various assistive technologies and input devices to ensure accessibility.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• packages/paste-website/src/components/homepage/Accessibility.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[serifluous]

Hey @apombo-ux ! The response here still is true: #1094 and some alternative options have been shared in responses to these discussions: https://github.com/twilio-labs/paste/discussions?discussions_q=is%3Aopen+command+bar

Happy to brainstorm in office hours if you want, but since we still don't have a vetted solution for this, we totally understand if the links above are enough for you to keep moving forward!

[nkrantz]

Hey Amy! Thanks for coming to office hours last week. You can watch the recording here (password in #help-design-system on slack).