From bfc40744cc913e1dfd7ec220c8bf2168da1f97ec Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Thu, 26 May 2022 16:50:52 -0700
Subject: [PATCH] a11y: add labels for editor toolbar (#9210)

* a11y: add labels for editor toolbar

* Fix lint
---
 .../src/components/toolbar/FieldToolbar.tsx   |  3 +++
 .../components/toolbar/ToolbarButtonMenu.tsx  |  4 +++-
 .../__tests__/ToolbarButtonMenu.test.tsx      | 22 +++++++++----------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/Composer/packages/lib/code-editor/src/components/toolbar/FieldToolbar.tsx b/Composer/packages/lib/code-editor/src/components/toolbar/FieldToolbar.tsx
index 4b65107519..0d8813ad5c 100644
--- a/Composer/packages/lib/code-editor/src/components/toolbar/FieldToolbar.tsx
+++ b/Composer/packages/lib/code-editor/src/components/toolbar/FieldToolbar.tsx
@@ -111,6 +111,7 @@ export const FieldToolbar = React.memo((props: FieldToolbarProps) => {
         commandBarButtonAs: () => (
           <TooltipTemplateButton
             key="template"
+            ariaLabel={formatMessage('Insert a template reference')}
             disabled={!templateRefPayload?.data?.templates?.length}
             dismissHandlerClassName={dismissHandlerClassName}
             payload={templateRefPayload}
@@ -123,6 +124,7 @@ export const FieldToolbar = React.memo((props: FieldToolbarProps) => {
         commandBarButtonAs: () => (
           <TooltipPropertyButton
             key="property"
+            ariaLabel={formatMessage('Insert a property reference in memory')}
             disabled={!propertyRefPayload?.data?.properties?.length}
             dismissHandlerClassName={dismissHandlerClassName}
             payload={propertyRefPayload}
@@ -134,6 +136,7 @@ export const FieldToolbar = React.memo((props: FieldToolbarProps) => {
         commandBarButtonAs: () => (
           <TooltipFunctionButton
             key="function"
+            ariaLabel={formatMessage('Insert an adaptive expression pre-built function')}
             dismissHandlerClassName={dismissHandlerClassName}
             payload={functionRefPayload}
           />
diff --git a/Composer/packages/lib/code-editor/src/components/toolbar/ToolbarButtonMenu.tsx b/Composer/packages/lib/code-editor/src/components/toolbar/ToolbarButtonMenu.tsx
index 9698781b36..0a687054bb 100644
--- a/Composer/packages/lib/code-editor/src/components/toolbar/ToolbarButtonMenu.tsx
+++ b/Composer/packages/lib/code-editor/src/components/toolbar/ToolbarButtonMenu.tsx
@@ -86,6 +86,7 @@ const svgIconStyle = { fill: FluentTheme.palette.neutralPrimary, margin: '0 4px'
 const iconStyles = { root: { color: FluentTheme.palette.neutralPrimary, margin: '0 4px', width: 16, height: 16 } };
 
 type ToolbarButtonMenuProps = {
+  ariaLabel: string;
   payload: ToolbarButtonPayload;
   disabled?: boolean;
 
@@ -138,7 +139,7 @@ const TooltipItem = React.memo(({ text, tooltip }: { text?: string; tooltip?: st
 });
 
 export const ToolbarButtonMenu = React.memo((props: ToolbarButtonMenuProps) => {
-  const { payload, disabled = false, dismissHandlerClassName = jsLgToolbarMenuClassName } = props;
+  const { payload, disabled = false, dismissHandlerClassName = jsLgToolbarMenuClassName, ariaLabel } = props;
 
   const [propertyTreeExpanded, setPropertyTreeExpanded] = React.useState<Record<string, boolean>>({});
   const uiStrings = React.useMemo(() => getStrings(payload.kind), [payload.kind]);
@@ -444,6 +445,7 @@ export const ToolbarButtonMenu = React.memo((props: ToolbarButtonMenuProps) => {
 
   return (
     <IconButton
+      aria-label={ariaLabel}
       className={dismissHandlerClassName}
       data-testid="menuButton"
       disabled={disabled}
diff --git a/Composer/packages/lib/code-editor/src/components/toolbar/__tests__/ToolbarButtonMenu.test.tsx b/Composer/packages/lib/code-editor/src/components/toolbar/__tests__/ToolbarButtonMenu.test.tsx
index b14382af79..97742582fc 100644
--- a/Composer/packages/lib/code-editor/src/components/toolbar/__tests__/ToolbarButtonMenu.test.tsx
+++ b/Composer/packages/lib/code-editor/src/components/toolbar/__tests__/ToolbarButtonMenu.test.tsx
@@ -57,7 +57,7 @@ describe('<ToolbarButtonMenu />', () => {
    * -------------------------------------------------
    */
   it('template: Should render icon button with templates in the menu when passed template payload', async () => {
-    const component = render(<ToolbarButtonMenu payload={templatePayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={templatePayload} />);
 
     expect(component).toBeTruthy();
 
@@ -67,7 +67,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('template: Should filter templates when passed query', async () => {
-    render(<ToolbarButtonMenu payload={templatePayload} />);
+    render(<ToolbarButtonMenu ariaLabel="test" payload={templatePayload} />);
 
     fireEvent.click(screen.getByTestId('menuButton'));
     fireEvent.change(screen.getByPlaceholderText('Search templates'), { target: { value: 'keyword' } });
@@ -80,7 +80,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('template: Should call onSelectCallback when a template is selected', async () => {
-    const component = render(<ToolbarButtonMenu payload={templatePayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={templatePayload} />);
 
     expect(component).toBeTruthy();
 
@@ -97,7 +97,7 @@ describe('<ToolbarButtonMenu />', () => {
    */
 
   it('property: Should render icon button with properties in menu when passed property payload', async () => {
-    const component = render(<ToolbarButtonMenu payload={propertiesPayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={propertiesPayload} />);
 
     expect(component).toBeTruthy();
 
@@ -108,7 +108,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('property: Should filter properties when passed query', async () => {
-    render(<ToolbarButtonMenu payload={propertiesPayload} />);
+    render(<ToolbarButtonMenu ariaLabel="test" payload={propertiesPayload} />);
 
     fireEvent.click(screen.getByTestId('menuButton'));
     fireEvent.change(screen.getByPlaceholderText('Search properties'), { target: { value: 'this' } });
@@ -121,7 +121,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('property: Should expand property in the menu on click if not leaf', async () => {
-    render(<ToolbarButtonMenu payload={propertiesPayload} />);
+    render(<ToolbarButtonMenu ariaLabel="test" payload={propertiesPayload} />);
 
     fireEvent.click(screen.getByTestId('menuButton'));
     fireEvent.click(screen.getByText('this.'));
@@ -130,7 +130,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('property: Should call onSelectCallback when a leaf property is selected', async () => {
-    const component = render(<ToolbarButtonMenu payload={propertiesPayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={propertiesPayload} />);
 
     expect(component).toBeTruthy();
 
@@ -148,7 +148,7 @@ describe('<ToolbarButtonMenu />', () => {
    */
 
   it('function: Should render icon button with functions in menu when passed function payload', async () => {
-    const component = render(<ToolbarButtonMenu payload={functionPayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={functionPayload} />);
 
     expect(component).toBeTruthy();
 
@@ -160,7 +160,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('function: Should show sub-menu when category is clicked from menu', async () => {
-    render(<ToolbarButtonMenu payload={functionPayload} />);
+    render(<ToolbarButtonMenu ariaLabel="test" payload={functionPayload} />);
 
     fireEvent.click(screen.getByTestId('menuButton'));
     fireEvent.click(screen.getByText(builtInFunctionsGrouping[0].name));
@@ -171,7 +171,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('function: Should filter functions when passed query', async () => {
-    render(<ToolbarButtonMenu payload={functionPayload} />);
+    render(<ToolbarButtonMenu ariaLabel="test" payload={functionPayload} />);
 
     fireEvent.click(screen.getByTestId('menuButton'));
     fireEvent.change(screen.getByPlaceholderText('Search functions'), { target: { value: 'string' } });
@@ -188,7 +188,7 @@ describe('<ToolbarButtonMenu />', () => {
   });
 
   it('function: Should call onSelectCallback when a function is selected', async () => {
-    const component = render(<ToolbarButtonMenu payload={functionPayload} />);
+    const component = render(<ToolbarButtonMenu ariaLabel="test" payload={functionPayload} />);
 
     expect(component).toBeTruthy();