fix(designer-ui): [A11Y] Auto-focus color picker in HTML toolbar (#4813)

* Auto-focus color picker in HTML toolbar * Remove unnecessary extra file
Azure · May 8, 2024 · 721181e · 721181e
1 parent 1580602
commit 721181e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/ColorPickerTextInput.tsx b/libs/designer-ui/src/lib/html/plugins/toolbar/ColorPickerTextInput.tsx
@@ -1,4 +1,6 @@
 import { css, useTheme } from '@fluentui/react';
+import { useContext, useEffect, useRef } from 'react';
+import { DropDownContext } from './helper/DropdownItems';
 
 type Props = Readonly<{
   'data-test-id'?: string;
@@ -9,7 +11,19 @@ type Props = Readonly<{
 }>;
 
 export function TextInput({ label, value, onChange, placeholder = '', 'data-test-id': dataTestId }: Props): JSX.Element {
+  const ref = useRef<HTMLInputElement>(null);
   const { isInverted } = useTheme();
+
+  const dropDownContext = useContext(DropDownContext);
+
+  const { registerItem } = dropDownContext ?? {};
+
+  useEffect(() => {
+    if (registerItem && ref?.current) {
+      registerItem(ref);
+    }
+  }, [ref, registerItem]);
+
   return (
     <div className="msla-colorpicker-input-wrapper">
       <label className="msla-colorpicker-input-label">{label}</label>
@@ -21,6 +35,7 @@ export function TextInput({ label, value, onChange, placeholder = '', 'data-test
         onChange={(e) => {
           onChange(e.target.value);
         }}
+        ref={ref}
         data-test-id={dataTestId}
       />
     </div>

diff --git a/libs/designer-ui/src/lib/html/plugins/toolbar/helper/DropdownItems.tsx b/libs/designer-ui/src/lib/html/plugins/toolbar/helper/DropdownItems.tsx
@@ -2,6 +2,8 @@ import { css, useTheme } from '@fluentui/react';
 import type { MutableRefObject, RefObject } from 'react';
 import { createContext, useEffect, useMemo, useCallback, useState } from 'react';
 
+type DropdownItemHTMLElement = HTMLButtonElement | HTMLInputElement;
+
 interface DropdownItemsProps {
   children: React.ReactNode;
   dropDownRef: MutableRefObject<HTMLDivElement | null>;
@@ -10,19 +12,19 @@ interface DropdownItemsProps {
 }
 
 export type DropDownContextType = {
-  registerItem: (ref: RefObject<HTMLButtonElement>) => void;
+  registerItem: (ref: RefObject<DropdownItemHTMLElement>) => void;
 };
 
 export const DropDownContext = createContext<DropDownContextType | null>(null);
 
 export const DropDownItems = ({ children, dropDownRef, stopCloseOnClickSelf, onClose }: DropdownItemsProps) => {
   const { isInverted } = useTheme();
-  const [items, setItems] = useState<RefObject<HTMLButtonElement>[]>();
-  const [highlightedItem, setHighlightedItem] = useState<RefObject<HTMLButtonElement>>();
+  const [items, setItems] = useState<RefObject<DropdownItemHTMLElement>[]>();
+  const [highlightedItem, setHighlightedItem] = useState<RefObject<DropdownItemHTMLElement>>();
 
   // register item to end of list
   const registerItem = useCallback(
-    (itemRef: RefObject<HTMLButtonElement>) => {
+    (itemRef: RefObject<DropdownItemHTMLElement>) => {
       setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
     },
     [setItems]
@@ -94,6 +96,7 @@ export const DropDownItems = ({ children, dropDownRef, stopCloseOnClickSelf, onC
             e.relatedTarget?.classList.contains('fontsize-item') ||
             e.relatedTarget?.classList.contains('fontfamily-item') ||
             e.relatedTarget?.classList.contains('fontcolor-item') ||
+            e.relatedTarget?.classList.contains('default-color-buttons') ||
             e.target.classList.contains('blockcontrol-item') ||
             e.target.classList.contains('default-color-buttons')
           ) {