Тост

Тосты — это легкие уведомления, имитирующие push-уведомления, популярные в мобильных и настольных операционных системах.

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

Обзор

Чтобы поощрять расширяемые и предсказуемые всплывающие уведомления, мы рекомендуем предоставить заголовок (название) и тело. Заголовки всплывающих сообщений используют стиль 'display: flex', что позволяет легко выравнивать содержимое благодаря служебным классам маржин и флексбокс Bootstrap.

Тосты также слегка полупрозрачны, поэтому они сливаются с тем, на чем могут появиться. Браузеры, поддерживающие CSS-свойство backdrop-filter, также пытаются размыть элементы всплывающего уведомления.

<template>
  <div class="p-3 bg-secondary progress-bar-striped" style="min-height: 170px;">
    <b-button class="mb-2" variant="primary" @click="$bvToast.show('example-toast')">
      Показать тост
    </b-button>
    <b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
      Привет, мир! Это тост-сообщение.
    </b-toast>
  </div>
</template>

<!-- toast-intro.vue -->

Примечание: мы используем свойство static в приведенном выше примере для рендеринга всплывающего уведомления на месте в документе, а не для его транспортировки в целевой контейнер <b-toaster>. И мы добавили классы bg-secondary и progress-bar-striped к внешнему <div> только для иллюстративных целей прозрачности тостов.

Функции всплывающих уведомлений и заметки

• Тосты могут генерироваться по запросу с помощью объекта внедрения this.$bvToast или создаваться вручную с помощью компонента <b-toast>.
• Заголовки необязательны, но должны быть включены, заголовки отображаются внутри элемента <strong>, если только не используется слот toast-title.
• Кнопку закрытия в правом верхнем углу всплывающего уведомления можно удалить с помощью параметра no-close-button.
• Отображается строка заголовка, если вы не укажете заголовок и не установите свойство no-close-button.
• Автоматическое скрытие происходит через 5000 мс, что можно изменить с помощью параметра auto-hide-delay или отключить с помощью параметра no-auto-hide.
• Когда автоматическое скрытие включено, пока вы наводите курсор на всплывающее уведомление, обратный отсчет автоматического скрытия будет приостановлен. Вы можете отключить эту функцию, установив для параметра no-hover-pause значение true.
• Если вы отключите функцию автоматического скрытия, не скрывайте кнопку закрытия, а если вы скрываете кнопку закрытия, обязательно разрешите автоматическое закрытие всплывающего уведомления. Обратитесь к разделу Советы по специальным возможностям ниже для получения важной информации об использовании.
• Прозрачность тостов можно отключить, установив для параметра solid значение true.
• Тосты будут отображаться внутри целевого компонента с именем <b-toaster>. BootstrapVue поставляется с несколькими предопределенными целями тостера. Тосты будут проверять наличие именованного тостера в документе, прежде чем они будут показаны, и динамически создавать именованный целевой тостер, если он не найден.
• Цели тостера полностью определены с помощью CSS для управления позиционированием содержащихся компонентов <b-toast>.
• Тосты могут быть нацелены на любой названный тостер.
• Тосты заключены в <div> с классом b-toast, чтобы обеспечить поддержку перехода списка Vue при отображении в компоненте тостера.

BootstrapVue использует PortalVue для переноса тостов в тостеры.

Тосты по требованию

Создавайте динамические всплывающие уведомления из любого места вашего приложения с помощью внедрения инстанса компонента Vue this.$bvToast без необходимости размещать в приложении компонент <b-toast>.

Используйте метод this.$bvToast.toast() для создания тостов по запросу. Метод принимает два аргумента:

• message: содержимое тела всплывающего уведомления (либо строка, либо массив VNodes). Обязательный. Тосты с пустым сообщением отображаться не будут. Смотрите раздел Расширенное использование для примера передачи массива VNodes в качестве сообщения.
• options: необязательный объект опций для предоставления заголовка и/или дополнительных опций конфигурации. Опция title может быть либо строкой, либо массивом VNodes

Аргумент options принимает большинство свойств, которые принимает компонент <b-toast> (за исключением static и visible) в формате имени camelCase вместо kebab-case.

