Hotkeys, Storybook theme fix, allow bullets (#40375)

.storybook/preview.tsx

@@ -170,7 +170,7 @@ const preview: Preview = {
     (Story, { globals }) => {
       const theme = globals.theme;
       useEffect(() => {
-        document.body.setAttribute('data-color-scheme', theme);
+        document.documentElement.dataset.colorScheme = theme;
       }, [theme]);
       return <Story />;
     },

app/javascript/mastodon/components/card/index.tsx

@@ -94,7 +94,6 @@ export const CardTitle: React.FC<
       <span id={`${id}_title`}>{children}</span>
 
       {afterContent && (
-        // eslint-disable-next-line no-restricted-syntax -- Allow &bull;
         <span>
           &nbsp;&bull;&nbsp;
           {afterContent}

app/javascript/mastodon/components/hotkeys/index.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 
+import type { PolymorphicProps } from '@/types/polymorphic';
+
 import { normalizeKey, isKeyboardEvent, matchesKeyCode } from './utils';
 
 /**
@@ -271,6 +273,24 @@ export function useHotkeys<T extends HTMLElement>(handlers: HandlerMap) {
   return ref;
 }
 
+interface HotkeysProps {
+  /**
+   * An object containing functions to be run when a hotkey is pressed.
+   * The key must be the name of a registered hotkey, e.g. "help" or "search"
+   */
+  handlers: HandlerMap;
+  /**
+   * When enabled, hotkeys will be matched against the document root
+   * rather than only inside of this component's DOM node.
+   */
+  global?: boolean;
+  /**
+   * Allow the rendered `div` to be focused
+   */
+  focusable?: boolean;
+  children: React.ReactNode;
+}
+
 /**
  * The Hotkeys component allows us to globally register keyboard combinations
  * under a name and assign actions to them, either globally or scoped to a portion
@@ -290,28 +310,24 @@ export function useHotkeys<T extends HTMLElement>(handlers: HandlerMap) {
  *
  * Now this function will be called when the 'open' hotkey is pressed by the user.
  */
-export const Hotkeys: React.FC<{
-  /**
-   * An object containing functions to be run when a hotkey is pressed.
-   * The key must be the name of a registered hotkey, e.g. "help" or "search"
-   */
-  handlers: HandlerMap;
-  /**
-   * When enabled, hotkeys will be matched against the document root
-   * rather than only inside of this component's DOM node.
-   */
-  global?: boolean;
-  /**
-   * Allow the rendered `div` to be focused
-   */
-  focusable?: boolean;
-  children: React.ReactNode;
-}> = ({ handlers, global, focusable = true, children }) => {
+export const Hotkeys = <As extends React.ElementType = 'div'>({
+  as: asComp,
+  handlers,
+  global,
+  focusable = true,
+  children,
+  ...props
+}: PolymorphicProps<HotkeysProps, As>) => {
   const ref = useHotkeys<HTMLDivElement>(handlers);
+  const Comp = asComp ?? 'div';
 
   return (
-    <div ref={global ? undefined : ref} tabIndex={focusable ? -1 : undefined}>
+    <Comp
+      {...props}
+      ref={global ? undefined : ref}
+      tabIndex={focusable ? -1 : undefined}
+    >
       {children}
-    </div>
+    </Comp>
   );
 };

app/javascript/mastodon/features/compose/redesign/quote.tsx

@@ -184,7 +184,6 @@ const ComposeQuoteBody: React.FC<{
             defaultMessage='Poll {sep} {isOpen, select, open {Accepting responses} other {Closed}}'
             values={{
               isOpen: poll.expired ? 'closed' : 'open',
-              // eslint-disable-next-line no-restricted-syntax
               sep: <>&bull;</>,
             }}
           />

eslint.config.mjs

@@ -164,16 +164,6 @@ export default tseslint.config([
     },
 
     rules: {
-      'no-restricted-syntax': [
-        'error',
-        {
-          // eslint-disable-next-line no-restricted-syntax
-          selector: 'Literal[value=/•/], JSXText[value=/•/]',
-          // eslint-disable-next-line no-restricted-syntax
-          message: "Use '·' (middle dot) instead of '•' (bullet)",
-        },
-      ],
-
       'formatjs/enforce-description': 'off', // description values not currently used
       'formatjs/enforce-id': 'off', // Explicit IDs are used in the project
       'formatjs/enforce-placeholders': 'off', // Issues in short_number.jsx