maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweaks to the admin flash messages flow (#16582)

Browse source 
* Focus flash message button on load

* update specs

* Update app/javascript/packs/admin/flashMessages.js

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

* Update app/javascript/packs/admin/flashMessages.js

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>

Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
This commit is contained in:
Suzanne Aitchison 2022-02-16 10:07:21 +00:00 • committed by GitHub
parent dc0693e0f4
commit 4d07a1ef7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/packs/admin/flashMessages.js Normal file
View file

@ -0,0 +1,6 @@
const [ firstFlashDismissBtn ] =
document.getElementsByClassName('js-flash-close-btn');
// This allows screen reader users to become aware of the message (as well as bringing focus to the top of the main content).
// (we don't use aria-live or role="alert" on the message text as these are not reliably announced for content that exists from page load)
firstFlashDismissBtn?.focus();

7
app/views/layouts/admin.html.erb
View file

@ -80,12 +80,13 @@
</nav>
</div>
<main id="main-content" class="crayons-layout__content min-w-0 p-2">
<% flash.each do |type, message| %>
<%= javascript_packs_with_chunks_tag "admin/flashMessages", defer: true %>
<% flash.each_with_index do |(type, message), i| %>
<div data-testid="flash-<%= type %>" class="alert alert-<%= type == "notice" || type == "success" ? "success" : "danger" %>">
<button class="close" data-dismiss="alert" aria-label="Close">
<span id="flash-<%= i %>"><%= message %></span>
<button class="close js-flash-close-btn" data-dismiss="alert" aria-label="Dismiss message" aria-describedby="flash-<%= i %>">
<%= crayons_icon_tag(:x, aria_hidden: true) %>
</button>
<%= message %>
</div>
<% end %>

10
cypress/integration/seededFlows/adminFlows/users/manageCredits.spec.js
View file

@ -6,9 +6,11 @@ function openCreditsModal() {
return cy.getModal();
}
function closeUserUpdatedMessage(message) {
function verifyAndDismissUserUpdatedMessage(message) {
cy.findByText(message).should('exist');
cy.findByRole('button', { name: 'Close' }).click();
cy.findByRole('button', { name: 'Dismiss message' })
.should('have.focus')
.click();
cy.findByText(message).should('not.exist');
}
@ -38,7 +40,7 @@ describe('Manage User Credits', () => {
});
cy.getModal().should('not.exist');
closeUserUpdatedMessage('Credits have been added!');
verifyAndDismissUserUpdatedMessage('Credits have been added!');
cy.findByTestId('user-credits').should('have.text', '210');
});
@ -57,7 +59,7 @@ describe('Manage User Credits', () => {
});
cy.getModal().should('not.exist');
closeUserUpdatedMessage('Credits have been removed.');
verifyAndDismissUserUpdatedMessage('Credits have been removed.');
cy.findByTestId('user-credits').should('have.text', '89');
});

30
cypress/integration/seededFlows/adminFlows/users/manageOrganizations.spec.js
View file

@ -6,9 +6,11 @@ function openOrgModal(ctaText = 'Add organization') {
return cy.getModal();
}
function closeUserUpdatedMessage(message) {
function verifyAndDismissUserUpdatedMessage(message) {
cy.findByText(message).should('exist');
cy.findByRole('button', { name: 'Close' }).click();
cy.findByRole('button', { name: 'Dismiss message' })
.should('have.focus')
.click();
cy.findByText(message).should('not.exist');
}
@ -34,7 +36,9 @@ describe('Manage User Organziations', () => {
cy.findByRole('button', { name: 'Add organization' }).click();
});
closeUserUpdatedMessage('User was successfully added to Bachmanity');
verifyAndDismissUserUpdatedMessage(
'User was successfully added to Bachmanity',
);
cy.getModal().should('not.exist');
// Focusing on the link is required to make buttons visible.
@ -60,14 +64,18 @@ describe('Manage User Organziations', () => {
cy.findByRole('button', { name: 'Add organization' }).click();
});
closeUserUpdatedMessage('User was successfully added to Bachmanity');
verifyAndDismissUserUpdatedMessage(
'User was successfully added to Bachmanity',
);
openOrgModal('Add another organization').within(() => {
cy.findByRole('spinbutton', { name: 'Organization ID' }).type(2);
cy.findByRole('button', { name: 'Add organization' }).click();
});
closeUserUpdatedMessage('User was successfully added to Awesome Org');
verifyAndDismissUserUpdatedMessage(
'User was successfully added to Awesome Org',
);
cy.getModal().should('not.exist');
// Focusing on the link is required to make buttons visible.
@ -103,7 +111,9 @@ describe('Manage User Organziations', () => {
cy.findByRole('button', { name: 'Update' }).click();
});
closeUserUpdatedMessage('User was successfully updated to admin');
verifyAndDismissUserUpdatedMessage(
'User was successfully updated to admin',
);
cy.getModal().should('not.exist');
});
@ -115,7 +125,9 @@ describe('Manage User Organziations', () => {
cy.findByRole('button', { name: 'Add organization' }).click();
});
closeUserUpdatedMessage('User was successfully added to Bachmanity');
verifyAndDismissUserUpdatedMessage(
'User was successfully added to Bachmanity',
);
cy.getModal().should('not.exist');
// Two links currently exist for every org (image and name)
@ -134,7 +146,9 @@ describe('Manage User Organziations', () => {
name: 'Revoke Awesome Org organization membership',
}).click();
closeUserUpdatedMessage('User was successfully removed from Awesome Org');
verifyAndDismissUserUpdatedMessage(
'User was successfully removed from Awesome Org',
);
});
});
});

