[15 min fix] Add aria-current attribute to current dashboard link (#14128)
* add aria-current attribute to current dashboard link * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * Update app/views/dashboards/_actions.html.erb Co-authored-by: rhymes <github@rhymes.dev> * stub network request * fix typo in stub * always guard against lack of entries Co-authored-by: rhymes <github@rhymes.dev>
This commit is contained in:
Suzanne Aitchison
GitHub
parent
c8a63fa00f
commit
16cec7d93d
3 changed files with 160 additions and 10 deletions
|
|
@ -43,7 +43,7 @@ function fetchNext(el, endpoint, insertCallback) {
|
|||
}
|
||||
|
||||
function insertNext(params, buildCallback) {
|
||||
return function insertEntries(entries) {
|
||||
return function insertEntries(entries = []) {
|
||||
var list = document.getElementById(params.listId || 'sublist');
|
||||
var newFollowersHTML = '';
|
||||
entries.forEach(function insertAnEntry(entry) {
|
||||
|
|
@ -57,7 +57,9 @@ function insertNext(params, buildCallback) {
|
|||
});
|
||||
|
||||
var followList = document.getElementById('following-wrapper');
|
||||
followList.insertAdjacentHTML('beforeend', newFollowersHTML);
|
||||
if (followList) {
|
||||
followList.insertAdjacentHTML('beforeend', newFollowersHTML);
|
||||
}
|
||||
if (nextPage > 0) {
|
||||
fetching = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,49 @@
|
|||
<nav class="hidden m:block">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>" href="/dashboard">
|
||||
<nav class="hidden m:block" aria-label="Dashboards">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>"
|
||||
href="<%= dashboard_path %>"
|
||||
<%= params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Posts
|
||||
<span class="crayons-indicator"><%= @user.articles_count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) %>" href="/<%= current_user.username %>/series">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) %>"
|
||||
href="<%= user_series_path(current_user.username) %>"
|
||||
<%= params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Series
|
||||
<span class="crayons-indicator"><%= @user.collections.count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "followers" %>" href="/dashboard/user_followers">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "followers" %>"
|
||||
href="/dashboard/user_followers"
|
||||
<%= params[:action] == "followers" ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Followers
|
||||
<span class="crayons-indicator"><%= @user.followers_count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_tags" %>" href="/dashboard/following_tags">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_tags" %>"
|
||||
href="<%= dashboard_following_tags_path %>"
|
||||
<%= params[:action] == "following_tags" ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Following tags
|
||||
<span class="crayons-indicator"><%= @user.following_tags_count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_users" %>" href="/dashboard/following_users">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_users" %>"
|
||||
href="<%= dashboard_following_users_path %>"
|
||||
<%= params[:action] == "following_users" ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Following users
|
||||
<span class="crayons-indicator"><%= @user.following_users_count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_organizations" %>" href="/dashboard/following_organizations">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_organizations" %>"
|
||||
href="<%= dashboard_following_organizations_path %>"
|
||||
<%= params[:action] == "following_organizations" ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Following organizations
|
||||
<span class="crayons-indicator"><%= @user.following_organizations_count %></span>
|
||||
</a>
|
||||
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_podcasts" %>" href="/dashboard/following_podcasts">
|
||||
<a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_podcasts" %>"
|
||||
href="<%= dashboard_following_podcasts_path %>"
|
||||
<%= params[:action] == "following_podcasts" ? ' aria-current="page"'.html_safe : "" %>>
|
||||
Following podcasts
|
||||
<span class="crayons-indicator"><%= @user.following_podcasts_count %></span>
|
||||
</a>
|
||||
|
|
|
|||
134
cypress/integration/dashboardFlows/dashboardNavigation.spec.js
Normal file
134
cypress/integration/dashboardFlows/dashboardNavigation.spec.js
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
describe('Dashboard navigation', () => {
|
||||
beforeEach(() => {
|
||||
cy.testSetup();
|
||||
cy.fixture('users/articleEditorV1User.json').as('user');
|
||||
|
||||
cy.intercept('/api/followers/**', []);
|
||||
cy.intercept('/followings/**', []);
|
||||
|
||||
cy.get('@user').then((user) => {
|
||||
cy.loginAndVisit(user, '/dashboard');
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Posts dashboard', () => {
|
||||
cy.findByRole('heading', { name: 'Posts' });
|
||||
cy.findByRole('navigation').within(() => {
|
||||
cy.findByRole('link', { name: /Posts/ }).should(
|
||||
'have.attr',
|
||||
'aria-current',
|
||||
'page',
|
||||
);
|
||||
|
||||
const otherLinks = [
|
||||
/Series/,
|
||||
/Followers/,
|
||||
/Following tags/,
|
||||
/Following users/,
|
||||
/Following organizations/,
|
||||
/Following podcasts/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Series dashboard', () => {
|
||||
cy.findByRole('link', { name: /Series/ }).click();
|
||||
|
||||
// The Series dashboard does not show the sidebar like the others
|
||||
cy.findByRole('heading', { name: "Article Editor v1 User's Series" });
|
||||
});
|
||||
|
||||
it('Shows the Followers dashboard', () => {
|
||||
cy.findByRole('link', { name: /Followers/ }).click();
|
||||
cy.findByRole('heading', { name: 'Dashboard » Followers' });
|
||||
|
||||
cy.findByRole('navigation', { name: 'Dashboards' }).within(() => {
|
||||
cy.findByRole('link', { name: /Followers/ }).should(
|
||||
'have.attr',
|
||||
'aria-current',
|
||||
'page',
|
||||
);
|
||||
const otherLinks = [
|
||||
/Posts/,
|
||||
/Series/,
|
||||
/Following tags/,
|
||||
/Following users/,
|
||||
/Following organizations/,
|
||||
/Following podcasts/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Following tags dashboard', () => {
|
||||
cy.findByRole('link', { name: /Following tags/ }).click();
|
||||
cy.findByRole('heading', { name: 'Dashboard » Following tags' });
|
||||
const otherLinks = [
|
||||
/Posts/,
|
||||
/Series/,
|
||||
/Followers/,
|
||||
/Following users/,
|
||||
/Following organizations/,
|
||||
/Following podcasts/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Following users dashboard', () => {
|
||||
cy.findByRole('link', { name: /Following users/ }).click();
|
||||
cy.findByRole('heading', { name: 'Dashboard » Following users' });
|
||||
|
||||
const otherLinks = [
|
||||
/Posts/,
|
||||
/Series/,
|
||||
/Followers/,
|
||||
/Following tags/,
|
||||
/Following organizations/,
|
||||
/Following podcasts/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Following organizations dashboard', () => {
|
||||
cy.findByRole('link', { name: /Following organizations/ }).click();
|
||||
cy.findByRole('heading', { name: 'Dashboard » Following organizations' });
|
||||
|
||||
const otherLinks = [
|
||||
/Posts/,
|
||||
/Series/,
|
||||
/Followers/,
|
||||
/Following tags/,
|
||||
/Following users/,
|
||||
/Following podcasts/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
|
||||
it('Shows the Following podcasts dashboard', () => {
|
||||
cy.findByRole('link', { name: /Following podcasts/ }).click();
|
||||
cy.findByRole('heading', { name: 'Dashboard » Following podcasts' });
|
||||
|
||||
const otherLinks = [
|
||||
/Posts/,
|
||||
/Series/,
|
||||
/Followers/,
|
||||
/Following tags/,
|
||||
/Following users/,
|
||||
/Following organizations/,
|
||||
];
|
||||
otherLinks.forEach((name) => {
|
||||
cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue