Accessibility fixes

package.json

@@ -29,6 +29,7 @@
     },
     "devDependencies": {
         "@azure/storage-blob": "12.16.0",
+        "@playwright/test": "1.35.1",
         "@types/chai": "^4.3.6",
         "@types/google-maps": "^3.2.3",
         "@types/knockout": "^3.4.73",
@@ -52,6 +53,7 @@
         "mini-css-extract-plugin": "^2.7.6",
         "mocha": "^10.2.0",
         "path": "^0.12.7",
+        "playwright": "1.38.0",
         "postcss-loader": "^7.3.3",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.2",
@@ -66,23 +68,21 @@
         "webpack": "5.88.2",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.9.0",
-        "playwright": "1.38.0",
-        "@playwright/test": "1.35.1"
+        "webpack-merge": "5.9.0"
     },
     "dependencies": {
         "@azure/api-management-custom-widgets-scaffolder": "^1.0.0-beta.2",
         "@azure/api-management-custom-widgets-tools": "^1.0.0-beta.1",
         "@azure/msal-browser": "^2.37.1",
         "@braintree/sanitize-url": "6.0.4",
-        "@fluentui/font-icons-mdl2": "^8.5.9",	
+        "@fluentui/font-icons-mdl2": "^8.5.9",
         "@fluentui/react": "^8.105.11",
         "@microsoft/applicationinsights-web": "^3.0.2",
         "@monaco-editor/loader": "^1.3.3",
         "@paperbits/azure": "0.1.592",
         "@paperbits/common": "0.1.592",
         "@paperbits/core": "0.1.592",
-        "@paperbits/forms": "0.1.592",	
+        "@paperbits/forms": "0.1.592",
         "@paperbits/react": "1.0.7",
         "@paperbits/styles": "0.1.592",
         "@webcomponents/custom-elements": "1.6.0",
@@ -96,6 +96,7 @@
         "graphql": "^15.5.0",
         "graphql-config": "^4.0.1",
         "graphql-language-service": "3.1.6",
+        "html-truncate": "1.2.2",
         "idb-keyval": "^6.2.1",
         "js-beautify": "^1.14.9",
         "knockout": "^3.5.1",
@@ -107,12 +108,12 @@
         "moment": "^2.29.4",
         "monaco-editor": "^0.29.1",
         "msal": "^1.4.18",
-        "nuka-carousel": "^6.0.3",
+        "nuka-carousel": "^7.0.0",
         "prettier": "^2.8.8",
         "prismjs": "^1.29.0",
-        "react": "^18.2.0",	
-        "react-cropper": "^2.3.2",	
-        "react-dom": "^18.2.0",	
+        "react": "^18.2.0",
+        "react-cropper": "^2.3.2",
+        "react-dom": "^18.2.0",
         "react-toastify": "^9.1.3",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^5.0.1",
@@ -122,7 +123,6 @@
         "remark-parse": "^10.0.2",
         "remark-rehype": "^10.1.0",
         "saxen": "^8.1.2",
-        "topojson-client": "^3.1.0",
-        "html-truncate": "1.2.2"
+        "topojson-client": "^3.1.0"
     }
 }

src/admin/help/helpModal.tsx

@@ -12,7 +12,7 @@ interface HelpModalProps {
     onDismiss: () => void
 }
 
-const headerStyles = { root: { paddingTop: 15 } };
+const headerStyles = { root: { paddingTop: 15, margin: 0 } };
 
 export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
     @Resolve('policyService')