<template>
  <div>
    <b-button @click="makeToast()">Показать тост</b-button>
    <b-button @click="makeToast(true)">Показать тост (добавленный)</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toastCount: 0
      }
    },
    methods: {
      makeToast(append = false) {
        this.toastCount++
        this.$bvToast.toast(`Это тост номер ${this.toastCount}`, {
          title: 'BootstrapVue Toast',
          autoHideDelay: 5000,
          appendToast: append
        })
      }
    }
  }
</script>

<!-- toasts-bv-toast-example.vue -->

Как только всплывающее уведомление, созданное с помощью this.$bvToast.toast(), будет скрыто, оно будет автоматически уничтожено и удалено из документа.

Примечания:

• Внедрение this.$bvToast доступно только при использовании полного плагина BootstrapVue или плагина ToastPlugin. Он недоступен при импорте только компонентов b-toast или b-toaster. Чтобы просто импортировать инъекцию $bvToast, используйте плагин BVToastPlugin.
• Новая инъекция $bvToast (примесь) создается для каждого экземпляра виртуальной машины Vue (т. е. каждого созданного компонента), и ее нельзя использовать через прямой доступ к Vue.prototype, так как ему нужен доступ к контекстам this и $root.
• Тосты, созданные с помощью this.$bvToast.toast(), являются дочерними элементами экземпляра Vue, вызывающего метод this.$bvToast.toast(), и будут скрыты и уничтожены, если этот экземпляр Vue (т.е. ваш компонент или приложение) также уничтожается. Если контекст vm находится внутри <router-view>, а $route изменяется, всплывающее уведомление также будет уничтожено (поскольку все дочерние элементы <router-view> уничтожаются. Чтобы сделать запрос по запросу тосты сохраняются при изменении маршрутизатора $route, вместо этого используйте this.$root.$bvToast.toast(), чтобы сделать родителем всплывающего уведомления корень вашего приложения.
• Тосты требуют сообщения. Тосты по запросу с пустым сообщением не будут отображаться.

Опции

Тосты имеют различные параметры, которые могут управлять их стилем и поведением. Параметры доступны как в качестве свойств компонента <b-toast>, так и в качестве свойств объекта параметров, переданного в this.$bvToast.toast(). При передаче опций в this.$bvToast.toast(), используйте camelCase версию имени свойства компонента, т.е. используйте noAutoHide вместо no-auto-hide.

Заголовок

Добавьте заголовок к вашему тосту с помощью опции title. Как и всплывающее сообщение message, заголовок может быть простой строкой или массивом VNodes. Смотрите раздел Расширенное использование для примера передачи массива VNodes в качестве сообщения и заголовка.

Прозрачность

Тосты по умолчанию имеют полупрозрачный фон. Чтобы отключить прозрачность по умолчанию, просто установите свойство solid в значение true, чтобы удалить альфа-канал из цвета фона.

Прозрачность также можно изменить с помощью пользовательской переменной SCSS BootstrapVue $b-toast-background-opacity при использовании файлов SCSS, а не файлов CSS. Смотрите справочный раздел Тематика.

Варианты

Тосты BootstrapVue предоставляют настраиваемый CSS для определения цветовых вариантов. Варианты следуют стандартным именам вариантов Bootstrap v4. Если у вас есть определенные в SCSS варианты цветовой темы Bootstrap, пользовательский SCSS всплывающих уведомлений автоматически создаст для вас варианты всплывающих уведомлений (смотрите справочный раздел Тематика).

<template>
  <div>
    <b-button @click="makeToast()" class="mb-2">По умолчанию</b-button>
    <b-button variant="primary" @click="makeToast('primary')" class="mb-2">Primary</b-button>
    <b-button variant="secondary" @click="makeToast('secondary')" class="mb-2">Secondary</b-button>
    <b-button variant="danger" @click="makeToast('danger')" class="mb-2">Danger</b-button>
    <b-button variant="warning" @click="makeToast('warning')" class="mb-2">Warning</b-button>
    <b-button variant="success" @click="makeToast('success')" class="mb-2">Success</b-button>
    <b-button variant="info" @click="makeToast('info')" class="mb-2">Info</b-button>
  </div>
</template>

<script>
  export default {
    methods: {
      makeToast(variant = null) {
        this.$bvToast.toast('Toast body content', {
          title: `Variant ${variant || 'default'}`,
          variant: variant,
          solid: true
        })
      }
    }
  }
</script>

<!-- toast-variants.vue -->

Цель тостера

BootstrapVue поставляется со следующими «встроенными» именами тостеров (и связанными стилями, определенными в SCSS):

• b-toaster-top-right
• b-toaster-top-left
• b-toaster-top-center
• b-toaster-top-full
• b-toaster-bottom-right
• b-toaster-bottom-left
• b-toaster-bottom-center
• b-toaster-bottom-full

<template>
  <div>
    <b-button @click="toast('b-toaster-top-right')" class="mb-2">b-toaster-top-right</b-button>
    <b-button @click="toast('b-toaster-top-left')" class="mb-2">b-toaster-top-left</b-button>
    <b-button @click="toast('b-toaster-top-center')" class="mb-2">b-toaster-top-center</b-button>
    <b-button @click="toast('b-toaster-top-full')" class="mb-2">b-toaster-top-full</b-button>
    <b-button @click="toast('b-toaster-bottom-right', true)" class="mb-2">b-toaster-bottom-right</b-button>
    <b-button @click="toast('b-toaster-bottom-left', true)" class="mb-2">b-toaster-bottom-left</b-button>
    <b-button @click="toast('b-toaster-bottom-center', true)" class="mb-2">b-toaster-bottom-center</b-button>
    <b-button @click="toast('b-toaster-bottom-full', true)" class="mb-2">b-toaster-bottom-full</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      toast(toaster, append = false) {
        this.counter++
        this.$bvToast.toast(`Toast ${this.counter} body content`, {
          title: `Toaster ${toaster}`,
          toaster: toaster,
          solid: true,
          appendToast: append
        })
      }
    }
  }
