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. + */ + +/// + +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 [ + onRead(id, isRead)} + > + {isRead ? 'Mark as unread' : 'Mark as read'} + , + + {}}> + View messages like this + , + + {}}> + Don’t notify me about this + , + ]; + }; + + return ( + + {}} + onClickTitle={() => {}} + /> + + ); +}; + +describe('EuiNotificationEvent', () => { + beforeEach(() => { + cy.viewport(1024, 768); // medium breakpoint + cy.realMount(); + 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. + */ + +/// + +import React from 'react'; +import { EuiButton } from '../../button'; +import { EuiPageHeader } from './page_header'; + +describe('EuiPageHeader', () => { + beforeEach(() => { + cy.viewport(1024, 768); // medium breakpoint + cy.realMount( + Add something, + Do something, + ]} + /> + ); + 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. + */ + +/// + +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 = ( + +
This is the portal. Click anywhere to close.
+ Close portal +
+ ); + } + + return ( +
+ View guide + {customPortal} +
+ ); +}; + +describe('EuiPortal', () => { + beforeEach(() => { + cy.viewport(1024, 768); // medium breakpoint + cy.realMount(); + 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(); + }); + }); +});