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

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

В понедельник, 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> Просмотрите подробный список изменений для этого выпуска, чтобы точно понять, какой контент будет затронут.
• В редакторе тем портала в качестве «второстепенного цвета» выбран белый или очень светлый цвет: Второстепенный цвет используется для элементов навигации, которые будет трудно увидеть на белом фоне. Мы рекомендуем выбрать доступный дополнительный цвет, а затем при необходимости переопределить его с помощью специального scss в определенных ситуациях.
• Внутритекстовым ссылкам был присвоен стиль: стиль ссылок теперь стал более доступным. Посмотрите изменения ниже, чтобы понять, как они могут взаимодействовать с существующим стилем.
• Нижняя граница шириной 2 пикселя в области содержимого карточек домашнего просмотра была стилизована или скрыта с помощью переопределений CSS: эта граница была перемещена с <mat-card-content> на верхнюю границу на <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 обратного вызова был перенесен в новый раздел.
• Кнопка сохранения теперь использует стиль поднятой кнопки и основной цвет фона.
• Таблицы теперь заключены в <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 кратко описаны ниже.

• Боковая навигация:
  • Боковая навигация была полностью переписана с использованием компонентов 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 в вашем приложении .

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

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

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

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