20.07.27 - Примечания к выпуску интегрированного портала Apigee Edge

Вы просматриваете документацию Apigee Edge .
Перейти к документации Apigee X. info

В понедельник, 27 июля, мы начнем выпуск новой версии интегрированного портала Apigee Edge.

Новые функции и улучшения

В этом разделе описываются новые функции и улучшения в этой версии.

Улучшения доступности и отзывчивости

Ниже перечислены улучшения доступности и быстроты реагирования, реализованные в этом выпуске.

• Навигация с помощью клавиатуры: теперь можно перемещаться по панелям навигации верхнего и нижнего колонтитулов, боковой навигации SmartDocs, списку приложений, представлению приложений и карточкам API с помощью клавиатуры.
  
• Управление фокусом: навигация с помощью панели навигации заголовка и боковой панели навигации SmartDocs перемещает фокус на первый <H1> на странице после действия навигации.
• Динамические регионы: изменения в списке API, возникающие в результате текстовой фильтрации, теперь сообщаются пользователям, использующим программу чтения с экрана.
• Семантическое использование HTML-заголовков: весь текст теперь заключен в семантически корректные HTML-теги. На всем портале теперь используется соответствующая иерархическая структура заголовков.
• Единственное использование <H1> : теперь на каждой странице есть только один <H1> , поэтому программы чтения с экрана могут легко определить наиболее информативное описание содержимого страницы.
• Стилистическая заглавная буква: использование заглавных букв в качестве визуального акцента теперь применяется исключительно с помощью CSS, а не в самом тексте.
• Логическое упорядочение DOM: кнопки действий на страницах создания и редактирования приложения были перемещены под элементы формы в DOM, чтобы их можно было активировать в логическом порядке по завершении взаимодействия с формой.
• Текстовые описания визуальных элементов: улучшено использование меток, альтернативного текста и текста кнопок, что улучшает навигацию с помощью программы чтения с экрана.
• Цветовой контраст: цветовой контраст был увеличен для соответствия требованиям WCAG AA во многих местах продукта. Названия API в списке API перемещены под изображение, чтобы избежать возможного недостаточного цветового контраста.
• Проверка формы: на страницах создания и редактирования приложения кнопки отправки формы больше не отключены и могут быть активированы для проверки формы. Проверенные поля формы на страницах создания и редактирования приложения теперь включают текстовые описания ошибок проверки.
• Адаптивность: Теперь для всех страниц, кроме SmartDocs, установлено ограничение максимальной ширины. Навигация SmartDocs теперь работает на узких экранах смартфонов. Страницы создания и редактирования приложений теперь более адаптивны к узким экранам.

Изменения DOM, которые могут повлиять на ваш портал

Особенно стоит учитывать, если:

• Панели навигации (верхний и нижний колонтитулы) и заголовки страниц были стилизованы (или скрыты) с помощью переопределений CSS : теперь существует ограничение максимальной ширины содержимого страницы. Чтобы расширить панели навигации и заголовки страниц до края окна браузера, Apigee стилизовал псевдоэлемент :before . Подробнее см. в разделе Переопределение основных цветов для панелей навигации и заголовков страниц .
• На странице имеются элементы с фоном, доходящим до края окна браузера (за исключением полноэкранного фонового изображения): максимальная ширина содержимого страницы была ограничена для улучшения адаптивности, что может ограничивать возможности использования ранее полноэкранных панелей на пользовательских страницах. Подробнее об использовании новых настроек максимальной ширины см. в разделе Создание полноэкранной панели на странице портала .
• Определенные уровни заголовков HTML были выбраны с помощью селекторов CSS для изменения стилей текста: уровень заголовка, применяемый к определенному контенту, изменился. Например: <H1> → <H2> Ознакомьтесь с подробным списком изменений для этого выпуска, чтобы точно понять, какой контент затронут.
• В редакторе тем портала в качестве «дополнительного цвета» выбран белый или очень светлый цвет. Дополнительный цвет используется для элементов навигации, которые будут плохо видны на белом фоне. Мы рекомендуем выбрать доступный вторичный цвет и при необходимости переопределить его с помощью пользовательского скрипта в особых ситуациях.
• Ссылки внутри текста были оформлены: оформление ссылок теперь стало более доступным. Ознакомьтесь с изменениями ниже, чтобы понять, как оно может взаимодействовать с вашим текущим оформлением.
• Нижняя граница шириной 2 пикселя в области содержимого карточек главного экрана была стилизована или скрыта с помощью переопределений CSS: Эта граница была перемещена из <mat-card-content> в border-top в <mat-card-actions> .

