a11y: resolve issues in Notifications page (#2343)

* resolve issues in Notifications page This addresses a few minor problems that were causing a11y issues. * Update index.tsx * Update index.js Co-authored-by: Andy Brown <asbrown002@gmail.com>
microsoft · Mar 23, 2020 · 5e6a9e9 · 5e6a9e9
1 parent 1034aef
commit 5e6a9e9
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/Composer/packages/client/src/components/Header/index.js b/Composer/packages/client/src/components/Header/index.js
@@ -15,7 +15,7 @@ export const Header = props => {
       <img
         style={{ marginLeft: '9px', marginTop: '6px' }}
         alt={formatMessage('Composer Logo')}
-        ariaLabel={formatMessage('Composer Logo')}
+        aria-label={formatMessage('Composer Logo')}
         src={composerIcon}
       />
       <span css={title}>{formatMessage('Bot Framework Composer')}</span>

diff --git a/Composer/packages/client/src/components/Pagination/index.tsx b/Composer/packages/client/src/components/Pagination/index.tsx
@@ -6,6 +6,7 @@ import { jsx } from '@emotion/core';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { useState, useEffect } from 'react';
+import formatMessage from 'format-message';
 
 import { container, dropdownStyles, text } from './style';
 
@@ -57,6 +58,7 @@ export const Pagination: React.FC<IPaginationProps> = props => {
         styles={dropdownStyles}
         selectedKey={`page${index + 1}`}
         onChange={handlePageSelected}
+        ariaLabel={formatMessage('Page number')}
       />
       <span css={text}>of {pageCount}</span>
       <DefaultButton text="Next >" allowDisabledFocus onClick={hangleNextClick} disabled={index === pageCount - 1} />

diff --git a/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx b/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx
@@ -42,6 +42,7 @@ export const NotificationHeader: React.FC<INotificationHeader> = props => {
         options={createOptions()}
         styles={dropdownStyles}
         data-testid="notifications-dropdown"
+        ariaLabel={formatMessage('Notification type')}
       />
     </div>
   );

diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
@@ -44,7 +44,7 @@ const columns: IColumn[] = [
     },
   },
   {
-    key: 'Notification Type',
+    key: 'NotificationType',
     name: 'Type',
     className: notification.columnCell,
     fieldName: 'type',
@@ -59,7 +59,7 @@ const columns: IColumn[] = [
     isPadded: true,
   },
   {
-    key: 'Notification Location',
+    key: 'NotificationLocation',
     name: 'Location',
     className: notification.columnCell,
     fieldName: 'location',
@@ -73,7 +73,7 @@ const columns: IColumn[] = [
     isPadded: true,
   },
   {
-    key: 'Notification Detail',
+    key: 'NotificationDetail',
     name: 'Message',
     className: notification.columnCell,
     fieldName: 'message',