20.07.27 - Apigee Edge integrated portal release notes

You're viewing Apigee Edge documentation.
Go to the Apigee X documentation. info

On Monday, July 27, we will begin releasing a new version of the Apigee Edge integrated portal.

New features and enhancements

This section describes the new features and enhancements in this release.

Accessibility and responsiveness improvements

The following lists the accessibility and responsiveness improvements that are implemented for this release.

• Keyboard navigation: It is now possible to navigate the header and footer navigation bars, SmartDocs side navigation, Apps list, App view, and API cards using the keyboard.
  
• Focus management: Navigating with the header navigation bar and SmartDocs side navigation move focus to the first <H1> on the page following a navigation action.
• Live regions: Changes to the list of APIs resulting from textual filtering are now reported to users utilizing a screen reader.
• Semantic usage of HTML headings: All text is now contained in semantically appropriate HTML tags. An appropriately hierarchical heading structure is now used throughout the portal.
• Singular usage of <H1>: Each page now has only a single <H1> so screen readers can easily identify the most informative description of the page's content.
• Stylistic capitalization: The use of all-caps as a visual accent is now applied exclusively with CSS rather than in the actual text.
• Logical ordering of the DOM: Action buttons on the Create and Edit App pages have been moved below the form elements in the DOM so they can be activated in logical order, at the completion of form interaction.
• Textual descriptions of visual elements: There is improved usage of labels, alt text, and button text all of which improve navigation with a screen reader.
• Color contrast: Color contrast has been increased to meet the WCAG AA contrast requirements in many places throughout the product. API titles in the APIs list have been moved below the image to avoid possible insufficient color contrast.
• Form validation: On the Create and Edit App pages, form submission buttons are no longer disabled and can be activated to validate the form. Validated form fields on the Create and Edit App pages now include textual descriptions of the validation error.
• Responsiveness: There is now a maximum width that applies to all pages except for SmartDocs. The SmartDocs navigation now functions on narrow phone-sized screens. The Create and Edit App pages are now more responsive to narrow screens.

DOM changes that may impact your portal

Especially consider if:

• The navigation bars (header and footer) and page headings have been styled (or hidden) with CSS overrides: There is now a maximum width for page content. To extend the navigation bars and page headers to the edge of the browser window, Apigee styled the :before pseudo element. For more information, see Overriding primary colors for navigation bars and page headers.
• There are page elements with backgrounds that extend to the edge of the browser window (other than the full-screen background image): The maximum width of page content has been limited to improve responsiveness, which may constrain any formerly full width panels within custom pages. For more information about using the new max-width settings, see Create a full-width panel in a portal page.
• Specific HTML heading levels have been targeted with CSS selectors to modify text styles: The heading level applied to certain content has changed. For example: <H1> → <H2> Review the detailed change list for this release to understand exactly what content is impacted.
• A white or a very light color is selected as the "secondary color" in the portal theme editor: The secondary color is used for navigation elements that will be hard to see against a white background. We recommend picking an accessible secondary color and then overriding it if necessary with custom scss in specific situations.
• In-text links have been styled:The styling of links is now more accessible. See changes below to understand how it may interact with your existing styling.
• The 2 px border-bottom on the content area of home view cards has been styled or hidden with CSS overrides: This border has been moved from <mat-card-content> to a border-top on <mat-card-actions>.

Summary of detailed changes

The following sections summarize the detailed changes that have been implemented in this release, by category.

Portal-wide changes

The portal-wide changes are summarized below.

• The following variables are no longer in use:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• There are new variables that provide control over the max-width for the main content area and the minimum horizontal padding for the main content area:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Primary navigation bar changes

Changes to the primary navigation bar are summarized below.

• The logo <img> is now wrapped in an <a> for both desktop and mobile screen sizes
• The user drop-down button is now a <button> instead of an <a>

Link style changes

Standard links <a> within text now have an underline by default and a background color (based on the theme settings "secondary color") on hover

404 page changes

Changes to the 404 page are summarized below.

• "Sign in now" is now <H2> instead of <H1>
• Explanation text is now <H2> instead of <H1>

APIs page

Changes to the APIs page are summarized below, by category.

• API search/filter input card:
  • <mat-card-content class="mat-card-content"> now wraps the search APIs card heading and input
  • The <H2> now uses class="mat-subheading-1" instead of class="api-doc-filter-title"
  • The<mat-form-field> now uses appearance="outline"
  • A search icon has been added to the <mat-form-field> before the input: "<mat-icon matPrefix>search</mat-icon>"
  • Aria labels and control references have been added to the input