</script>

<!-- toast-targets.vue -->

Примечания:

• Имена целей тостера, которые не были определены в CSS, будут отображаться в нижней части документа, сгруппированы и не позиционированы (добавлены к <body> внутри <b-toaster> с именем класса и идентификатором, установленными для тостера). имя цели). Единственный стиль по умолчанию, который будет иметь тостер, — это z-index равный 1100.
• Избегайте одновременного использования тостеров b-toaster-top-* или b-toaster-bottom-* вместе в вашем приложении, так как уведомления могут быть скрыты/перекрываться на маленьких экранах (например, xs).

Подготовка и добавление

Тосты по умолчанию добавляются в начало всплывающих уведомлений, отображаемых в указанном тостере, в порядке их создания. Чтобы добавить новые всплывающие уведомления в конец, установите для свойства append-toast значение true.

Авто-скрытие

Измените время задержки автоматического скрытия с помощью свойства auto-hide-delay (значение в миллисекундах), которое по умолчанию равно 5000 (минимальное значение 1000). Или полностью отключите функцию автоматического скрытия, установив для параметра no-auto-hide значение true.

Когда автоматическое скрытие включено, наведение курсора на всплывающее уведомление приостанавливает таймер автоматического скрытия. Когда вы уберете всплывающее уведомление, таймер автоматического скрытия будет возобновлен. Вы можете отключить эту функцию, установив для параметра no-hover-pause значение true.

Кнопка закрытия

По умолчанию у тостов есть кнопка закрытия, чтобы скрыть их при использовании. Установка свойства no-close-button в значение true предотвратит это и создаст всплывающее уведомление без кнопки закрытия по умолчанию.

По-прежнему можно создать пользовательскую кнопку закрытия для всплывающего уведомления, указав уникальный идентификатор и используя метод this.$bvToast.hide(id), чтобы скрыть конкретное всплывающее уведомление:

<template>
  <div>
    <b-button @click="showToast">Показать тост</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      showToast() {
        // Use a shorter name for `this.$createElement`
        const h = this.$createElement
        // Create a ID with a incremented count
        const id = `my-toast-${this.count++}`

        // Create the custom close button
        const $closeButton = h(
          'b-button',
          {
            on: { click: () => this.$bvToast.hide(id) }
          },
          'Close'
        )

        // Create the toast
        this.$bvToast.toast([$closeButton], {
          id: id,
          title: `Toast ${this.count}`,
          noCloseButton: true
        })
      }
    }
 }
</script>

<!-- toasts-advanced.vue -->

Роли тостов

Тосты отображаются с атрибутом role по умолчанию 'alert' и атрибутом aria-live со значением 'assertive'. Для тостов, предназначенных для случайного уведомления, установите свойство is-status на true, что изменит атрибуты role и aria-live на 'status' и 'polite' соответственно.

