fix(ui): accessibility improvements related to headings and labels

packages/plugin-seo/src/fields/Preview/PreviewComponent.tsx

@@ -118,34 +118,17 @@ export const PreviewComponent: React.FC<PreviewProps> = (props) => {
           boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
           maxWidth: '600px',
           padding: '20px',
-          pointerEvents: 'none',
           width: '100%',
         }}
       >
-        <div>
-          <a
-            href={href}
-            style={{
-              textDecoration: 'none',
-            }}
-          >
-            {href || 'https://...'}
-          </a>
-        </div>
-        <h4
+        <div>{href || 'https://...'}</div>
+        <div
           style={{
             margin: 0,
           }}
         >
-          <a
-            href="/"
-            style={{
-              textDecoration: 'none',
-            }}
-          >
-            {metaTitle as string}
-          </a>
-        </h4>
+          {metaTitle as string}
+        </div>
         <p
           style={{
             margin: 0,

packages/richtext-lexical/src/features/indent/client/index.tsx

@@ -18,7 +18,6 @@ const toolbarGroups = ({ disabledNodes }: IndentFeatureProps): ToolbarGroup[] =>
   toolbarIndentGroupWithItems([
     {
       ChildComponent: IndentDecreaseIcon,
-      isActive: () => false,
       isEnabled: ({ selection }) => {
         const nodes = selection?.getNodes() ?? []
 
@@ -41,7 +40,6 @@ const toolbarGroups = ({ disabledNodes }: IndentFeatureProps): ToolbarGroup[] =>
     },
     {
       ChildComponent: IndentIncreaseIcon,
-      isActive: () => false,
       isEnabled: ({ selection }) => {
         const nodes = selection?.getNodes() ?? []
 

packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.tsx

@@ -2,7 +2,7 @@
 import type { LexicalEditor } from 'lexical'
 
 import { Tooltip, useTranslation } from '@payloadcms/ui'
-import { $addUpdateTag } from 'lexical'
+import { $addUpdateTag, $getRoot, $getSelection, SKIP_SELECTION_FOCUS_TAG } from 'lexical'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type { ToolbarGroupItem } from '../../types.js'
@@ -59,22 +59,52 @@ export const ToolbarButton = ({
       .join(' ')
   }, [active, enabled, item.key])
 
-  const handleClick = useCallback(() => {
-    if (!enabled) {
-      return
-    }
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!enabled) {
+        return
+      }
 
-    editor.focus(() => {
-      editor.update(() => {
-        $addUpdateTag('toolbar')
-      })
-      // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
-      item.onSelect?.({
-        editor,
-        isActive: active,
+      if (event.detail === 0 && item.isActive) {
+        const button = event.currentTarget
+
+        editor.update(
+          () => {
+            $addUpdateTag('toolbar')
+            $addUpdateTag(SKIP_SELECTION_FOCUS_TAG)
+            if (!$getSelection()) {
+              $getRoot().selectEnd()
+            }
+            item.onSelect?.({ editor, isActive: active })
+          },
+          {
+            onUpdate: () => {
+              // Native selection repair can focus contenteditable in Chromium despite the tag.
+              if (
+                button.isConnected &&
+                button.ownerDocument.activeElement === editor.getRootElement()
+              ) {
+                button.focus({ preventScroll: true })
+              }
+            },
+          },
+        )
+        return
+      }
+
+      editor.focus(() => {
+        editor.update(() => {
+          $addUpdateTag('toolbar')
+        })
+        // We need to wrap the onSelect in the callback, so the editor is properly focused before the onSelect is called.
+        item.onSelect?.({
+          editor,
+          isActive: active,
+        })
       })
-    })
-  }, [editor, item, active, enabled])
+    },
+    [editor, item, active, enabled],
+  )
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     // This fixes a bug where you are unable to click the button if you are in a NESTED editor (editor in blocks field in editor).

packages/ui/src/elements/NoListResults/index.css

@@ -16,6 +16,7 @@
   }
 
   .no-results__title {
+    margin: 0;
     color: var(--color-text);
     font-size: var(--text-body-large-bold-font-size);
     font-weight: var(--font-weight-strong);

packages/ui/src/elements/NoListResults/index.tsx

@@ -13,7 +13,7 @@ type NoResultsProps = {
 export function NoListResults({ Actions, description, title, withMargin }: NoResultsProps) {
   return (
     <div className={`${baseClass}${withMargin ? ` ${baseClass}--with-margin` : ''}`}>
-      {title ? <span className={`${baseClass}__title`}>{title}</span> : null}
+      {title ? <h2 className={`${baseClass}__title`}>{title}</h2> : null}
       {description ? <p className={`${baseClass}__description`}>{description}</p> : null}
       {Actions && Actions.length > 0 && (
         <div className={`${baseClass}__actions`}>