• Empty API list message:
  • "No APIs found" is now <H2> instead of <H1>
  • The explanation is now <H3> instead of <H2>
• API cards list:

  "No APIs match your search" is now <H2> instead of <H1>

• API cards:
  • >div class="api-doc-card-content-image-gradient"></div> has been removed
  • The API title has been moved out of the image containing <div> and into <div class="api-doc-card-content-title"></div> immediately following the image <div>
  • API title are now <H2> instead of <H1>

Apps List:

• Empty state:
  • "Get Started" is now <H2> instead of <H1>
  • Empty state guidance is now <H3> instead of <H2>
• List:
  • "My Apps" is now <H2> instead of <H1>
  • <mat-row> is now warped in an <a>

Create and Edit App pages

Changes to the Create and Edit App pages are summarized below.

• <div class="app-buttons"> has been moved to the end of the <form> and replaced by <div class="form-buttons-sticky-container">
• All usage of the class .app-layout-section changed to .details-layout-section
• All usage of the class .app-layout-section-title changed to .details-layout-section-title
• All section headings are now <H2> instead of <div>
• All usage of the class .app-layout-section-content changed to .details-layout-section-content
• The list of APIs is no longer a list of API cards with toggle switches (similar to the APIs list). Instead, it is a table of APIs
• The Callback URL input has been moved into a new section
• The save button now uses the mat-raised-button style and the primary color background
• Tables are now wrapped in a <div> with class .app-table-wrapper
• Table headers now use the <thead> wrapper
• Table bodys now use the <tbody> wrapper
• [style.width] is no longer used to set table column widths
• All <a> tags within the table now use <button instead

Teams list

Changes to the Team list are summarized below.

• Empty state:
  • "Get started" is now <H2> instead of <H1>
  • "Create a team to manage shared app ownership" is now <H3> instead of <H2>
• List:

  "Teams" title is now <H2> instead of <H1>

Create and Edit Team pages

Changes to the Create and Edit Team pages are summarized below.

• On the <form> the class .teams-form has been replaced by .details-form
• <div class="teams-buttons"> has been moved to the end of the <form> and replaced by <div class="form-buttons-sticky-container">
• All usage of the class .teams-layout-section changed to .details-layout-section
• All usage of the class .teams-layout-section-title changed to .details-layout-section-title
• All usage of the class .teams-layout-section-content changed to .details-layout-section-content
• <div class="team-apps-container"> was added surrounding <table class="team-apps">

SmartDocs

Changes to the SmartDocs interface are summarized below.

• Side navigation:
  • The side navigation has been completely rewritten with angular-material components
  • Side navigation headings are now <H2> instead of <div>
  • Navigation items now use the portal's default text color instead of the portal theme editor "secondary color"
  • Selected, focused, and hovered items in the side navigation now use dark and light variations of the portal theme editor "secondary color" for the text and background respectively
• Content:
  • Many subheadings such as "Path Parameters" and "Header Parameters" are now <H2> instead of <H3>
  • Schema entities on the overview page are now <H3>=> instead of <H2>

Adding accessibility improvements to an existing home page

If you have an exiting portal, you'll need to edit the home page to take advantage of new accessibility improvements for navigable cards, as described below:

1. Remove href="" from the <mat-card> container.
2. Use <H2> instead of <H1> for the card heading within <mat-card-header>.
3. Inside the card heading <h2> wrap the text in an <a class="navigable-content" href="href-name"> and set the href-name to the appropriate value for the card's navigation.

Alternatively, you can use the following card template:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Overriding primary colors for navigation bars and page headers

To extend the navigation bars and page headers to the edge of the browser window, add custom styling for the navigation bars and page headers using the advanced theme editor, similar to the following for the header navigation bar:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

Updating procedure for managing APIs for an app

The user interaction to manage the APIs in an app on the integrated portal has changed. Specifically, when managing an app, in the APIs section users must click or (instead of a toggle) to enable or disable access, respectively, to an API from the app.

Update any procedures on your portal that describe how to manage APIs on the apps page, if applicable. For more information, see Managing the APIs in your app.

Bugs fixed

The following bugs are fixed in this release. This list is primarily for users checking to see if their support tickets have been fixed. It's not designed to provide detailed information for all users.

Known issues

For a list of known issues with the integrated portal, see Known issues with the integrated portal.