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 . Для получения дополнительной информации см. раздел «Переопределение основных цветов для панелей навигации и заголовков страниц» .
• На страницах присутствуют элементы с фоном, который выходит за пределы окна браузера (за исключением полноэкранного фонового изображения): максимальная ширина содержимого страницы была ограничена для повышения адаптивности, что может ограничивать использование ранее полноэкранных панелей на пользовательских страницах. Для получения дополнительной информации об использовании новых настроек максимальной ширины см. раздел «Создание полноэкранной панели на странице портала» .
• Для изменения стилей текста были использованы CSS-селекторы, позволяющие изменять уровни заголовков HTML: изменился уровень заголовка, применяемый к определенному содержимому. Например: <H1> → <H2> Ознакомьтесь с подробным списком изменений в этом релизе, чтобы точно понять, какое содержимое затронуто.
• В редакторе тем портала в качестве «вторичного цвета» выбирается белый или очень светлый цвет: вторичный цвет используется для элементов навигации, которые будет трудно разглядеть на белом фоне. Мы рекомендуем выбрать доступный вторичный цвет, а затем при необходимости переопределить его с помощью пользовательских SCSS-стилей в конкретных ситуациях.
• Текстовые ссылки получили новое оформление: теперь ссылки стали более доступными. См. изменения ниже, чтобы понять, как они могут взаимодействовать с существующим оформлением.
• Нижний край (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> используется оболочка <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 в вашем приложении» .

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

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

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

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