27.07.2020 – примечания к выпуску интегрированного портала 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.
• Поле "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 в приложении…

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

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

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

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