Краткое изложение подробных изменений

В следующих разделах подробно описаны изменения, реализованные в этом выпуске, по категориям.

Изменения на уровне портала

Ниже приводится краткое описание изменений, произошедших на всем портале.

• Следующие переменные больше не используются:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Появились новые переменные, которые позволяют управлять максимальной шириной области основного содержимого и минимальным горизонтальным отступом для области основного содержимого:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Изменения в основной панели навигации

Изменения в основной панели навигации кратко описаны ниже.

• Логотип <img> теперь заключен в <a> для экранов как настольных компьютеров, так и мобильных устройств.
• Кнопка раскрывающегося списка пользователя теперь представляет собой <button> вместо <a>

Изменения стиля ссылок

Стандартные ссылки <a> в тексте теперь по умолчанию подчёркнуты и имеют цвет фона (основанный на настройках темы «вторичный цвет») при наведении курсора.

404 изменения страницы

Изменения на странице 404 кратко описаны ниже.

• «Войти сейчас» теперь <H2> вместо <H1>
• Текст пояснения теперь <H2> вместо <H1>

Страница API

Изменения на странице API перечислены ниже по категориям.

• Карточка ввода поиска/фильтра API:
  • <mat-card-content class="mat-card-content"> теперь оборачивает заголовок и входные данные карточки поискового API
  • <H2> теперь использует class="mat-subheading-1" вместо class="api-doc-filter-title"
  • <mat-form-field> теперь использует appearance="outline"
  • В поле <mat-form-field> перед полем ввода добавлен значок поиска: "<mat-icon matPrefix>search</mat-icon>"
  • К входным данным добавлены метки Aria и контрольные ссылки.
• Сообщение о пустом списке API:
  • «API не найдены» теперь <H2> вместо <H1>
  • Объяснение теперь <H3> вместо <H2>
• Список карт API:

  «Нет API, соответствующих вашему запросу» теперь <H2> вместо <H1>

• API-карты:
  • >div class="api-doc-card-content-image-gradient"></div> был удален
  • Заголовок API был перенесен из изображения, содержащего <div> , в <div class="api-doc-card-content-title"></div> непосредственно следующий за изображением <div>
  • Заголовок API теперь <H2> вместо <H1>

Список приложений:

• Пустое состояние:
  • «Начать» теперь <H2> вместо <H1>
  • Руководство по пустому состоянию теперь <H3> вместо <H2>
• Список:
  • «Мои приложения» теперь <H2> вместо <H1>
  • <mat-row> теперь деформирован в <a>

Создание и редактирование страниц приложений

Изменения на страницах создания и редактирования приложения описаны ниже.

• <div class="app-buttons"> был перемещен в конец <form> и заменен на <div class="form-buttons-sticky-container">
• Все использования класса .app-layout-section изменены на .details-layout-section
• Все использования класса .app-layout-section-title изменены на .details-layout-section-title
• Все заголовки разделов теперь <H2> вместо <div>
• Все использования класса .app-layout-section-content изменены на .details-layout-section-content
• Список API больше не представляет собой список карточек API с переключателями (аналогично списку API). Вместо этого он представляет собой таблицу API.
• Ввод URL обратного вызова перенесен в новый раздел.
• Кнопка «Сохранить» теперь использует стиль «mat-raised-button» и основной цвет фона.
• Таблицы теперь заключены в <div> с классом .app-table-wrapper
• Заголовки таблиц теперь используют оболочку <thead>
• Тела таблиц теперь используют оболочку <tbody>
• [style.width] больше не используется для установки ширины столбцов таблицы.
• Все теги <a> в таблице теперь используют вместо <button

