a11y: accessibility issues (#2155)

* fix issues 2193 * fix issue 2094 add heading * add header in about page Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Mar 22, 2020 · 854a81d · 854a81d
1 parent d2a2ab9
commit 854a81d
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 13 deletions.
diff --git a/Composer/packages/client/src/components/Header/index.js b/Composer/packages/client/src/components/Header/index.js
@@ -12,7 +12,12 @@ import { headerContainer, title, botName } from './styles';
 export const Header = props => {
   return (
     <div css={headerContainer}>
-      <img style={{ marginLeft: '9px', marginTop: '6px' }} src={composerIcon} />
+      <img
+        style={{ marginLeft: '9px', marginTop: '6px' }}
+        alt={formatMessage('Composer Logo')}
+        ariaLabel={formatMessage('Composer Logo')}
+        src={composerIcon}
+      />
       <span css={title}>{formatMessage('Bot Framework Composer')}</span>
       <span css={botName}>{props.botName}</span>
     </div>

diff --git a/Composer/packages/client/src/pages/about/index.tsx b/Composer/packages/client/src/pages/about/index.tsx
@@ -14,7 +14,7 @@ export const About: React.FC<RouteComponentProps> = () => {
   return (
     <div css={about.outline}>
       <div css={about.content}>
-        <div css={about.title}> {formatMessage(`About`)} </div>
+        <h1 css={about.title}> {formatMessage(`About`)} </h1>
         <div css={about.body}>
           <div css={about.version}>{formatMessage(`Release: `) + (process.env.COMPOSER_VERSION || 'Unknown')}</div>
           <div css={about.description}>
@@ -76,7 +76,12 @@ export const About: React.FC<RouteComponentProps> = () => {
         </div>
         <div css={about.linkContainer}>
           <div css={about.linkRow}>
-            <IconButton styles={about.icon} iconProps={{ iconName: 'BlockedSite' }} />
+            <IconButton
+              styles={about.icon}
+              ariaLabel={formatMessage('Terms of User Button')}
+              iconProps={{ iconName: 'BlockedSite' }}
+              tabIndex={-1}
+            />
             <Link
               href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/LICENSE.md'}
               tabIndex={-1}
@@ -86,7 +91,12 @@ export const About: React.FC<RouteComponentProps> = () => {
             </Link>
           </div>
           <div css={about.linkRow}>
-            <IconButton styles={about.icon} iconProps={{ iconName: 'Lock' }} />
+            <IconButton
+              styles={about.icon}
+              ariaLabel={formatMessage('Privacy button')}
+              iconProps={{ iconName: 'Lock' }}
+              tabIndex={-1}
+            />
             <Link
               href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/PRIVACY.md'}
               tabIndex={-1}

diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
@@ -130,7 +130,7 @@ const Home: React.FC<RouteComponentProps> = () => {
       <ToolBar toolbarItems={toolbarItems} />
       <div css={home.page}>
         <div css={home.leftPage}>
-          <div css={home.title}>{formatMessage(`Bot Framework Composer`)}</div>
+          <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
           <div css={home.introduction}>
             {formatMessage(
               'Bot Framework Composer is an integrated development environment (IDE) for building bots and other types of conversational software with the Microsoft Bot Framework technology stack'

diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
@@ -5,7 +5,7 @@ import { css } from '@emotion/core';
 import { IIconStyles } from 'office-ui-fabric-react/lib/Icon';
 import { ITheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
 import { Depths, MotionTimings, MotionDurations } from '@uifabric/fluent-theme';
-import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 export const outline = css`
   display: flex;
   flex-direction: column;
@@ -33,7 +33,7 @@ export const rightPage = css`
 
 export const title = css`
   display: block;
-  font-size: 28px;
+  font-size: ${FontSizes.xxLarge};
   line-height: 36px;
   font-weight: ${FontWeights.semibold};
   margin: 0;

diff --git a/Composer/packages/client/src/pages/language-generation/index.tsx b/Composer/packages/client/src/pages/language-generation/index.tsx
@@ -93,7 +93,7 @@ const LGPage: React.FC<LGPageProps> = props => {
     <Fragment>
       <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
-        <div css={HeaderText}>{formatMessage('Bot Responses')}</div>
+        <h1 css={HeaderText}>{formatMessage('Bot Responses')}</h1>
         <div css={flexContent}>
           <Toggle
             className={'toggleEditMode'}

diff --git a/Composer/packages/client/src/pages/language-understanding/index.tsx b/Composer/packages/client/src/pages/language-understanding/index.tsx
@@ -89,7 +89,7 @@ const LUPage: React.FC<LUPageProps> = props => {
     <Fragment>
       <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
-        <div css={HeaderText}>{formatMessage('User Input')}</div>
+        <h1 css={HeaderText}>{formatMessage('User Input')}</h1>
         <div css={flexContent}>
           {(!isRoot || edit) && (
             <Toggle

diff --git a/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx b/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx
@@ -34,7 +34,7 @@ export const NotificationHeader: React.FC<INotificationHeader> = props => {
 
   return (
     <div css={notificationHeader}>
-      <div css={notificationHeaderText}>{formatMessage('Notifications')}</div>
+      <h1 css={notificationHeaderText}>{formatMessage('Notifications')}</h1>
       <Dropdown
         onChange={(event, option) => {
           if (option) onChange(option.data);

diff --git a/Composer/packages/client/src/pages/setting/deployment/index.js b/Composer/packages/client/src/pages/setting/deployment/index.js
@@ -44,7 +44,7 @@ export const Deployment = () => {
   return (
     <Fragment>
       <div style={styles.page}>
-        <div style={styles.header}>{instructions.title}</div>
+        <h1 style={styles.header}>{instructions.title}</h1>
         <p>{instructions.description}</p>
         <Stack horizontal gap="2rem" styles={{ root: { marginBottom: '1rem' } }}>
           <DefaultButton onClick={openWizardCreate} text={instructions.button1} />

diff --git a/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx b/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx
@@ -72,7 +72,7 @@ export const DialogSettings = () => {
 
   const hostedControl = () => (
     <div css={hostedControls}>
-      <div css={hostedControlsTitle}>{hostControlLabels.botSettings}</div>
+      <h1 css={hostedControlsTitle}>{hostControlLabels.botSettings}</h1>
       <p>
         {hostControlLabels.botSettingDescription}
         &nbsp;

diff --git a/Composer/packages/client/src/pages/setting/onboarding-settings/index.tsx b/Composer/packages/client/src/pages/setting/onboarding-settings/index.tsx
@@ -26,7 +26,7 @@ export const OnboardingSettings = () => {
 
   return (
     <div css={onboardingSettings}>
-      <div css={onboardingTitle}>{formatMessage('Onboarding')}</div>
+      <h1 css={onboardingTitle}>{formatMessage('Onboarding')}</h1>
       <p>{formatMessage('Enabling Onboarding will restart the product tour.')}</p>
       <Toggle
         data-testid="onboardingToggle"