Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[B] Add describedby text to user menu buttons #2027

Merged
merged 1 commit into from
Mar 15, 2019
Merged

[B] Add describedby text to user menu buttons #2027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 21 additions & 0 deletions client/src/global/components/UserMenuBody/__tests__/__snapshots__/UserMenuBody-test.js.snap
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@ exports[`Global.UserMenu.UserMenuBody Component renders correctly 1`] = `
<ul>
<li>
<button
aria-describedby="user-menu-edit-profile"
onClick={[Function]}
>
<i
Expand All @@ -18,9 +19,16 @@ exports[`Global.UserMenu.UserMenuBody Component renders correctly 1`] = `
/>
Edit Profile
</button>
<span
className="aria-describedby"
id="user-menu-edit-profile"
>
Edit your profile
</span>
</li>
<li>
<button
aria-describedby="user-menu-notifications"
onClick={[Function]}
>
<i
Expand All @@ -29,9 +37,16 @@ exports[`Global.UserMenu.UserMenuBody Component renders correctly 1`] = `
/>
Notifications
</button>
<span
className="aria-describedby"
id="user-menu-notifications"
>
Edit your notification settings
</span>
</li>
<li>
<button
aria-describedby="user-menu-logout"
onClick={[Function]}
>
<i
Expand All @@ -40,6 +55,12 @@ exports[`Global.UserMenu.UserMenuBody Component renders correctly 1`] = `
/>
Logout
</button>
<span
className="aria-describedby"
id="user-menu-logout"
>
Logout of Manifold
</span>
</li>
</ul>
</nav>
Expand Down
21 changes: 18 additions & 3 deletions client/src/global/components/UserMenuBody/index.js
View file
Open in desktop
Expand Up @@ -42,31 +42,46 @@ export class UserMenuBodyComponent extends Component {
<i className="tail" />
<ul>
<li>
<button onClick={this.handleProfileClick}>
<button
onClick={this.handleProfileClick}
aria-describedby="user-menu-edit-profile"
>
<i
className="manicon manicon-person-pencil-simple"
aria-hidden="true"
/>
{"Edit Profile"}
</button>
<span id="user-menu-edit-profile" className="aria-describedby">
Edit your profile
</span>
</li>
<li>
<button onClick={this.handleNotificationsClick}>
<button
onClick={this.handleNotificationsClick}
aria-describedby="user-menu-notifications"
>
<i
className="manicon manicon-envelope-circle-right"
aria-hidden="true"
/>
{"Notifications"}
</button>
<span id="user-menu-notifications" className="aria-describedby">
Edit your notification settings
</span>
</li>
<li>
<button onClick={this.logout}>
<button onClick={this.logout} aria-describedby="user-menu-logout">
<i
className="manicon manicon-circle-arrow-out-right"
aria-hidden="true"
/>
{"Logout"}
</button>
<span id="user-menu-logout" className="aria-describedby">
Logout of Manifold
</span>
</li>
</ul>
</nav>
Expand Down
60 changes: 55 additions & 5 deletions client/src/global/components/navigation/mobile-components/UserLinks.js
View file
Open in desktop
@@ -1,13 +1,15 @@
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import get from "lodash/get";
import lh from "helpers/linkHandler";
import Avatar from "global/components/avatar";

export default class UserLinks extends PureComponent {
static propTypes = {
authentication: PropTypes.object,
commonActions: PropTypes.object.isRequired,
backendButton: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
history: PropTypes.object.isRequired,
closeNavigation: PropTypes.func.isRequired
};

Expand All @@ -17,6 +19,12 @@ export default class UserLinks extends PureComponent {
this.props.closeNavigation();
};

handleNotificationsClick = event => {
event.preventDefault();
this.props.closeNavigation();
this.props.history.push(lh.link("subscriptions"));
};

handleLogOutClick = event => {
event.preventDefault();
this.props.commonActions.logout();
Expand All @@ -35,10 +43,16 @@ export default class UserLinks extends PureComponent {
<div className="user-links">
<ul>
<li>
<button onClick={this.handleLoginClick}>
<button
onClick={this.handleLoginClick}
aria-describedby="user-menu-login-mobile"
>
<Avatar />
{"Login"}
</button>
<span id="user-menu-login-mobile" className="aria-describedby">
Login to Manifold
</span>
</li>
</ul>
</div>
Expand All @@ -50,33 +64,69 @@ export default class UserLinks extends PureComponent {
<div className="user-links">
<ul>
<li>
<button onClick={this.handleProfileClick}>
<div
className="user-links__item"
aria-describedby="user-menu-avatar-mobile"
>
<Avatar
url={get(
this.props.authentication,
"currentUser.attributes.avatarStyles.smallSquare"
)}
/>
{currentUser.attributes.nickname}
</button>
</div>
</li>
<li>
<button onClick={this.handleProfileClick}>
<button
onClick={this.handleProfileClick}
aria-describedby="user-menu-edit-profile-mobile"
>
<i
className="manicon manicon-person-pencil-simple"
aria-hidden="true"
/>
{"Edit Profile"}
</button>
<span
id="user-menu-edit-profile-mobile"
className="aria-describedby"
>
Edit your profile
</span>
</li>
<li>
<button
onClick={this.handleNotificationsClick}
aria-describedby="user-menu-notifications-mobile"
>
<i
className="manicon manicon-envelope-circle-right"
aria-hidden="true"
/>
{"Notifications"}
</button>
<span
id="user-menu-notifications-mobile"
className="aria-describedby"
>
Edit your notification settings
</span>
</li>
<li>
<button onClick={this.handleLogOutClick}>
<button
onClick={this.handleLogOutClick}
aria-describedby="user-menu-logout-mobile"
>
<i
className="manicon manicon-circle-arrow-out-right-long"
aria-hidden="true"
/>
{"Logout"}
</button>
<span id="user-menu-logout-mobile" className="aria-describedby">
Logout of Manifold
</span>
</li>
<li>{this.props.backendButton}</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions client/src/theme/Components/global/_header-app.scss
View file
Open in desktop
Expand Up @@ -319,13 +319,13 @@
}

.search-menu, .user-menu {
top: calc(100% + 23px);
top: calc(100% + 22px);
opacity: 0;
transition: opacity $duration $timing, transform $duration $timing;
transform: translateY(-34px);

.header-tall & {
top: calc(100% + 34px);
top: calc(100% + 35px);
}
}

Expand Down
18 changes: 17 additions & 1 deletion client/src/theme/Components/global/_nested-nav.scss
View file
Open in desktop
Expand Up @@ -100,14 +100,20 @@
}
}

button {
button, &__item {
@include buttonUnstyled;
display: flex;
width: 100%;
padding-top: 0.588em;
padding-bottom: 0.588em;
}

&__item {
&:hover, .avatar:hover, *:hover {
cursor: default;
}
}

.avatar {
@include buttonAvatar(26);
margin-right: 17px;
Expand All @@ -122,6 +128,16 @@
height: 26px;
margin-right: 17px;

&.manicon-envelope-circle-right {
padding-left: 3px;
font-size: 15px;
line-height: 1.4;

@include respond($break40) {
font-size: 19px;
}
}

&.manicon-person {
position: static;
margin-right: 0;
Expand Down