refactor: address comments.

Author: knightedcodemonkey

.oxlintrc.json

@@ -9,6 +9,7 @@
     "nursery": "off"
   },
   "rules": {
+    "eqeqeq": "error",
     "no-console": "error",
     "no-unused-vars": "error",
     "no-shadow": "error",

playwright/helpers/app-test-helpers.ts

@@ -77,12 +77,12 @@ export const runTypecheck = async (page: Page) => {
 
 export const runComponentLint = async (page: Page) => {
   await ensurePanelToolsVisible(page, 'component')
-  await page.getByRole('button', { name: 'Lint' }).first().click()
+  await page.getByRole('button', { name: 'Component lint' }).click()
 }
 
 export const runStylesLint = async (page: Page) => {
   await ensurePanelToolsVisible(page, 'styles')
-  await page.locator('#styles-panel').getByRole('button', { name: 'Lint' }).click()
+  await page.getByRole('button', { name: 'Styles lint' }).click()
 }
 
 export const getActiveStylesEditorLineNumber = async (page: Page) => {
@@ -122,7 +122,7 @@ export const ensureDiagnosticsDrawerOpen = async (page: Page) => {
     await toggle.click()
   }
 
-  await expect(page.locator('#diagnostics-drawer')).toBeVisible()
+  await expect(page.getByRole('complementary', { name: 'Diagnostics' })).toBeVisible()
 }
 
 export const ensureDiagnosticsDrawerClosed = async (page: Page) => {
@@ -135,7 +135,7 @@ export const ensureDiagnosticsDrawerClosed = async (page: Page) => {
     await page.getByRole('button', { name: 'Close diagnostics drawer' }).click()
   }
 
-  await expect(page.locator('#diagnostics-drawer')).toBeHidden()
+  await expect(page.getByRole('complementary', { name: 'Diagnostics' })).toBeHidden()
 }
 
 export const ensureAiChatDrawerOpen = async (page: Page) => {
@@ -146,7 +146,7 @@ export const ensureAiChatDrawerOpen = async (page: Page) => {
     await toggle.click()
   }
 
-  await expect(page.locator('#ai-chat-drawer')).toBeVisible()
+  await expect(page.getByRole('complementary', { name: 'AI Chat' })).toBeVisible()
 }
 
 export const ensureOpenPrDrawerOpen = async (page: Page) => {
@@ -158,7 +158,9 @@ export const ensureOpenPrDrawerOpen = async (page: Page) => {
     await toggle.click()
   }
 
-  await expect(page.locator('#github-pr-drawer')).toBeVisible()
+  await expect(
+    page.getByRole('complementary', { name: 'Open Pull Request' }),
+  ).toBeVisible()
 }
 
 export const mockRepositoryBranches = async (

src/index.html

@@ -399,7 +399,12 @@ <h2 id="component-header">Component</h2>
                 <button class="render-button" id="typecheck-button" type="button">
                   Typecheck
                 </button>
-                <button class="render-button" id="lint-component-button" type="button">
+                <button
+                  class="render-button"
+                  id="lint-component-button"
+                  type="button"
+                  aria-label="Component lint"
+                >
                   Lint
                 </button>
                 <label>
@@ -494,7 +499,12 @@ <h2 id="styles-header">Styles</h2>
             </div>
             <div class="panel-header-main-actions">
               <div class="controls controls--actions">
-                <button class="render-button" id="lint-styles-button" type="button">
+                <button
+                  class="render-button"
+                  id="lint-styles-button"
+                  type="button"
+                  aria-label="Styles lint"
+                >
                   Lint
                 </button>
                 <label>
@@ -573,9 +583,14 @@ <h2 id="preview-header">Preview</h2>
         </div>
       </section>
 
-      <aside class="diagnostics-drawer" id="diagnostics-drawer" hidden>
+      <aside
+        class="diagnostics-drawer"
+        id="diagnostics-drawer"
+        aria-labelledby="diagnostics-title"
+        hidden
+      >
         <div class="diagnostics-drawer__header">
-          <h2>Diagnostics</h2>
+          <h2 id="diagnostics-title">Diagnostics</h2>
           <button
             class="icon-button"
             id="diagnostics-close"
@@ -610,9 +625,14 @@ <h3>Styles</h3>
         </section>
       </aside>
 
-      <aside class="ai-chat-drawer" id="ai-chat-drawer" hidden>
+      <aside
+        class="ai-chat-drawer"
+        id="ai-chat-drawer"
+        aria-labelledby="ai-chat-title"
+        hidden
+      >
         <div class="ai-chat-drawer__header">
-          <h2>AI Chat</h2>
+          <h2 id="ai-chat-title">AI Chat</h2>
           <button
             class="icon-button"
             id="ai-chat-close"
@@ -662,9 +682,14 @@ <h2>AI Chat</h2>
         </div>
       </aside>
 
-      <aside class="github-pr-drawer" id="github-pr-drawer" hidden>
+      <aside
+        class="github-pr-drawer"
+        id="github-pr-drawer"
+        aria-labelledby="open-pr-title"
+        hidden
+      >
         <div class="github-pr-drawer__header">
-          <h2>Open Pull Request</h2>
+          <h2 id="open-pr-title">Open Pull Request</h2>
           <button
             class="icon-button"
             id="github-pr-close"

src/modules/editor-codemirror.js

@@ -119,6 +119,8 @@ export const createCodeMirrorEditor = async ({
   onFocus,
 }) => {
   const runtime = await ensureCodeMirrorRuntime()
+  const supportsContentAttributesFacet =
+    typeof runtime.EditorView.contentAttributes?.of === 'function'
   const editorColors = {
     keyword: 'var(--cm-keyword)',
     name: 'var(--cm-name)',
@@ -319,7 +321,7 @@ export const createCodeMirrorEditor = async ({
         ...runtime.defaultKeymap,
         ...runtime.historyKeymap,
       ]),
-      ...(contentAttributes
+      ...(contentAttributes && supportsContentAttributesFacet
         ? [runtime.EditorView.contentAttributes.of(contentAttributes)]
         : []),
       languageCompartment.of(resolveLanguageExtension(runtime, language)),
@@ -331,6 +333,17 @@ export const createCodeMirrorEditor = async ({
     state,
     parent,
   })
+
+  if (contentAttributes && !supportsContentAttributesFacet) {
+    for (const [attributeName, attributeValue] of Object.entries(contentAttributes)) {
+      if (attributeValue === null || attributeValue === undefined) {
+        view.contentDOM.removeAttribute(attributeName)
+      } else {
+        view.contentDOM.setAttribute(attributeName, String(attributeValue))
+      }
+    }
+  }
+
   const toDocumentOffset = (line, column = 1) => {
     const normalizedLine = Number.isInteger(line) ? line : Number(line)
     const normalizedColumn = Number.isInteger(column) ? column : Number(column)