GitLab Next

The following discussion from !2188 (merged) should be addressed:

• Update guidance around button groups and determine how to consolidate special instances of button groups, such as pagination.

Button group

A group of buttons that are visually connected and share related actions, either within a shared context or upon a shared piece of content.

Action bar

Visually a group of buttons with a shared border, all statefulness aligns with that button variant. All buttons in the group should use the same variant (we do have instances today where they don’t and that’s just gross). I think we always want this to be the default primary variant. Used for general actions and destinations.

• Tab moves from button to button where the Enter or Spacebar keys activate the control.
• <button> and/or <a> elements can be used. For example, a button might resolve all MR threads in a new issue or expand all threads, while an anchor might jump to the next unresolved thread.
• A change of context (page reload) is not necessary, but common. In any case, the button label should clearly indicate what action will occur. Icon-only buttons should have an aria-label to indicate their function or purpose.
• Can include a dropdown button with menu, but only as the last button in the group.

Pagination

Visually a group of primary default buttons with a shared border, all statefulness aligns with that button variant. The button that corresponds with the current page has a unique state. Used solely to navigate between pages of content (not for paginating content nested within a section, not sure if we have anything like that, but it would require some different ARIA).

• A list of anchor <a> elements contained within a <nav> element with aria-label="Pagination or more specific like aria-label="Issue search results pagination.
• The anchor that represents the current page persists as a link.
• Each anchor includes an aria-label to more fully indicate it’s position in the list. For example, aria-label="Go to page 5 of 10".
• aria-current="page" is an attribute of the anchor that represents the current page.
• Tab moves from link to link where the Enter or Spacebar keys activate the control.
• After activating a link, the page reloads and focus is placed at the top of the page content (not at the beginning of the navigation).

Toggle bar - change selection

Visually a group of primary default buttons with a shared border, all statefulness aligns with that button variant. The button that corresponds with the current content or selection has the selected button style with the inner shadow. Used to choose a selection inline where a page load isn’t required to display the results of the selection.

• Based on radio button functionality where tab moves focus to the group, arrowing within selects and activates the different options.
• Uses aria-checked="false" by default and `aria-checked="true" when selected.
• No page reload (URL persists), so aria-live="polite announces what content has changed.
• Only one item can be selected at a time.
• Because this is basically a radio group, a visible label should be present and programmatically tied to the group.
• Roving tabindex should be used to manage focus within the group.

For example:

<div role="radiogroup" aria-labelledby="radioGroup1">
  <h3 id="radioGroup1">Visible label</h3>
  <div role="radio" aria-checked="false">…

Toggle bar - change view

Visually a group of primary default buttons with a shared border, all statefulness aligns with that button variant. The button that corresponds with the current content or selection has the selected button style with the inner shadow. Used to change the view of the related content, which could trigger a page reload.

• Tab moves from button to button where the Enter or Spacebar keys activate the control.
• <button> and/or <a> elements can be used depending on how the view is loaded — either as a link destination or a dynamic refresh.
• Each “button” includes an aria-label to more fully indicate how it will change the view. For example, aria-label="View timeline in a week view".
• On page reload focus is placed on the button that was activated.
• The button that represents the current view has the `aria-current="true" attribute.