a11y: Accessibility2022 (#2777)

* allow accessing table cells and associate them with table header * add aria-label * fix unit test * update header css Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Apr 27, 2020 · c2a5ddb · c2a5ddb
1 parent 0a82f21
commit c2a5ddb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/Composer/packages/client/src/components/Header/index.jsx b/Composer/packages/client/src/components/Header/index.jsx
@@ -11,7 +11,7 @@ import composerIcon from '../../images/composerIcon.svg';
 import { AppUpdaterStatus } from '../../constants';
 import { StoreContext } from '../../store';
 
-import { updateAvailableIcon, headerContainer, title, botName, divider } from './styles';
+import { updateAvailableIcon, headerContainer, title, botName, divider, headerTextContainer } from './styles';
 
 export const Header = props => {
   const {
@@ -34,13 +34,15 @@ export const Header = props => {
         aria-label={formatMessage('Composer Logo')}
         src={composerIcon}
       />
-      <div css={title}>{formatMessage('Bot Framework Composer')}</div>
-      {props.botName && (
-        <Fragment>
-          <div css={divider} />
-          <span css={botName}>{`${props.botName} (${props.locale})`}</span>
-        </Fragment>
-      )}
+      <div css={headerTextContainer}>
+        <div css={title}>{formatMessage('Bot Framework Composer')}</div>
+        {props.botName && (
+          <Fragment>
+            <div css={divider} />
+            <span css={botName}>{`${props.botName} (${props.locale})`}</span>
+          </Fragment>
+        )}
+      </div>
       {showUpdateAvailableIcon && (
         <IconButton
           iconProps={{ iconName: 'History' }}

diff --git a/Composer/packages/client/src/components/Header/styles.js b/Composer/packages/client/src/components/Header/styles.js
@@ -15,24 +15,22 @@ export const headerContainer = css`
 `;
 
 export const title = css`
-  margin-left: 25px;
+  margin-left: 20px;
   font-weight: ${FontWeights.semibold};
   font-size: 16px;
   color: #fff;
-  min-width: 200px;
 `;
 
 export const botName = css`
-  margin-left: 15px;
+  margin-left: 20px;
   font-size: 16px;
-  word-break: break-all;
   color: #fff;
 `;
 
 export const divider = css`
   height: 24px;
   border-right: 1px solid #979797;
-  margin: 0px 0px 0px 4px;
+  margin: 0px 0px 0px 20px;
 `;
 
 export const updateAvailableIcon = {
@@ -54,3 +52,9 @@ export const updateAvailableIcon = {
     backgroundColor: 'transparent',
   },
 };
+
+export const headerTextContainer = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;