Список команд

Изменения в списке команды приведены ниже.

• Пустое состояние:
  • «Начать» теперь <H2> вместо <H1>
  • «Создать команду для управления общим владением приложениями» теперь <H3> вместо <H2>
• Список:

  Заголовок «Команды» теперь <H2> вместо <H1>

Создание и редактирование страниц команды

Изменения на страницах создания и редактирования команды описаны ниже.

• В <form> класс .teams-form был заменен на .details-form
• <div class="teams-buttons"> был перемещен в конец <form> и заменен на <div class="form-buttons-sticky-container">
• Все использования класса .teams-layout-section изменены на .details-layout-section
• Все использования класса .teams-layout-section-title изменены на .details-layout-section-title
• Все использования класса .teams-layout-section-content изменены на .details-layout-section-content
• <div class="team-apps-container"> был добавлен вокруг <table class="team-apps">

SmartDocs

Изменения в интерфейсе SmartDocs кратко описаны ниже.

• Боковая навигация:
  • Боковая навигация полностью переписана с использованием компонентов Angular-Material.
  • Заголовки боковой навигации теперь <H2> вместо <div>
  • Элементы навигации теперь используют цвет текста портала по умолчанию вместо «вторичного цвета» редактора тем портала.
  • Выбранные, сфокусированные и наведенные курсором элементы боковой навигации теперь используют темные и светлые вариации «вторичного цвета» редактора тем портала для текста и фона соответственно.
• Содержание:
  • Многие подзаголовки, такие как «Параметры пути» и «Параметры заголовка», теперь имеют <H2> вместо <H3>
  • Сущности схемы на странице обзора теперь <H3>=> вместо <H2>

Добавление улучшений доступности на существующую домашнюю страницу

Если у вас есть существующий портал, вам необходимо отредактировать домашнюю страницу, чтобы воспользоваться новыми улучшениями доступности для навигационных карт, как описано ниже:

1. Удалите href="" из контейнера <mat-card> .
2. Используйте <H2> вместо <H1> для заголовка карточки внутри <mat-card-header> .
3. Внутри заголовка карточки <h2> заключите текст в тег <a class="navigable-content" href=" href-name "> и задайте для href-name соответствующее значение для навигации по карточке.

В качестве альтернативы вы можете использовать следующий шаблон карточки:

<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>

Переопределение основных цветов для панелей навигации и заголовков страниц

Чтобы расширить панели навигации и заголовки страниц до края окна браузера, добавьте пользовательские стили для панелей навигации и заголовков страниц с помощью расширенного редактора тем , аналогично следующему для панели навигации заголовка:

// 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
  }
}

Процедура обновления для управления API для приложения

Изменилось взаимодействие пользователя с API в приложении на интегрированном портале. В частности, при управлении приложением в разделе «API» необходимо нажать или (вместо переключателя) для включения или выключения доступа к API из приложения соответственно.

Обновите все процедуры на вашем портале, описывающие управление API на странице приложений, если применимо. Подробнее см. в разделе «Управление API в вашем приложении» .

Исправлены ошибки

В этом выпуске исправлены следующие ошибки. Этот список предназначен в первую очередь для пользователей, проверяющих, были ли исправлены их обращения в службу поддержки. Он не предназначен для предоставления подробной информации всем пользователям.

Известные проблемы

Список известных проблем с интегрированным порталом см. в разделе Известные проблемы с интегрированным порталом .