chore(a11y): add controls to LabelConfig

examples/react/src/examples/A11y/index.tsx

@@ -65,6 +65,10 @@ const A11y = () => {
         'a11yDescription.node.default': 'Custom Node Desc.',
         'a11yDescription.node.keyboardDisabled': 'Custom Keyboard Desc.',
         'a11yDescription.edge.default': 'Custom Edge Desc.',
+        'controls.zoomin.title': 'Custom Zoom in',
+        'controls.zoomout.title': 'Custom Zoom Out',
+        'controls.fitview.title': 'Custom Fit View',
+        'controls.interactive.title': 'Custom Toggle Interactivity',
       }}
     >
       <Background variant={BackgroundVariant.Dots} />

packages/react/src/additional-components/Controls/Controls.tsx

@@ -19,6 +19,7 @@ const selector = (s: ReactFlowState) => ({
   isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
   minZoomReached: s.transform[2] <= s.minZoom,
   maxZoomReached: s.transform[2] >= s.maxZoom,
+  labelConfig: s.labelConfig,
 });
 
 function ControlsComponent({
@@ -38,7 +39,7 @@ function ControlsComponent({
   'aria-label': ariaLabel = 'React Flow controls',
 }: ControlProps) {
   const store = useStoreApi();
-  const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
+  const { isInteractive, minZoomReached, maxZoomReached, labelConfig } = useStore(selector, shallow);
   const { zoomIn, zoomOut, fitView } = useReactFlow();
 
   const onZoomInHandler = () => {
@@ -67,7 +68,6 @@ function ControlsComponent({
   };
 
   const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
-
   return (
     <Panel
       className={cc(['react-flow__controls', orientationClass, className])}
@@ -81,8 +81,8 @@ function ControlsComponent({
           <ControlButton
             onClick={onZoomInHandler}
             className="react-flow__controls-zoomin"
-            title="zoom in"
+            title={labelConfig['controls.zoomin.title']}
-            aria-label="zoom in"
+            aria-label={labelConfig['controls.zoomin.title']}
             disabled={maxZoomReached}
           >
             <PlusIcon />
@@ -90,8 +90,8 @@ function ControlsComponent({
           <ControlButton
             onClick={onZoomOutHandler}
             className="react-flow__controls-zoomout"
-            title="zoom out"
+            title={labelConfig['controls.zoomout.title']}
-            aria-label="zoom out"
+            aria-label={labelConfig['controls.zoomout.title']}
             disabled={minZoomReached}
           >
             <MinusIcon />
@@ -102,8 +102,8 @@ function ControlsComponent({
         <ControlButton
           className="react-flow__controls-fitview"
           onClick={onFitViewHandler}
-          title="fit view"
+          title={labelConfig['controls.fitview.title']}
-          aria-label="fit view"
+          aria-label={labelConfig['controls.fitview.title']}
         >
           <FitViewIcon />
         </ControlButton>
@@ -112,8 +112,8 @@ function ControlsComponent({
         <ControlButton
           className="react-flow__controls-interactive"
           onClick={onToggleInteractivity}
-          title="toggle interactivity"
+          title={labelConfig['controls.interactive.title']}
-          aria-label="toggle interactivity"
+          aria-label={labelConfig['controls.interactive.title']}
         >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
         </ControlButton>

packages/system/src/constants.ts

@@ -44,6 +44,12 @@ export const defaultLabelConfig = {
     'Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.',
   'a11yDescription.edge.default':
     'Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.',
+
+  // Control elements
+  'controls.zoomin.title': 'Zoom In',
+  'controls.zoomout.title': 'Zoom Out',
+  'controls.fitview.title': 'Fit View',
+  'controls.interactive.title': 'Toggle Interactivity',
 };
 
 export type LabelConfig = Partial<typeof defaultLabelConfig>;