From 3c83fc02bb7a505a3c7d3386a27461c35e09346b Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 12 Oct 2023 14:46:49 -0400 Subject: [PATCH 1/4] adds guidelines about inactive buttons --- content/components/button.mdx | 56 +++++++++++++++++++- content/ui-patterns/degraded-experiences.mdx | 40 ++------------ content/ui-patterns/loading.mdx | 2 +- 3 files changed, 60 insertions(+), 38 deletions(-) diff --git a/content/components/button.mdx b/content/components/button.mdx index feacec7fa..3c2a71ddd 100644 --- a/content/components/button.mdx +++ b/content/components/button.mdx @@ -156,7 +156,7 @@ Buttons allow users to initiate an action or command when clicked or tapped. The -### Color +### Variants +### Inactive + + + +An button that looks like a disabled primary button, but it has a focus state + +
+ +An inactive button has the same styles as a disabled button, but it still reponds to user input. + +An inactive button an accessible alternative to a disabled button. They're intended to be used for buttons that are non-functional, but cannot be removed from the page. + +Unlike a disabled button, an inactive button can respond to user input. For example, if a button shows a tooltip when hovered or focused, or a dialog when clicked. + +
+ + + + + + + + + +There are two recommended ways an inactive button should respond to user input: + +1. **Show a dialog on click:** When a user tries to activate an inactive the button, open a [dialog](/components/dialog) that explains why the action cannot be completed and give them a path forward if possible. It is required to provide some kind of feedback when a user clicks a button. +2. **Show a tooltip on hover or focus:** Before a user tries to activate a non-functional control, a [tooltip](/components/tooltip) with additional context may be displayed on hover or focus. It is *not* required to respond to hover and focus. + + + + + ## Best practices ### Primary and outline button usage diff --git a/content/ui-patterns/degraded-experiences.mdx b/content/ui-patterns/degraded-experiences.mdx index c98afcede..a21e79033 100644 --- a/content/ui-patterns/degraded-experiences.mdx +++ b/content/ui-patterns/degraded-experiences.mdx @@ -274,8 +274,8 @@ Common types of page navigation include [underline nav](/components/underline-na Decision tree for how to handle a non-functional button. Could removing the button be disorienting? If no, don't render the button. If yes: does it respond to a hover or click? If yes, use an inert button. If no, use a disabled button. #### Removing a non-functional button @@ -303,41 +303,9 @@ Default to removing non-functional buttons from the UI. Don't remove buttons tha #### Indicating a button is non-functional without disabling it - - -
- -If a button is too critical to be omitted and responds to user input by showing more info about why it's non-functional, use an inert button. An inert button has the same styles as a disabled button, but it still reponds to user input. - -An inert button is the accessible option because buttons may not be disabled if they respond to user input. For example, if a button shows a tooltip when hovered or focused, or a dialog when clicked. +If a button is too critical to be omitted and responds to user input by showing more info about why it's non-functional, use an inactive button. -
- -A default button and an inert button - - - -There are two recommended ways an inert button should respond to user input: - -1. **Show a dialog on click:** When a user tries to activate an inert the button, open a [dialog](/components/dialog) that explains why the action cannot be completed and give them a path forward if possible. It is required to provide some kind of feedback when a user clicks a button. -2. **Show a tooltip on hover or focus:** Before a user tries to activate a non-functional control, a [tooltip](/components/tooltip) with additional context may be displayed on hover or focus. It is *not* required to respond to hover and focus. - - +For more information, see the the [inactive button guidelines](/components/button#inactive) ### Handling action menus with non-functional items diff --git a/content/ui-patterns/loading.mdx b/content/ui-patterns/loading.mdx index 1160d8e2d..ba9213165 100644 --- a/content/ui-patterns/loading.mdx +++ b/content/ui-patterns/loading.mdx @@ -262,7 +262,7 @@ If non-sequential groups of navigation links are in a loading state, preserve th src="https://github.com/primer/design/assets/2313998/1b619fa0-0870-4356-a5a6-78519a36f539" /> -If some links in the right side sheet cannot be loaded, default to showing each [nav list](components/nav-list) item in an inert state. The users should still be able to hover, click, and focus inert items, but they don't link to anywhere. Optionally, a tooltip may be displayed explaining that the navigation item is unavailable. An error banner is not necessary for this case. +If some links in the right side sheet cannot be loaded, default to showing each [nav list](components/nav-list) item in an inactive state. The users should still be able to hover, click, and focus inactive items, but they don't link to anywhere. Optionally, a tooltip may be displayed explaining that the navigation item is unavailable. An error banner is not necessary for this case. Date: Thu, 12 Oct 2023 16:29:39 -0400 Subject: [PATCH 2/4] adds link to internal a11y guidance --- content/components/button.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/components/button.mdx b/content/components/button.mdx index 3c2a71ddd..5e11cc035 100644 --- a/content/components/button.mdx +++ b/content/components/button.mdx @@ -403,6 +403,12 @@ Limit primary button usage. Only use one primary button on the page, whenever po ## Accessibility +### Do not disable buttons + +There are rare cases where it's ok to disable a button, but it should generally be avoided. Disabling a button makes it invisible to assistive technologies such as screen readers. + +For more information on disabled controls, see GitHub's [link and button a11y guidance](https://accessibility-playbook.github.com/link-and-button-guidance#disabling-links-and-buttons) (GitHub staff only). + ### Descriptive buttons Labeling buttons properly lets users know what will happen when they activate the control, lessens errors, and increases confidence. From 73a3195663fed4bd86bcf0c10d91f7fe02337d62 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 13 Oct 2023 17:00:04 -0400 Subject: [PATCH 3/4] add guidance about informing users about the cause of a button being inactive --- content/components/button.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/components/button.mdx b/content/components/button.mdx index 5e11cc035..74cc797d7 100644 --- a/content/components/button.mdx +++ b/content/components/button.mdx @@ -259,6 +259,8 @@ An inactive button an accessible alternative to a disabled button. They're inten Unlike a disabled button, an inactive button can respond to user input. For example, if a button shows a tooltip when hovered or focused, or a dialog when clicked. +If you need to use an inactive button, it's best to have something else on the page that informs users about the issue that broke the button's normal functionality. For example, showing a [global banner](/ui-patterns/degraded-experiences#global-system-notification) for service outages. + From be22b3d05378e205c4b4293260d459273b9d0f33 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 13 Nov 2023 13:26:49 -0500 Subject: [PATCH 4/4] updates inactive button guidance per a11y feedback --- content/components/button.mdx | 6 +++--- content/ui-patterns/degraded-experiences.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/components/button.mdx b/content/components/button.mdx index 74cc797d7..c5173d845 100644 --- a/content/components/button.mdx +++ b/content/components/button.mdx @@ -248,12 +248,12 @@ Buttons allow users to initiate an action or command when clicked or tapped. The An button that looks like a disabled primary button, but it has a focus state
-An inactive button has the same styles as a disabled button, but it still reponds to user input. +An inactive button has styles that make the button appear "muted". The style is the same for all button variants. An inactive button an accessible alternative to a disabled button. They're intended to be used for buttons that are non-functional, but cannot be removed from the page. @@ -276,7 +276,7 @@ If you need to use an inactive button, it's best to have something else on the p diff --git a/content/ui-patterns/degraded-experiences.mdx b/content/ui-patterns/degraded-experiences.mdx index a21e79033..6c2401f2d 100644 --- a/content/ui-patterns/degraded-experiences.mdx +++ b/content/ui-patterns/degraded-experiences.mdx @@ -312,7 +312,7 @@ For more information, see the the [inactive button guidelines](/components/butto Three examples: 1. An action menu that works just fine; 2. An action menu with some items disabled; 3. An action menu with all items disabled Show the menu items, but disable them and show a message explaining why they're disabled.