fix arrow keys

docs/resources/changelog.md

@@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
 - Fixed a bug in `sl-color-picker` where the opacity slider wasn't showing the current color
 - Fixed a bug where Edge in Windows would show the native password toggle next to the custom password toggle [#508](https://github.com/shoelace-style/shoelace/issues/508)
+- Fixed a bug where pressing up/down in `sl-tab-group` didn't select the next/previous tab in vertical placements
 - Improved size of `sl-color-picker`
 - Improved icon contrast in `sl-input`
 - Improved contrast of `sl-switch`

src/components/tab-group/tab-group.ts

@@ -179,9 +179,15 @@ export default class SlTabGroup extends LitElement {
           index = 0;
         } else if (event.key === 'End') {
           index = this.tabs.length - 1;
-        } else if (event.key === 'ArrowLeft') {
+        } else if (
+          (['top', 'bottom'].includes(this.placement) && event.key === 'ArrowLeft') ||
+          (['start', 'end'].includes(this.placement) && event.key === 'ArrowUp')
+        ) {
           index = Math.max(0, index - 1);
-        } else if (event.key === 'ArrowRight') {
+        } else if (
+          (['top', 'bottom'].includes(this.placement) && event.key === 'ArrowRight') ||
+          (['start', 'end'].includes(this.placement) && event.key === 'ArrowDown')
+        ) {
           index = Math.min(this.tabs.length - 1, index + 1);
         }