a11y: Accessibility issue (#2197)

* fix issue 2143 add title to form and visual iframe * update text * fix accessibility issue 2123 update ariaLabel text Co-authored-by: Corina <14900841+corinagum@users.noreply.github.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Mar 12, 2020 · fd37ebf · fd37ebf
1 parent eb0188b
commit fd37ebf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
@@ -411,6 +411,7 @@ function DesignPage(props) {
                     hidden={triggerButtonVisible || !selected}
                     src={`${rootPath}/extensionContainer.html`}
                     ref={addRef}
+                    title={formatMessage('visual editor')}
                   />
                   {!selected && onRenderBlankVisual(triggerButtonVisible, openNewTriggerModal)}
                 </div>
@@ -419,6 +420,7 @@ function DesignPage(props) {
                   name="FormEditor"
                   css={formEditor}
                   src={`${rootPath}/extensionContainer.html`}
+                  title={formatMessage('form editor')}
                 />
               </div>
             </Fragment>

diff --git a/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx b/Composer/packages/client/src/pages/notifications/NotificationHeader.tsx
@@ -11,10 +11,16 @@ import { notificationHeader, notificationHeaderText, dropdownStyles } from './st
 
 const createOptions = (): IDropdownOption[] => {
   const defaultOptions: IDropdownOption[] = [
-    { key: formatMessage('Show All Notifications'), text: formatMessage('All'), data: '', isSelected: true },
+    {
+      key: formatMessage('Show All Notifications'),
+      text: formatMessage('All'),
+      ariaLabel: formatMessage('Show All Notifications'),
+      data: '',
+      isSelected: true,
+    },
   ];
   DiagnosticSeverity.forEach(item => {
-    return defaultOptions.push({ key: item, text: item, data: item });
+    return defaultOptions.push({ key: item, text: item, data: item, ariaLabel: `Show ${item} Notifications` });
   });
   return defaultOptions;
 };