a11y: add italy compliance link

Composer/packages/client/src/pages/about/About.tsx

@@ -8,12 +8,25 @@ import { Link } from '@fluentui/react/lib/Link';
 import formatMessage from 'format-message';
 import { RouteComponentProps } from '@reach/router';
 import { generateUniqueId } from '@bfc/shared';
+import { useRecoilValue } from 'recoil';
 
 import { isElectron } from '../../utils/electronUtil';
+import { userSettingsState } from '../../recoilModel';
 
 import * as about from './styles';
 
+const getLocaleA11yStatementLink = (locale: string) => {
+  switch (locale) {
+    case 'it':
+      return 'https://www.microsoft.com/it-it/accessibility/declarations';
+    default:
+      return;
+  }
+};
+
 export const About: React.FC<RouteComponentProps> = () => {
+  const { appLocale } = useRecoilValue(userSettingsState);
+  const a11yStatementLink = getLocaleA11yStatementLink(appLocale);
   return (
     <div css={about.content} role="main">
       <div css={about.body}>
@@ -62,31 +75,44 @@ export const About: React.FC<RouteComponentProps> = () => {
           </div>
         </div>
       </div>
-      <div css={about.linkRow}>
-        <Link href={'https://docs.microsoft.com/en-us/composer/introduction'} styles={about.helpLink} target={'_blank'}>
-          {formatMessage(`Documentation`)}
-        </Link>
-      </div>
-      <div css={about.linkRow}>
-        <Link
-          href={'https://github.com/microsoft/BotFramework-Composer/issues/new/choose'}
-          styles={about.helpLink}
-          target={'_blank'}
-        >
-          {formatMessage(`Report a bug or request a feature`)}
-        </Link>
-      </div>
-      <div css={about.linkContainer}>
+      <div css={about.links}>
         <div css={about.linkRow}>
-          <Icon iconName={'BlockedSite'} styles={about.icon} tabIndex={-1} />
           <Link
-            href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/LICENSE.md'}
-            styles={about.link}
+            href={'https://docs.microsoft.com/en-us/composer/introduction'}
+            styles={about.helpLink}
             target={'_blank'}
           >
-            {formatMessage(`Terms of Use`)}
+            {formatMessage(`Documentation`)}
           </Link>
         </div>
+        <div css={about.linkRow}>
+          <Link
+            href={'https://github.com/microsoft/BotFramework-Composer/issues/new/choose'}
+            styles={about.helpLink}
+            target={'_blank'}
+          >
+            {formatMessage(`Report a bug or request a feature`)}
+          </Link>
+        </div>
+        <div css={about.linkContainer}>
+          {a11yStatementLink && (
+            <div css={about.linkRow}>
+              <Link href={a11yStatementLink} styles={about.helpLink} target={'_blank'}>
+                {formatMessage(`Accessibility statement`)}
+              </Link>
+            </div>
+          )}
+          <div css={about.linkRow}>
+            <Icon iconName={'BlockedSite'} styles={about.icon} tabIndex={-1} />
+            <Link
+              href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/LICENSE.md'}
+              styles={about.helpLink}
+              target={'_blank'}
+            >
+              {formatMessage(`Terms of Use`)}
+            </Link>
+          </div>
+        </div>
       </div>
     </div>
   );

Composer/packages/client/src/pages/about/styles.js

@@ -55,16 +55,19 @@ export const diagnosticsInfo = css`
 
 export const linkContainer = css`
   display: flex;
-  margin-left: 35px;
   flex-direction: column;
-  height: 110px;
+  min-height: 110px;
   margin-top: 15px;
 `;
 
 export const linkTitle = css`
   font-size: 24px;
 `;
 
+export const links = css`
+  margin-left: 60px;
+`;
+
 export const linkRow = css`
   display: flex;
   width: 400px;
@@ -77,7 +80,6 @@ export const link = {
     fontSize: FontSizes.mediumPlus,
     fontWeight: FontWeights.regular,
     color: '#0078d4',
-    marginLeft: '10px',
     textDecoration: 'underline',
   },
 };
@@ -87,7 +89,6 @@ export const helpLink = {
     fontSize: FontSizes.mediumPlus,
     fontWeight: FontWeights.regular,
     color: '#0078d4',
-    marginLeft: '60px',
     textDecoration: 'underline',
   },
 };
@@ -96,5 +97,7 @@ export const icon = {
   root: {
     color: '#0078d4',
     fontSize: '20px',
+    width: '30px',
+    marginLeft: '-30px',
   },
 };

Composer/packages/server/src/locales/en-US.json

@@ -89,6 +89,9 @@
   "access_external_resources_7e37fe21": {
     "message": "Access external resources"
   },
+  "accessibility_statement_b5bd8ca2": {
+    "message": "Accessibility statement"
+  },
   "action_created_f80af9a0": {
     "message": "Action created"
   },

Composer/packages/server/src/locales/it.json

@@ -86,6 +86,9 @@
   "access_external_resources_7e37fe21": {
     "message": "Accesso alle risorse esterne"
   },
+  "accessibility_statement_b5bd8ca2": {
+    "message": "Dichiarazione di accessibilità"
+  },
   "action_created_f80af9a0": {
     "message": "Azione creata"
   },