add i18n, fix flyout level

elastic · Sep 18, 2020 · cc5155b · cc5155b
1 parent f478f94
commit cc5155b
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 65 deletions.
diff --git 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 (
-    <EuiFlyout
-      onClose={closeFlyout}
-      size="s"
-      aria-labelledby="flyoutSmallTitle"
-      className="kbnNews__flyout"
-      data-test-subj="NewsfeedFlyout"
-    >
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="s">
-          <h2 id="flyoutSmallTitle">
-            <FormattedMessage
-              id="newsfeed.flyoutList.whatsNewTitle"
-              defaultMessage="What's new at Elastic"
-            />
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
-        {!newsFetchResult ? (
-          <NewsLoadingPrompt />
-        ) : newsFetchResult.feedItems.length > 0 ? (
-          newsFetchResult.feedItems.map((item: NewsfeedItem) => {
-            return (
-              <EuiHeaderAlert
-                key={item.hash}
-                title={item.title}
-                text={item.description}
-                data-test-subj="newsHeadAlert"
-                action={
-                  <EuiLink target="_blank" href={item.linkUrl} external>
-                    {item.linkText}
-                  </EuiLink>
-                }
-                date={item.publishOn.format('DD MMMM YYYY')}
-                badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
+    <EuiPortal>
+      <EuiFlyout
+        onClose={closeFlyout}
+        size="s"
+        aria-labelledby="flyoutSmallTitle"
+        className="kbnNews__flyout"
+        data-test-subj="NewsfeedFlyout"
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="s">
+            <h2 id="flyoutSmallTitle">
+              <FormattedMessage
+                id="newsfeed.flyoutList.whatsNewTitle"
+                defaultMessage="What's new at Elastic"
               />
-            );
-          })
-        ) : (
-          <NewsEmptyPrompt />
-        )}
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
-              <FormattedMessage id="newsfeed.flyoutList.closeButtonLabel" defaultMessage="Close" />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            {newsFetchResult ? (
-              <EuiText color="subdued" size="s">
-                <p>
-                  <FormattedMessage
-                    id="newsfeed.flyoutList.versionTextLabel"
-                    defaultMessage="{version}"
-                    values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
-                  />
-                </p>
-              </EuiText>
-            ) : null}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
+            </h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody className={'kbnNews__flyoutAlerts'}>
+          {!newsFetchResult ? (
+            <NewsLoadingPrompt />
+          ) : newsFetchResult.feedItems.length > 0 ? (
+            newsFetchResult.feedItems.map((item: NewsfeedItem) => {
+              return (
+                <EuiHeaderAlert
+                  key={item.hash}
+                  title={item.title}
+                  text={item.description}
+                  data-test-subj="newsHeadAlert"
+                  action={
+                    <EuiLink target="_blank" href={item.linkUrl} external>
+                      {item.linkText}
+                    </EuiLink>
+                  }
+                  date={item.publishOn.format('DD MMMM YYYY')}
+                  badge={item.badge ? <EuiBadge color="hollow">{item.badge}</EuiBadge> : undefined}
+                />
+              );
+            })
+          ) : (
+            <NewsEmptyPrompt />
+          )}
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+                <FormattedMessage
+                  id="newsfeed.flyoutList.closeButtonLabel"
+                  defaultMessage="Close"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {newsFetchResult ? (
+                <EuiText color="subdued" size="s">
+                  <p>
+                    <FormattedMessage
+                      id="newsfeed.flyoutList.versionTextLabel"
+                      defaultMessage="{version}"
+                      values={{ version: `Version ${newsFetchResult.kibanaVersion}` }}
+                    />
+                  </p>
+                </EuiText>
+              ) : null}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </EuiPortal>
   );
 };
diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
@@ -20,6 +20,7 @@
 import React, { useState, Fragment, useEffect } from 'react';
 import * as Rx from 'rxjs';
 import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { NewsfeedFlyout } from './flyout_list';
 import { FetchResult } from '../types';
 
@@ -65,7 +66,15 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
           aria-controls="keyPadMenu"
           aria-expanded={flyoutVisible}
           aria-haspopup="true"
-          aria-label="Newsfeed menu"
+          aria-label={
+            showBadge
+              ? i18n.translate('header.newsfeedButton.unreadAriaLabel', {
+                  defaultMessage: 'Newsfeed menu - unread items available',
+                })
+              : i18n.translate('header.newsfeedButton.readAriaLabel', {
+                  defaultMessage: 'Newsfeed menu - all items read',
+                })
+          }
           notification={showBadge ? true : null}
           onClick={showFlyout}
         >