12
cypress/integration/seededFlows/adminFlows/users/manageRoles.spec.js
View file

@ -6,9 +6,11 @@ function openRolesModal() {
return cy.getModal();
}
function closeUserUpdatedMessage() {
function verifyAndDismissUserUpdatedMessage() {
cy.findByText('User has been updated').should('exist');
cy.findByRole('button', { name: 'Close' }).click();
cy.findByRole('button', { name: 'Dismiss message' })
.should('have.focus')
.click();
cy.findByText('User has been updated').should('not.exist');
}
@ -44,7 +46,7 @@ describe('Manage User Roles', () => {
});
cy.getModal().should('not.exist');
closeUserUpdatedMessage();
verifyAndDismissUserUpdatedMessage();
cy.findByRole('button', { name: 'Remove role: Warned' }).should(
'exist',
@ -117,7 +119,7 @@ describe('Manage User Roles', () => {
});
cy.getModal().should('not.exist');
closeUserUpdatedMessage();
verifyAndDismissUserUpdatedMessage();
checkUserStatus('Warned');
cy.findByRole('button', { name: 'Remove role: Warned' }).should(
@ -131,7 +133,7 @@ describe('Manage User Roles', () => {
});
cy.getModal().should('not.exist');
closeUserUpdatedMessage();
verifyAndDismissUserUpdatedMessage();
checkUserStatus('Warned');
cy.findByRole('button', { name: 'Remove role: Warned' }).should(

16
cypress/integration/seededFlows/adminFlows/users/manageUserOptions.spec.js
View file

@ -11,7 +11,7 @@ function openUserOptions(callback) {
});
}
function closeUserUpdatedMessage(message) {
function verifyAndDismissUserUpdatedMessage(message) {
cy.findByTestId('flash-success')
.as('success')
.then((element) => {
@ -19,7 +19,9 @@ function closeUserUpdatedMessage(message) {
});
cy.get('@success').within(() => {
cy.findByRole('button', { name: 'Close' }).click();
cy.findByRole('button', { name: 'Dismiss message' })
.should('have.focus')
.click();
});
cy.findByTestId('flash-success').should('not.exist');
@ -39,7 +41,7 @@ describe('Manage User Options', () => {
openUserOptions(() => {
cy.findByRole('button', { name: 'Verify email address' }).click();
});
closeUserUpdatedMessage('Verification email sent!');
verifyAndDismissUserUpdatedMessage('Verification email sent!');
});
it(`should export a user's data to an admin`, () => {
@ -51,7 +53,7 @@ describe('Manage User Options', () => {
cy.findByRole('button', { name: 'Export to Admin' }).click();
});
closeUserUpdatedMessage(
verifyAndDismissUserUpdatedMessage(
'Data exported to the admin. The job will complete momentarily.',
);
});
@ -65,7 +67,7 @@ describe('Manage User Options', () => {
cy.findByRole('button', { name: 'Export to User' }).click();
});
closeUserUpdatedMessage(
verifyAndDismissUserUpdatedMessage(
'Data exported to the user. The job will complete momentarily.',
);
});
@ -90,7 +92,7 @@ describe('Manage User Options', () => {
cy.findByRole('button', { name: 'Banish User for spam' }).click();
});
closeUserUpdatedMessage(
verifyAndDismissUserUpdatedMessage(
'This user is being banished in the background. The job will complete soon.',
);
});
@ -106,7 +108,7 @@ describe('Manage User Options', () => {
}).click();
});
closeUserUpdatedMessage(
verifyAndDismissUserUpdatedMessage(
'@trusted_user_1 (email: trusted-user-1@forem.local, user_id: 2) has been fully deleted. If this is a GDPR delete, delete them from Mailchimp & Google Analytics and confirm on the page.',
);
});