fix tabindex when readonly; fixes #2271 (#2272)

shoelace-style · Nov 15, 2024 · c232214 · c232214
1 parent 620edc2
commit c232214
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
@@ -21,6 +21,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-textarea>` that caused a console warning in Firefox when typing [#2107]
 - Fixed a bug in `<sl-carousel>` that caused interactive elements to be activated when dragging [#2196]
 - Fixed a bug in `<sl-carousel>` that caused out of order slides when used inside a resize observer [#2260]
+- Fixed a bug in `<sl-rating>` that allowed tabbing into the rating when readonly [#2271]
 - Improved performance of `<sl-range>` by skipping positioning logic when tooltip isn't shown [#2064]
 
 ## 2.18.0

diff --git a/src/components/rating/rating.component.ts b/src/components/rating/rating.component.ts
@@ -240,7 +240,7 @@ export default class SlRating extends ShoelaceElement {
         aria-valuenow=${this.value}
         aria-valuemin=${0}
         aria-valuemax=${this.max}
-        tabindex=${this.disabled ? '-1' : '0'}
+        tabindex=${this.disabled || this.readonly ? '-1' : '0'}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
         @mouseenter=${this.handleMouseEnter}