Merge pull request #34 from microsoft/users/esmishra/feedbackIntegration

Accessibility panel and keyboard column resizing

Author: emishra

source/reactjs/.gitignore

@@ -70,6 +70,7 @@ bin/
 dist/
 bundles/
 public/ocv
+index.html
 
 # editor specific
 .IDEA/

source/reactjs/THIRD-PARTY-NOTICES.TXT source/reactjs/THIRD_PARTY_NOTICES.txtsource/reactjs/THIRD-PARTY-NOTICES.TXT renamed to source/reactjs/THIRD_PARTY_NOTICES.txt

@@ -12,6 +12,7 @@ declare global {
     const __API_URL_ROOT__: string;
     const __RESOURCE_URL__: string;
     const __GRAPH_BASE_URL__: string;
+    const __UPN_SUFFIX__: string;
     const __GRAPH_RESOURCE_URL__: string;
     const __AUTHORITY__:string;
     const __API_BASE_MATTER_URL__: string;

source/reactjs/global.d.ts

@@ -47,13 +47,22 @@ import { UserSettingsPanel } from './Components/UserSettingsPanel/UserSettingsPa
 import { helpPanelReducer, helpPanelReducerName } from './Components/HelpPanel/HelpPanel.reducer';
 import { helpPanelSagas } from './Components/HelpPanel/HelpPanel.sagas';
 import { ProfilePanel } from './Components/ProfilePanel';
+import { registerIcons } from '@fluentui/react/lib/Styling';
+import { AccessibilityPanel } from './Components/AccessibilityPanel/AccessibilityPanel';
+import { accessibilityReducer, accessibilityReducerName } from './Components/AccessibilityPanel/Accessibility.reducer';
 
 export function App(): React.ReactElement {
     useLoginOnStartup(true, { scopes: ['https://graph.microsoft.com/.default'] });
     initializeIcons();
+    registerIcons({
+        icons: {
+            Accessibility: <SharedStyled.AccessibilityIcon />,
+        },
+    });
     useDynamicReducer(sharedComponentsReducerName, sharedComponentsReducer as Reducer, [sharedComponentsSagas], false);
     useDynamicReducer(helpPanelReducerName, helpPanelReducer as Reducer, [helpPanelSagas], false);
     usePersistentReducer(sharedComponentsPersistentReducerName, sharedComponentsPersistentReducer);
+    usePersistentReducer(accessibilityReducerName, accessibilityReducer);
     getNotifications(); // to get notification on initial load
     const { useSelector, dispatch } = React.useContext(Context as React.Context<IEmployeeExperienceContext>);
     const teachingBubbleVisibility = useSelector(getTeachingBubbleVisibility);
@@ -185,6 +194,7 @@ export function App(): React.ReactElement {
 
     return (
         <div>
+            <AccessibilityPanel />
             <HelpPanel />
             <UserSettingsPanel />
             <NotificationPanelCustom />

source/reactjs/public/icons/accessibility-white.png

@@ -0,0 +1,10 @@
+export enum AccessibilityActionType {
+    TOGGLE_KEYBOARD_COLUMN_RESIZING = 'TOGGLE_KEYBOARD_COLUMN_RESIZING',
+}
+
+export type AccessibilityAction = IToggleKeyboardColumnResizing;
+
+export interface IToggleKeyboardColumnResizing {
+    type: AccessibilityActionType.TOGGLE_KEYBOARD_COLUMN_RESIZING;
+    isOn: boolean;
+}

source/reactjs/public/icons/accessibility.svg

@@ -0,0 +1,8 @@
+import { AccessibilityActionType, IToggleKeyboardColumnResizing } from './Accessibility.action-types';
+
+export function toggleKeyboardColumnResizing(isOn: boolean): IToggleKeyboardColumnResizing {
+    return {
+        type: AccessibilityActionType.TOGGLE_KEYBOARD_COLUMN_RESIZING,
+        isOn,
+    };
+}

source/reactjs/public/icons/ic_fluent_accessibility_24_regular.svg

@@ -0,0 +1,22 @@
+import { AccessibilityAction, AccessibilityActionType } from './Accessibility.action-types';
+import { IAccessibilityState } from './Accessibility.types';
+
+export const accessibilityReducerName = 'AccessibilityReducer';
+export const accessibilityInitialState: IAccessibilityState = {
+    isKeyboardColumnResizingOn: false,
+};
+
+export function accessibilityReducer(
+    prev: IAccessibilityState = accessibilityInitialState,
+    action: AccessibilityAction
+): IAccessibilityState {
+    switch (action.type) {
+        case AccessibilityActionType.TOGGLE_KEYBOARD_COLUMN_RESIZING:
+            return {
+                ...prev,
+                isKeyboardColumnResizingOn: action.isOn,
+            };
+        default:
+            return prev;
+    }
+}