From c637d77882366f7b2d41a310be8c398a72fc0d12 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Tue, 17 Jan 2023 12:00:29 -0600
Subject: [PATCH] Added a11y specs for EuiNotificationEvent, EuiPageHeader,
 EuiPortal (#6524)

* Added a11y specs for EuiNotificationEvent, EuiPageHeader, EuiPortal

* Added a11y and keyboard specs for EuiNotificationEvent.
* Added page header a11y tests.
* Added a11y and keyboard specs for EuiPortal.

* Simplifying Portal test, adding breadcrumb and tabs to Page Header.

* Simplified two components, added a state check to EuiNotification.

* Further reducing the EuiPortal specs to test just that one component.
---
 .../notification/notification_event.a11y.tsx  | 110 ++++++++++++++++++
 .../page/page_header/page_header.a11y.tsx     |  37 ++++++
 src/components/portal/portal.a11y.tsx         |  63 ++++++++++
 3 files changed, 210 insertions(+)
 create mode 100644 src/components/notification/notification_event.a11y.tsx
 create mode 100644 src/components/page/page_header/page_header.a11y.tsx
 create mode 100644 src/components/portal/portal.a11y.tsx

diff --git a/src/components/notification/notification_event.a11y.tsx b/src/components/notification/notification_event.a11y.tsx
new file mode 100644
index 00000000000..b39c18d9b11
--- /dev/null
+++ b/src/components/notification/notification_event.a11y.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React, { useState } from 'react';
+import { EuiContextMenuItem } from '../context_menu';
+import { EuiNotificationEvent } from './notification_event';
+import { EuiPanel } from '../panel';
+
+const NotificationEvent = () => {
+  const [isRead, setIsRead] = useState(false);
+
+  const onRead = (id, isRead) => {
+    setIsRead(!isRead);
+  };
+
+  const onOpenContextMenu = (id) => {
+    return [
+      <EuiContextMenuItem
+        key="contextMenuItemA"
+        onClick={() => onRead(id, isRead)}
+      >
+        {isRead ? 'Mark as unread' : 'Mark as read'}
+      </EuiContextMenuItem>,
+
+      <EuiContextMenuItem key="contextMenuItemB" onClick={() => {}}>
+        View messages like this
+      </EuiContextMenuItem>,
+
+      <EuiContextMenuItem key="contextMenuItemC" onClick={() => {}}>
+        Don’t notify me about this
+      </EuiContextMenuItem>,
+    ];
+  };
+
+  return (
+    <EuiPanel paddingSize="none" hasShadow={true} style={{ maxWidth: '540px' }}>
+      <EuiNotificationEvent
+        id="cy-eui-notification-1"
+        type="Report"
+        iconType="logoKibana"
+        iconAriaLabel="Kibana"
+        time="1 min ago"
+        title="[Error Monitoring Report] is generated"
+        primaryAction="Download"
+        primaryActionProps={{
+          iconType: 'download',
+        }}
+        messages={['The reported was generated at 17:12:16 GMT+4']}
+        isRead={isRead}
+        onRead={onRead}
+        onOpenContextMenu={onOpenContextMenu}
+        onClickPrimaryAction={() => {}}
+        onClickTitle={() => {}}
+      />
+    </EuiPanel>
+  );
+};
+
+describe('EuiNotificationEvent', () => {
+  beforeEach(() => {
+    cy.viewport(1024, 768); // medium breakpoint
+    cy.realMount(<NotificationEvent />);
+    cy.get('article.euiNotificationEvent').should('exist');
+  });
+
+  describe('Automated accessibility check', () => {
+    it('has zero violations on first render', () => {
+      cy.checkAxe();
+    });
+
+    it('has zero violations when popover is open', () => {
+      cy.get(
+        'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]'
+      ).realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+
+    it('has zero violations after the Mark as read button is clicked', () => {
+      cy.get(
+        'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]'
+      ).realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('div.euiPopover__panel button').first().realClick();
+      cy.checkAxe();
+    });
+  });
+
+  describe('Keyboard accessibility', () => {
+    it('has zero violations when the popover is opened by keyboard', () => {
+      cy.repeatRealPress('Tab');
+      cy.get(
+        'button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]'
+      ).should('have.focus');
+      cy.realPress('Enter');
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});
diff --git a/src/components/page/page_header/page_header.a11y.tsx b/src/components/page/page_header/page_header.a11y.tsx
new file mode 100644
index 00000000000..320d9bcf4a0
--- /dev/null
+++ b/src/components/page/page_header/page_header.a11y.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../../cypress/support"/>
+
+import React from 'react';
+import { EuiButton } from '../../button';
+import { EuiPageHeader } from './page_header';
+
+describe('EuiPageHeader', () => {
+  beforeEach(() => {
+    cy.viewport(1024, 768); // medium breakpoint
+    cy.realMount(
+      <EuiPageHeader
+        pageTitle="Page title"
+        iconType="logoKibana"
+        description="This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content."
+        rightSideItems={[
+          <EuiButton fill>Add something</EuiButton>,
+          <EuiButton>Do something</EuiButton>,
+        ]}
+      />
+    );
+    cy.get('h1.euiTitle').should('exist');
+  });
+
+  describe('Automated accessibility check', () => {
+    it('has zero violations on first render', () => {
+      cy.checkAxe();
+    });
+  });
+});
diff --git a/src/components/portal/portal.a11y.tsx b/src/components/portal/portal.a11y.tsx
new file mode 100644
index 00000000000..99c22cc77b2
--- /dev/null
+++ b/src/components/portal/portal.a11y.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React, { useState } from 'react';
+import { EuiButton } from '../button';
+import { EuiPortal } from './portal';
+
+const Portal = () => {
+  const [isPortalVisible, setIsPortalVisible] = useState(false);
+
+  const togglePortal = () => {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  const closePortal = () => {
+    setIsPortalVisible(false);
+  };
+
+  let customPortal;
+
+  if (isPortalVisible) {
+    customPortal = (
+      <EuiPortal>
+        <div>This is the portal. Click anywhere to close.</div>
+        <EuiButton onClick={closePortal}>Close portal</EuiButton>
+      </EuiPortal>
+    );
+  }
+
+  return (
+    <div>
+      <EuiButton onClick={togglePortal}>View guide</EuiButton>
+      {customPortal}
+    </div>
+  );
+};
+
+describe('EuiPortal', () => {
+  beforeEach(() => {
+    cy.viewport(1024, 768); // medium breakpoint
+    cy.realMount(<Portal />);
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+
+  describe('Automated accessibility check', () => {
+    it('has zero violations on first render', () => {
+      cy.checkAxe();
+    });
+
+    it('has zero violations after the portal is activated', () => {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});