Accessibility fixes for new Admin UI (#2710)

jsorohova · web-flow · commit 43f91b0b31e6 · 2024-10-25T18:53:59.000+02:00
diff --git a/src/admin/custom-widgets/customWidgetDetailsModal.tsx b/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
diff --git a/src/admin/help/helpModal.tsx b/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">
diff --git a/src/admin/media/imageDetailsModal.tsx b/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"
diff --git a/src/admin/media/mediaModal.tsx b/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>
diff --git a/src/admin/media/mediaSelectionItemModal.tsx b/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>
diff --git a/src/admin/media/nonImageDetailsModal.tsx b/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"
diff --git a/src/admin/navigation/navigationItemModal.tsx b/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"
diff --git a/src/admin/pages/pageDetailsModal.tsx b/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"
diff --git a/src/admin/pages/pageLayoutDetailsModal.tsx b/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"
diff --git a/src/admin/popups/popupDetailsModal.tsx b/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"
diff --git a/src/admin/settings/settingsModal.tsx b/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"
diff --git a/src/admin/urls/urlDetailsModal.tsx b/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"
diff --git a/src/themes/designer/styles/admin.scss b/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;
diff --git a/src/themes/designer/styles/variables.scss b/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;

Original file line number	Diff line number	Diff line change
`@@ -148,7 +148,7 @@ export class CustomWidgetDetailsModal extends React.Component<CustomWidgetDetail`
`148`	`148`	`containerClassName="admin-modal"`
`149`	`149`	`>`
`150`	`150`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`151`		`- <Text block nowrap className="admin-modal-header-text">Custom widget / { this.state.customWidget.displayName }</Text>`
	`151`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Custom widget / { this.state.customWidget.displayName }</Text>`
`152`	`152`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`153`	`153`	`{!this.state.isEdit &&`
`154`	`154`	`<PrimaryButton`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {`
`55`	`55`	`containerClassName="admin-modal"`
`56`	`56`	`>`
`57`	`57`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`58`		`- <Text className="admin-modal-header-text">Help and resources</Text>`
	`58`	`+ <Text as="h2" className="admin-modal-header-text">Help and resources</Text>`
`59`	`59`	`<DefaultButton text="Close" onClick={this.props.onDismiss} />`
`60`	`60`	`</Stack>`
`61`	`61`	`<div className="admin-modal-content">`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ export class ImageDetailsModal extends React.Component<ImageDetailsModalProps, I`
`145`	`145`	`containerClassName="admin-modal media-details-modal"`
`146`	`146`	`>`
`147`	`147`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`148`		`- <Text block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>`
	`148`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>`
`149`	`149`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`150`	`150`	`<PrimaryButton`
`151`	`151`	`text="Save"`
Original file line number	Diff line number	Diff line change
`@@ -258,7 +258,7 @@ export class MediaModal extends React.Component<MediaModalProps, MediaModalState`
`258`	`258`	`containerClassName="admin-modal media-modal"`
`259`	`259`	`>`
`260`	`260`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`261`		`- <Text className="admin-modal-header-text">Media</Text>`
	`261`	`+ <Text as="h2" className="admin-modal-header-text">Media</Text>`
`262`	`262`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`263`	`263`	`<DefaultButton text="Close" onClick={this.props.onDismiss} />`
`264`	`264`	`</Stack>`
Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ export class MediaSelectionItemModal extends React.Component<MediaSelectionItemM`
`136`	`136`	`containerClassName="admin-modal media-modal"`
`137`	`137`	`>`
`138`	`138`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`139`		`- <Text className="admin-modal-header-text">Media</Text>`
	`139`	`+ <Text as="h2" className="admin-modal-header-text">Media</Text>`
`140`	`140`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`141`	`141`	`<DefaultButton text="Close" onClick={this.props.onDismiss} />`
`142`	`142`	`</Stack>`
Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ export class NonImageDetailsModal extends React.Component<NonImageDetailsModalPr`
`122`	`122`	`containerClassName="admin-modal"`
`123`	`123`	`>`
`124`	`124`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`125`		`- <Text block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>`
	`125`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Media / { this.state.mediaItem.fileName }</Text>`
`126`	`126`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`127`	`127`	`<PrimaryButton`
`128`	`128`	`text="Save"`
Original file line number	Diff line number	Diff line change
`@@ -538,7 +538,7 @@ export class NavigationItemModal extends React.Component<NavigationItemModalProp`
`538`	`538`	`containerClassName="admin-modal"`
`539`	`539`	`>`
`540`	`540`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`541`		`- <Text className="admin-modal-header-text" block nowrap>Site menu item / { this.state.navItem.label }</Text>`
	`541`	`+ <Text as="h2" className="admin-modal-header-text" block nowrap>Site menu item / { this.state.navItem.label }</Text>`
`542`	`542`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`543`	`543`	`<PrimaryButton`
`544`	`544`	`text="Save"`
Original file line number	Diff line number	Diff line change
`@@ -169,7 +169,7 @@ export class PageDetailsModal extends React.Component<PageDetailsModalProps, Pag`
`169`	`169`	`containerClassName="admin-modal"`
`170`	`170`	`>`
`171`	`171`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`172`		`- <Text block nowrap className="admin-modal-header-text">Page / { this.state.page.title }</Text>`
	`172`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Page / { this.state.page.title }</Text>`
`173`	`173`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`174`	`174`	`<PrimaryButton`
`175`	`175`	`text="Save"`
Original file line number	Diff line number	Diff line change
`@@ -141,7 +141,7 @@ export class PageLayoutDetailsModal extends React.Component<PageLayoutModalProps`
`141`	`141`	`containerClassName="admin-modal"`
`142`	`142`	`>`
`143`	`143`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`144`		`- <Text block nowrap className="admin-modal-header-text">Layout / { this.state.layout.title }</Text>`
	`144`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Layout / { this.state.layout.title }</Text>`
`145`	`145`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`146`	`146`	`<PrimaryButton`
`147`	`147`	`text="Save"`
Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ export class PopupDetailsModal extends React.Component<PopupDetailsModalProps, P`
`119`	`119`	`containerClassName="admin-modal"`
`120`	`120`	`>`
`121`	`121`	`<Stack horizontal horizontalAlign="space-between" verticalAlign="center" className="admin-modal-header">`
`122`		`- <Text block nowrap className="admin-modal-header-text">Pop-up / { this.state.popup.title }</Text>`
	`122`	`+ <Text as="h2" block nowrap className="admin-modal-header-text">Pop-up / { this.state.popup.title }</Text>`
`123`	`123`	`<Stack horizontal tokens={{ childrenGap: 20 }}>`
`124`	`124`	`<PrimaryButton`
`125`	`125`	`text="Save"`