Для получения дополнительной информации смотрите раздел Специальные возможности ниже.

Ссылки

При желании можно преобразовать тело сообщения в ссылку (<a>) или <router-link> (или <nuxt-link>) с помощью свойств href и to соответственно. Если установлено, все тело всплывающего уведомления становится ссылкой.

<template>
  <div>
    <b-button @click="toast()">Тост с ссылкой</b-button>
  </div>
</template>

<script>
  export default {
    methods: {
      toast() {
        this.$bvToast.toast(`Тост со ссылкой действия`, {
          href: '#foo',
          title: 'Пример'
        })
      }
    }
  }
</script>

<!-- toast-link.vue -->

Компонент <b-toast>

Если у вас есть пользовательский компонент, который хотел бы отображать только одно уведомление за раз, используйте компонент <b-toast>. Компонент <b-toast> можно разместить в любом месте вашего пользовательского компонента или приложения, и он не отображает элемент (они отображают узел-заполнитель комментария, который не влияет на макет).

Тост можно сделать видимым с помощью v-model (который привязан к свойству visible), или показать с помощью методов экземпляра show() и hide() компонента, или с помощью this.$bvToast.show(id) и this.$bvToast.hide(id) (требуется, чтобы для компонента <b-toast> был установлен уникальный идентификатор).

Тосты по умолчанию будут помещаться в компонент b-toaster-top-right <b-toaster>. Тостер, указанный в свойстве toaster, будет создан по запросу, если он еще не существует в документе.

Вы можете принудительно отобразить <b-toast> в документе, установив свойство static в значение true. Вам по-прежнему нужно показывать и скрывать всплывающее уведомление, но оно не будет перенесено в компонент тостера.

<template>
  <div>
    <b-button @click="$bvToast.show('my-toast')">Показать тост</b-button>

    <b-toast id="my-toast" variant="warning" solid>
      <template #toast-title>
        <div class="d-flex flex-grow-1 align-items-baseline">
          <b-img blank blank-color="#ff5555" class="mr-2" width="12" height="12"></b-img>
          <strong class="mr-auto">Уведомление!</strong>
          <small class="text-muted mr-2">42 секунды назад</small>
        </div>
      </template>
      Это содержание тоста.
      Это кратко и по делу.
    </b-toast>
  </div>
</template>

<!-- toast-component.vue -->

Слоты

• toast-title: Контент для замены элемента заголовка по умолчанию.
• default: Содержимое тела всплывающего уведомления

Оба слота опционально имеют следующую область действия:

Слоты доступны только при использовании компонента <b-toast>.

Целевой компонент <b-toaster>

Компонент <b-toaster> предоставляет контейнер, в котором будут появляться всплывающие уведомления (Тостер). Для тостеров требуется уникальное имя, и тосты могут быть настроены так, чтобы они отображались в тостере с конкретным именем.

В большинстве случаев вам не нужно будет напрямую использовать этот компонент, так как <b-toast> автоматически вставит компонент <b-toaster> (добавленный к <body>) с запрошенным именем тостера, если таковой имеется. в документе не нашел. Но иногда вы можете захотеть явно разместить тостер в своем приложении.

name тостера становится идентификатором вставленного контейнера, а также будет использоваться в качестве имени класса в отображаемом контейнере тостера.

Позиционирование тостера и тостов внутри тостера полностью управляется классами CSS (в зависимости от названия тостера).

Следующие «встроенные» имена тостеров (и связанные стили) определены в пользовательском SCSS BootstrapVue:

• b-toaster-top-right
• b-toaster-top-left
• b-toaster-top-center
• b-toaster-top-full
• b-toaster-bottom-right
• b-toaster-bottom-left
• b-toaster-bottom-center
• b-toaster-bottom-full

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

<b-toast> по умолчанию использует тостер b-toaster-top-right.

Примечания:

• Если в документе уже существует <b-toaster> с таким именем (автоматически созданный <b-toast>, this.$bvToast.toast(), либо размещенный вручную), то <b-toaster> просто отобразит пустой элемент <div> и выдаст предупреждение консоли.
• При ручном размещении компонента <b-toaster> убедитесь, что он размещен последним элементом в нижней части корневого элемента вашего приложения, чтобы он был доступен для всех страниц вашего приложения.
• Уничтоженные тостеры будут автоматически воссозданы, если появится новый тост, предназначенный для имени тостера.
• В большинстве случаев вам не нужно вручную размещать/создавать компонент <b-toaster> в вашем приложении, поскольку при необходимости они будут автоматически генерироваться по запросу. Но если вам нужно переопределить какие-либо настройки тостера по умолчанию, убедитесь, что вы поместили тостер в свое приложение в место, которое не будет уничтожено из-за изменений в маршруте.

