Accessibility fixes for new Admin UI

src/admin/custom-widgets/customWidgetDetailsModal.tsx

@@ -148,7 +148,7 @@ export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetail
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Custom widget / { this.state.customWidget.displayName }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Custom widget / { this.state.customWidget.displayName }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         {!this.state.isEdit &&
                             <PrimaryButton

src/admin/help/helpModal.tsx

@@ -55,7 +55,7 @@ export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text className="admin-modal-header-text">Help and resources</Text>
+                    <Text as="h2" className="admin-modal-header-text">Help and resources</Text>
                     <DefaultButton text="Close" onClick={this.props.onDismiss} />
                 </Stack>
                 <div className="admin-modal-content">

src/admin/media/imageDetailsModal.tsx

@@ -145,7 +145,7 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I
                 containerClassName="admin-modal media-details-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/media/mediaModal.tsx

@@ -258,7 +258,7 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState
                 containerClassName="admin-modal media-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text className="admin-modal-header-text">Media</Text>
+                    <Text as="h2" className="admin-modal-header-text">Media</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <DefaultButton text="Close" onClick={this.props.onDismiss} />
                     </Stack>

src/admin/media/mediaSelectionItemModal.tsx

@@ -136,7 +136,7 @@ export class MediaSelectionItemModal extends React.Component<MediaSelectionItemM
                 containerClassName="admin-modal media-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text className="admin-modal-header-text">Media</Text>
+                    <Text as="h2" className="admin-modal-header-text">Media</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <DefaultButton text="Close" onClick={this.props.onDismiss} />
                     </Stack>

src/admin/media/nonImageDetailsModal.tsx

@@ -122,7 +122,7 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/navigation/navigationItemModal.tsx

@@ -538,7 +538,7 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text className="admin-modal-header-text" block nowrap>Site menu item / { this.state.navItem.label }</Text>
+                    <Text as="h2" className="admin-modal-header-text" block nowrap>Site menu item / { this.state.navItem.label }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/pages/pageDetailsModal.tsx

@@ -169,7 +169,7 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Page / { this.state.page.title }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Page / { this.state.page.title }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/pages/pageLayoutDetailsModal.tsx

@@ -141,7 +141,7 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Layout / { this.state.layout.title }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Layout / { this.state.layout.title }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/popups/popupDetailsModal.tsx

@@ -119,7 +119,7 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">Pop-up / { this.state.popup.title }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">Pop-up / { this.state.popup.title }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/settings/settingsModal.tsx

@@ -129,7 +129,7 @@ export class SettingsModal extends React.Component<SettingsModalProps, SettingsM
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text className="admin-modal-header-text">Settings</Text>
+                    <Text as="h2" className="admin-modal-header-text">Settings</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/admin/urls/urlDetailsModal.tsx

@@ -130,7 +130,7 @@ export class UrlDetailsModal extends React.Component<UrlDetailsModalProps, UrlDe
                 containerClassName="admin-modal"
             >
                 <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">
-                    <Text block nowrap className="admin-modal-header-text">URL / { this.state.url.title }</Text>
+                    <Text as="h2" block nowrap className="admin-modal-header-text">URL / { this.state.url.title }</Text>
                     <Stack horizontal tokens={{ childrenGap: 20 }}>
                         <PrimaryButton
                             text="Save"

src/themes/designer/styles/admin.scss

@@ -137,6 +137,7 @@
     color: #fff;
     font-size: 18px;
     padding-right: 20px;
+    margin: 0;
 }
 
 .admin-modal-content {
@@ -284,6 +285,11 @@
     }
 }
 
+// Required for accessibility
+.ms-Fabric--isFocusVisible .onboarding-modal-close:focus {
+    background-color: rgba(255, 255, 255, .3);
+}
+
 .carousel-dots-container {
     .carousel-dot {
         height: 4px;

src/themes/designer/styles/variables.scss

@@ -66,7 +66,7 @@ $form-control-bg: #ffffff;
 $form-control-bg-readonly: #ffffff;
 $form-control-bg-disabled: #e6e7e8;
 $form-control-padding: 7px;
-$form-control-focus-color: #61b2e8;
+$form-control-focus-color: #329be2;
 $form-control-slider-thumb-bg: #fff;
 $form-control-slider-thumb-size: 17px;
 $form-collapsible-section-gutter-color: #ddd;