diff --git a/src/plugins/newsfeed/public/components/flyout_list.tsx b/src/plugins/newsfeed/public/components/flyout_list.tsx
index 6e9444c9501072..d4cdf72fee6135 100644
--- a/src/plugins/newsfeed/public/components/flyout_list.tsx
+++ b/src/plugins/newsfeed/public/components/flyout_list.tsx
@@ -30,6 +30,7 @@ import {
EuiText,
EuiBadge,
EuiHeaderAlert,
+ EuiPortal,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { NewsfeedContext } from './newsfeed_header_nav_button';
@@ -42,70 +43,75 @@ export const NewsfeedFlyout = () => {
const closeFlyout = useCallback(() => setFlyoutVisible(false), [setFlyoutVisible]);
return (
-
-
-
-
-
-
-
-
-
- {!newsFetchResult ? (
-
- ) : newsFetchResult.feedItems.length > 0 ? (
- newsFetchResult.feedItems.map((item: NewsfeedItem) => {
- return (
-
- {item.linkText}
-
- }
- date={item.publishOn.format('DD MMMM YYYY')}
- badge={item.badge ? {item.badge} : undefined}
+
+
+
+
+
+
- );
- })
- ) : (
-
- )}
-
-
-
-
-
-
-
-
-
- {newsFetchResult ? (
-
-
-
-
-
- ) : null}
-
-
-
-
+
+
+
+
+ {!newsFetchResult ? (
+
+ ) : newsFetchResult.feedItems.length > 0 ? (
+ newsFetchResult.feedItems.map((item: NewsfeedItem) => {
+ return (
+
+ {item.linkText}
+
+ }
+ date={item.publishOn.format('DD MMMM YYYY')}
+ badge={item.badge ? {item.badge} : undefined}
+ />
+ );
+ })
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {newsFetchResult ? (
+
+
+
+
+
+ ) : null}
+
+
+
+
+
);
};
diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
index 628cfde18b0d54..79245446400865 100644
--- a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
+++ b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
@@ -19,7 +19,8 @@
import React, { useState, Fragment, useEffect } from 'react';
import * as Rx from 'rxjs';
-import { EuiHeaderSectionItemButton, EuiIcon, EuiNotificationBadge } from '@elastic/eui';
+import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
import { NewsfeedFlyout } from './flyout_list';
import { FetchResult } from '../types';
@@ -65,15 +66,19 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
aria-controls="keyPadMenu"
aria-expanded={flyoutVisible}
aria-haspopup="true"
- aria-label="Newsfeed menu"
+ aria-label={
+ showBadge
+ ? i18n.translate('newsfeed.headerButton.unreadAriaLabel', {
+ defaultMessage: 'Newsfeed menu - unread items available',
+ })
+ : i18n.translate('newsfeed.headerButton.readAriaLabel', {
+ defaultMessage: 'Newsfeed menu - all items read',
+ })
+ }
+ notification={showBadge ? true : null}
onClick={showFlyout}
>
- {showBadge ? (
-
- ▪
-
- ) : null}
{flyoutVisible ? : null}
diff --git a/test/functional/page_objects/newsfeed_page.ts b/test/functional/page_objects/newsfeed_page.ts
index 52267138819abd..6e5e8015892955 100644
--- a/test/functional/page_objects/newsfeed_page.ts
+++ b/test/functional/page_objects/newsfeed_page.ts
@@ -21,6 +21,7 @@ import { FtrProviderContext } from '../ftr_provider_context';
export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProviderContext) {
const log = getService('log');
+ const find = getService('find');
const retry = getService('retry');
const flyout = getService('flyout');
const testSubjects = getService('testSubjects');
@@ -49,7 +50,7 @@ export function NewsfeedPageProvider({ getService, getPageObjects }: FtrProvider
}
async getRedButtonSign() {
- return await testSubjects.exists('showBadgeNews');
+ return await find.existsByCssSelector('.euiHeaderSectionItemButton__notification--dot');
}
async getNewsfeedList() {