Расширенное использование

При использовании метода this.$bvToast.toast(...) для создания всплывающих уведомлений вы можете захотеть, чтобы содержание всплывающего уведомления было чем-то большим, чем просто строковое сообщение. Как упоминалось в разделе Всплывающие сообщения по запросу выше, вы можете передавать массивы VNodes в качестве сообщения и заголовка для более сложного контента.

Не забывайте, что содержание тостов должно быть простым и содержательным. Избегайте размещения интерактивных компонентов или элементов внутри всплывающих уведомлений, так как это может вызвать проблемы у пользователей вспомогательных технологий. Смотрите раздел Доступность ниже.

Ниже приведен пример использования метода Vue this.$createElement() для создания более сложного всплывающего содержимого:

<template>
  <div>
    <b-button @click="showToast">Показать тост с кастомным контентом</b-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      showToast() {
        // Use a shorter name for this.$createElement
        const h = this.$createElement
        // Increment the toast count
        this.count++
        // Create the message
        const vNodesMsg = h(
          'p',
          { class: ['text-center', 'mb-0'] },
          [
            h('b-spinner', { props: { type: 'grow', small: true } }),
            ' Flashy ',
            h('strong', 'toast'),
            ` message #${this.count} `,
            h('b-spinner', { props: { type: 'grow', small: true } })
          ]
        )
        // Create the title
        const vNodesTitle = h(
          'div',
          { class: ['d-flex', 'flex-grow-1', 'align-items-baseline', 'mr-2'] },
          [
            h('strong', { class: 'mr-2' }, 'The Title'),
            h('small', { class: 'ml-auto text-italics' }, '5 minutes ago')
          ]
        )
        // Pass the VNodes as an array for message and title
        this.$bvToast.toast([vNodesMsg], {
          title: [vNodesTitle],
          solid: true,
          variant: 'info'
        })
      }
    }
 }
</script>

<!-- toasts-advanced.vue -->

Оповещения против тостов

В некоторых случаях вам может понадобиться простое сообщение в стиле предупреждения (например, уведомления об использовании файлов cookie и т. д.). В этих случаях обычно лучше использовать оповещение о фиксированной позиции вместо всплывающего уведомления, применив несколько служебных классов Bootstrap и немного настраиваемого стиля для <b-alert>:

<template>
  <div>
    <b-button size="sm" @click="showBottom = !showBottom">
      Show Fixed bottom Alert
    </b-button>
    <b-alert
      v-model="showBottom"
      class="position-fixed fixed-bottom m-0 rounded-0"
      style="z-index: 2000;"
      variant="warning"
      dismissible
    >
      Fixed position (bottom) alert!
    </b-alert>

    <b-button size="sm" @click="showTop = !showTop">
      Show Fixed top Alert
    </b-button>
    <b-alert
      v-model="showTop"
      class="position-fixed fixed-top m-0 rounded-0"
      style="z-index: 2000;"
      variant="success"
      dismissible
    >
      Fixed position (top) alert!
    </b-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBottom: false,
      showTop: false
    }
  }
}
</script>

<!-- fixed-position-alerts.vue -->

Мы используем класс position-fixed, чтобы установить фиксированное позиционирование в окне просмотра пользователя, и либо класс fixed-bottom, либо fixed-top, чтобы поместить предупреждение внизу или вверху окна просмотра. Класс m-0 удаляет поля по умолчанию вокруг предупреждения, а rounded-0 удаляет закругленные углы по умолчанию. Мы также устанавливаем для z-index большое значение, чтобы предупреждение отображалось поверх любого другого контента на странице (по умолчанию для fixed-top и fixed-bottom - 1030). Возможно, вам придется настроить z-index для вашего конкретного макета.

Поскольку разметка предупреждения остается в DOM, где вы разместили компонентe <b-alert>, его последовательность вкладок (для доступа к кнопке закрытия) легко доступна для программ чтения с экрана и пользователей, использующих только клавиатуру.

