refactor: address pr comments.

Author: knightedcodemonkey

playwright/workspace-tabs.spec.ts

@@ -42,15 +42,15 @@ test('removing active tab selects deterministic adjacent tab', async ({ page })
   await page.getByRole('button', { name: 'Open tab module-2.tsx' }).click()
   await expect(
     page.getByRole('button', { name: 'Open tab module-2.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
 
   await page.getByRole('button', { name: 'Remove tab module-2.tsx' }).click()
   await confirmRemoveDialog(page)
 
   await expect(page.getByRole('button', { name: 'Open tab module-2.tsx' })).toHaveCount(0)
   await expect(
     page.getByRole('button', { name: 'Open tab module-3.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
 })
 
 test('removing non-active tab does not change active tab', async ({ page }) => {
@@ -63,15 +63,15 @@ test('removing non-active tab does not change active tab', async ({ page }) => {
   await page.getByRole('button', { name: 'Open tab module-3.tsx' }).click()
   await expect(
     page.getByRole('button', { name: 'Open tab module-3.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
 
   await page.getByRole('button', { name: 'Remove tab module-2.tsx' }).click()
   await confirmRemoveDialog(page)
 
   await expect(page.getByRole('button', { name: 'Open tab module-2.tsx' })).toHaveCount(0)
   await expect(
     page.getByRole('button', { name: 'Open tab module-3.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
 })
 
 test('renaming module tab keeps name and path synchronized', async ({ page }) => {
@@ -123,7 +123,7 @@ test('active tab remains source of truth for visible editor panel', async ({ pag
 
   await page.getByRole('button', { name: 'Open tab app.css' }).click()
   await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveAttribute(
-    'aria-pressed',
+    'aria-current',
     'true',
   )
   await expect(stylesPanel).not.toHaveAttribute('hidden', '')
@@ -132,15 +132,15 @@ test('active tab remains source of truth for visible editor panel', async ({ pag
   await page.getByRole('button', { name: 'Open tab module-2.tsx' }).click()
   await expect(
     page.getByRole('button', { name: 'Open tab module-2.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
   await expect(componentPanel).not.toHaveAttribute('hidden', '')
   await expect(stylesPanel).toHaveAttribute('hidden', '')
 
   await page.locator('#collapse-component').click()
   await page.getByRole('button', { name: 'Open tab app.css' }).click()
 
   await expect(page.getByRole('button', { name: 'Open tab app.css' })).toHaveAttribute(
-    'aria-pressed',
+    'aria-current',
     'true',
   )
   await expect(stylesPanel).not.toHaveAttribute('hidden', '')
@@ -156,14 +156,14 @@ test('startup restores last active workspace tab after reload', async ({ page })
   await page.getByRole('button', { name: 'Open tab module-2.tsx' }).click()
   await expect(
     page.getByRole('button', { name: 'Open tab module-2.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
 
   await page.reload()
   await waitForInitialRender(page)
 
   await expect(
     page.getByRole('button', { name: 'Open tab module-2.tsx' }),
-  ).toHaveAttribute('aria-pressed', 'true')
+  ).toHaveAttribute('aria-current', 'true')
   await expect(page.locator('#editor-panel-component')).not.toHaveAttribute('hidden', '')
   await expect(page.locator('#editor-panel-styles')).toHaveAttribute('hidden', '')
 })
@@ -175,7 +175,7 @@ test('add menu can create styles tab while component tab is active', async ({ pa
   await addWorkspaceTab(page, { kind: 'styles' })
 
   await expect(page.getByRole('button', { name: 'Open tab module.css' })).toHaveAttribute(
-    'aria-pressed',
+    'aria-current',
     'true',
   )
   await expect(page.locator('#editor-panel-styles')).not.toHaveAttribute('hidden', '')

src/app.js

@@ -1712,7 +1712,11 @@ const renderWorkspaceTabs = () => {
       fileNameNode.textContent = tabDisplay.fileName || tab.name
       selectButton.append(fileNameNode)
 
-      selectButton.setAttribute('aria-pressed', isActive ? 'true' : 'false')
+      if (isActive) {
+        selectButton.setAttribute('aria-current', 'true')
+      } else {
+        selectButton.removeAttribute('aria-current')
+      }
       selectButton.setAttribute('aria-label', `Open tab ${tab.name}`)
       selectButton.addEventListener('click', event => {
         event.stopPropagation()

src/index.html

@@ -602,7 +602,7 @@ <h2 id="preview-header">Preview</h2>
           <div class="controls">
             <label class="color-control" for="preview-bg-color">
               <span class="preview-bg-label">Background</span>
-              <input id="preview-bg-color" type="color" value="#ffffff" />
+              <input id="preview-bg-color" type="color" value="#12141c" />
             </label>
             <button
               class="panel-collapse-toggle"

src/modules/preview-background.js

@@ -5,7 +5,7 @@ const toHexChannel = value => value.toString(16).padStart(2, '0')
 
 const normalizeColorToHex = colorValue => {
   if (typeof colorValue !== 'string' || colorValue.length === 0) {
-    return defaultLightPreviewBackgroundColor
+    return ''
   }
 
   if (/^#[\da-f]{6}$/i.test(colorValue)) {
@@ -24,12 +24,12 @@ const normalizeColorToHex = colorValue => {
 
   const channels = colorValue.match(/\d+/g)
   if (!channels || channels.length < 3) {
-    return defaultLightPreviewBackgroundColor
+    return ''
   }
 
   const [red, green, blue] = channels.slice(0, 3).map(value => Number.parseInt(value, 10))
   if ([red, green, blue].some(value => Number.isNaN(value))) {
-    return defaultLightPreviewBackgroundColor
+    return ''
   }
 
   return `#${toHexChannel(red)}${toHexChannel(green)}${toHexChannel(blue)}`
@@ -44,18 +44,20 @@ export const createPreviewBackgroundController = ({
   let previewBackgroundCustomized = false
 
   const resolveDefaultPreviewBackgroundColor = () => {
+    const themeDefaultPreviewBackgroundColor =
+      document.documentElement.dataset.theme === 'light'
+        ? defaultLightPreviewBackgroundColor
+        : defaultDarkPreviewBackgroundColor
+
     if (typeof getDefaultPreviewBackgroundColor === 'function') {
       const configuredColor = getDefaultPreviewBackgroundColor()
-      if (typeof configuredColor === 'string' && configuredColor.length > 0) {
-        return normalizeColorToHex(configuredColor)
+      const normalizedConfiguredColor = normalizeColorToHex(configuredColor)
+      if (normalizedConfiguredColor) {
+        return normalizedConfiguredColor
       }
     }
 
-    if (document.documentElement.dataset.theme === 'light') {
-      return defaultLightPreviewBackgroundColor
-    }
-
-    return defaultDarkPreviewBackgroundColor
+    return themeDefaultPreviewBackgroundColor
   }
 
   const applyPreviewBackgroundColor = color => {