From 1282deabd020cd41f0e9f2b9b994ef74e138443b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 31 Mar 2021 12:03:20 -0400
Subject: [PATCH] improve a11y for button links
---
docs/resources/changelog.md | 6 +++++-
src/components/button/button.ts | 3 +++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 959987a3..0b651dcf 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
+## Next
+
+- Improved a11y for disabled buttons that are rendered as links
+
## 2.0.0-beta.36
- 🚨 BREAKING: renamed `setFocus()` to `focus()` in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab
@@ -330,7 +334,7 @@ The following pages demonstrate why this change was necessary.
- Added keyboard support to the preview resizer in the docs
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
-- Fixed a bug where `--sl-input-color-*` custom properties had no affect on `sl-input` and `sl-textarea`
+- Fixed a bug where `--sl-input-color-*` custom properties had no effect on `sl-input` and `sl-textarea`
- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
## 2.0.0-beta.15
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a16ffd42..ecd9ff0a 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -223,6 +223,9 @@ export default class SlButton extends LitElement {
target=${ifDefined(this.target)}
download=${ifDefined(this.download)}
rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
+ role="button"
+ aria-disabled=${this.disabled ? 'true' : 'false'}
+ tabindex=${this.disabled ? '-1' : '0'}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@click=${this.handleClick}