Доступность

Тосты предназначены для того, чтобы небольшие помехи вашим посетителям или пользователям, поэтому, чтобы помочь тем, у кого есть программы для чтения с экрана и аналогичные вспомогательные технологии, всплывающие уведомления заключены в область aria-live. Изменения в активных регионах (такие как внедрение/обновление компонента всплывающего уведомления) автоматически объявляются программами чтения с экрана без необходимости перемещать фокус пользователя или иным образом прерывать его. Кроме того, параметр aria-atomic="true" автоматически устанавливается таким образом, чтобы вся всплывающая подсказка всегда объявлялась как единая (атомарная) единица, а не сообщалось об изменениях (что может привести к проблемам, если вы обновите только часть всплывающей подсказки). содержание всплывающего уведомления или отображение того же содержимого всплывающего уведомления в более поздний момент времени).

Если вам просто нужно, чтобы одно простое сообщение отображалось в нижней или верхней части окна пользователя, вместо этого используйте фиксированное положение <b-alert>.

Советы по доступности

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

• Если необходимая информация важна для процесса, т.е. для списка ошибок в форме используйте компонент <b-alert> вместо <b-toast>.
• <b-toast> по умолчанию устанавливает атрибуты role в 'alert' и aria-live в 'assertive'. Если это важное сообщение, такое как ошибка, этот параметр по умолчанию является подходящим, в противном случае установите свойство is-status в true, что изменит атрибуты role на 'status' и aria-live на 'polite'.
• Избегайте всплывающих всплывающих сообщений при загрузке страницы. Выполнение неожиданных действий при загрузке страницы очень сбивает с толку пользователей программ чтения с экрана. Если всплывающее уведомление необходимо при загрузке страницы или изменении маршрута, задержите отображение всплывающего уведомления на несколько секунд, чтобы средство чтения с экрана завершило объявление информации о текущей странице без прерывания всплывающего уведомления.
• При установке параметра no-auto-hide в значение true, у вас должна быть кнопка закрытия, чтобы пользователи могли отклонить всплывающее уведомление. Если вы также установили свойство no-close-button в значение true, вы должны предоставить свою собственную кнопку закрытия или отклонить всплывающее уведомление каким-либо другим способом. Тосты имеют индекс табуляции 0, так что они могут быть доступны пользователям, использующим только клавиатуру.
• Избегайте запуска большого количества всплывающих уведомлений в быстрой последовательности, так как программы чтения с экрана могут прервать чтение текущего всплывающего уведомления и объявить новое всплывающее сообщение, что приведет к пропуску контекста предыдущего всплывающего уведомления.
• Для всплывающих уведомлений с длинным текстовым содержимым установите для параметра auto-hide-delay большее время ожидания, чтобы у пользователей было время прочитать содержимое всплывающего уведомления. Среднестатистический человек читает около 200 слов в минуту, поэтому хорошее время для сохранения сообщения составляет 5 секунд плюс 300 дополнительных миллисекунд на слово. Самое короткое значение по умолчанию, которое следует использовать в качестве наилучшей практики, составляет 5 секунд (5000 мс). В дополнение к разумному тайм-ауту по умолчанию вы также можете позволить пользователю выбирать, как долго он хочет, чтобы тосты не спали. Большинство людей изначально понимают, быстро они или медленно читают. Наличие настройки профиля, которая является частью входа пользователя, позволит медленным читателям выбирать более длительное время, если сообщения уходят слишком быстро, а быстрым читателям выбирать короткое время, если сообщения остаются слишком долго.
• Для учета потери памяти и отвлечения внимания, а также проблем, связанных с инвалидностью, таких как СДВГ, рекомендуется создать место, где пользователи могут обращаться к списку прошлых всплывающих сообщений, которые были показаны. Желательно, чтобы этот список был сортируемым, по умолчанию в хронологическом порядке.

Поддержка программы чтения с экрана Internet Explorer

К сожалению, IE 11 при использовании с программами чтения с экрана NVDA или JAWS не будет правильно объявлять/озвучивать тосты, когда они появляются. Если у вас есть большая база незрячих пользователей, использующих IE 11, вы можете создать дополнительную область aria-live за пределами экрана только для браузеров IE 11 (создается при загрузке страницы), где размещаются копии текста всплывающего сообщения. динамически, в дополнение к отображению тостов.