@@ -59,25 +59,25 @@ export class HelpModal extends React.Component<HelpModalProps, HelpModalState> {
                     <DefaultButton text="Close" onClick={this.props.onDismiss} />
                 </Stack>
                 <div className="admin-modal-content">
-                    <Text block variant="large" styles={headerStyles}>Getting started</Text>
+                    <Text as="h3" block variant="large" styles={headerStyles}>Getting started</Text>
                     <ul>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal" target="_blank">Overview</Link> of the developer portal.</Text></li>
                         <li><Text block><Link href="https://aka.ms/apimdocs/customizeportal" target="_blank">Access and customize the developer portal</Link> with a step-by-step tutorial.</Text></li>
                     </ul>
 
-                    <Text block variant="large" styles={headerStyles}>How-to</Text>
+                    <Text as="h3" block variant="large" styles={headerStyles}>How-to</Text>
                     <ul>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal/cors" target="_blank">Enable CORS</Link></Text></li>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portal/access" target="_blank">Secure access to the API Management developer portal</Link></Text></li>
                         <li><Text block><Link href="https://aka.ms/apimdocs/portalcustomization" target="_blank">Add custom features to the developer portal</Link></Text></li>
                     </ul>
 
-                    <Text block variant="large" styles={headerStyles}>Give feedback</Text>
+                    <Text as="h3" block variant="large" styles={headerStyles}>Give feedback</Text>
                     <ul>
                         <li><Text block>Read release notes, report issues, or request features in the <Link href="https://github.com/Azure/api-management-developer-portal/issues" target="_blank">GitHub repo</Link>.</Text></li>
                     </ul>
 
-                    <Text block variant="large" styles={headerStyles}>Support</Text>
+                    <Text as="h3" block variant="large" styles={headerStyles}>Support</Text>
                     <ul>
                         <li><Text block>For solutions and support, contact Azure support using the Azure portal interface of your API Management service under <b>Help &gt; Support + Troubleshooting</b> in the table of contents. </Text></li>
                     </ul>

src/admin/onboardingModal.tsx

@@ -49,7 +49,6 @@ export class OnboardingModal extends React.Component<OnboardingModalProps, Onboa
                     />
                     <Carousel
                         slideIndex={this.state.currentSlide}
-                        enableKeyboardControls
                         defaultControlsConfig={{ pagingDotsClassName: 'carousel-dot', pagingDotsContainerClassName: 'carousel-dots-container' }}
                         renderCenterLeftControls={(props: ControlProps) => this.renderPrevButton(props)}
                         renderCenterRightControls={(props: ControlProps) => this.renderNextButton(props)}
@@ -59,6 +58,7 @@ export class OnboardingModal extends React.Component<OnboardingModalProps, Onboa
                                 src="/assets/images/onboarding-1.png"
                                 imageFit={ImageFit.centerCover}
                                 styles={{ root: { height: 360 } }}
+                                alt="Introducing the improved developer portal and API and product details pages!"
                             />
                             <Stack className="carousel-text-container">
                                 <Text block className="carousel-header">Introducing the improved developer portal and API and product details pages!</Text>
@@ -70,6 +70,7 @@ export class OnboardingModal extends React.Component<OnboardingModalProps, Onboa
                                 src="/assets/images/onboarding-2.png"
                                 imageFit={ImageFit.centerCover}
                                 styles={{ root: { height: 360 } }}
+                                alt="A new look and greater efficiency"
                             />
                             <Stack className="carousel-text-container">
                                 <Text block className="carousel-header">A new look and greater efficiency</Text>
@@ -86,6 +87,7 @@ export class OnboardingModal extends React.Component<OnboardingModalProps, Onboa
                                 src="/assets/images/onboarding-3.png"
                                 imageFit={ImageFit.centerCover}
                                 styles={{ root: { height: 360 } }}
+                                alt="isplay custom documentation with new details pages"
                             />
                             <Stack className="carousel-text-container">
                                 <Text block className="carousel-header">Display custom documentation with new details pages</Text>
@@ -97,6 +99,7 @@ export class OnboardingModal extends React.Component<OnboardingModalProps, Onboa
                                 src="/assets/images/onboarding-4.png"
                                 imageFit={ImageFit.centerCover}
                                 styles={{ root: { height: 360 } }}
+                                alt="Access information and customer support"
                             />
                             <Stack className="carousel-text-container">
                                 <Text block className="carousel-header">Access information and customer support</Text>

src/admin/rightPanel.tsx

@@ -198,6 +198,7 @@ export class RightPanel extends React.Component<{}, RightPanelState> {
                 onChange={(event, option) => this.viewManager.setViewport(option.key.toString())}
                 styles={dropdownStyles}
                 className="top-panel-dropdown"
+                dropdownWidth={170}
             />
         </Stack>
     )
@@ -211,7 +212,7 @@ export class RightPanel extends React.Component<{}, RightPanelState> {
                     this.viewManager.setHost({ name: 'page-host' });
                 }}
                 disabled={!this.state.hasUnsavedChanges}
-                styles={{ root: { margin: '0 20px 0 10px', color: '#ffffff' }, rootDisabled: { backgroundColor: '#f3f2f1', color: '#a19f9d' } }}
+                styles={{ root: { margin: '0 20px 0 10px', backgroundColor: '#1e74bc', color: '#ffffff' }, rootDisabled: { backgroundColor: '#f3f2f1', color: '#a19f9d' } }}
             />
             <DefaultButton
                 text={this.state.hasUnsavedChanges ? 'Discard' : 'Close'}

src/admin/utils/components/labelWithInfo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DirectionalHint, Icon, Stack, Text, TooltipDelay, TooltipHost } from '@fluentui/react';
+import { DirectionalHint, IconButton, Stack, Text, TooltipDelay, TooltipHost } from '@fluentui/react';
 import { lightTheme } from '../themes';
 
 interface LabelWithInfoProps {
@@ -21,10 +21,10 @@ export class LabelWithInfo extends React.Component<LabelWithInfoProps, {}> {
                     delay={TooltipDelay.zero}
                     styles={{ root: { display: 'flex', marginLeft: 5 } }}
                 >
-                    <Icon
-                        iconName="Info"
-                        styles={{ root: { cursor: 'pointer' } }}
+                    <IconButton
+                        iconProps={{ iconName: 'Info' }}
                         aria-describedby={this.props.label}
+                        styles={{ root: { color: 'grey', width: 16, height: 16 }, icon: { fontSize: 14, height: 14 } }}
                     />
                 </TooltipHost>
             </Stack>

src/themes/designer/styles/admin.scss

@@ -247,7 +247,7 @@
         // Pagination
         div:nth-child(4) {
             align-items: unset !important;
-            top: 370px !important;
+            top: 383px !important;
         }
     }
 
@@ -288,14 +288,14 @@
         background: #949494 !important;
         margin: 0 2px;
 
+        &.active {
+            background-color: #0078D4 !important;
+        }
+
         svg {
             display: none;
         }
     }
-
-    .paging-item.active .carousel-dot {
-        background-color: #0078D4 !important;
-    }
 }
 
 .command-bar-button {

src/themes/designer/styles/scaffolding.scss

@@ -9,6 +9,10 @@ body {
 
 * {
     @include box-sizing(border-box);
+    //position: relative;
+}
+
+app * {
     position: relative;
 }