scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add aria-label to search icon

Browse source
This commit is contained in:
Paul Clue 2022-11-23 09:13:22 -05:00
parent 75de066dc6
commit a9941f8a49
1 changed files with 109 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

201
src/components/navigation/www/navigation.jsx
View file

@ -25,11 +25,7 @@ require('./navigation.scss');
class Navigation extends React.Component { class Navigation extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
bindAll(this, [ bindAll(this, ['getProfileUrl', 'handleSearchSubmit', 'pollForMessages']);
'getProfileUrl',
'handleSearchSubmit',
'pollForMessages'
]);
// Keep the timeout id so we can cancel it (e.g. when we unmount) // Keep the timeout id so we can cancel it (e.g. when we unmount)
this.messageCountTimeoutId = -1; this.messageCountTimeoutId = -1;
} }
@ -37,7 +33,10 @@ class Navigation extends React.Component {
if (this.props.user) { if (this.props.user) {
// Setup polling for messages to start in 2 minutes. // Setup polling for messages to start in 2 minutes.
const twoMinInMs = 2 * 60 * 1000; const twoMinInMs = 2 * 60 * 1000;
this.messageCountTimeoutId = setTimeout(this.pollForMessages.bind(this, twoMinInMs), twoMinInMs); this.messageCountTimeoutId = setTimeout(
this.pollForMessages.bind(this, twoMinInMs),
twoMinInMs
);
} }
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
@ -45,7 +44,10 @@ class Navigation extends React.Component {
this.props.handleCloseAccountNav(); this.props.handleCloseAccountNav();
if (this.props.user) { if (this.props.user) {
const twoMinInMs = 2 * 60 * 1000; const twoMinInMs = 2 * 60 * 1000;
this.messageCountTimeoutId = setTimeout(this.pollForMessages.bind(this, twoMinInMs), twoMinInMs); this.messageCountTimeoutId = setTimeout(
this.pollForMessages.bind(this, twoMinInMs),
twoMinInMs
);
} else { } else {
// Clear message count check, and set to default id. // Clear message count check, and set to default id.
if (this.messageCountTimeoutId !== -1) { if (this.messageCountTimeoutId !== -1) {
@ -57,7 +59,7 @@ class Navigation extends React.Component {
} }
} }
componentWillUnmount () { componentWillUnmount () {
// clear message interval if it exists // clear message interval if it exists
if (this.messageCountTimeoutId !== -1) { if (this.messageCountTimeoutId !== -1) {
clearTimeout(this.messageCountTimeoutId); clearTimeout(this.messageCountTimeoutId);
this.props.setMessageCount(0); this.props.setMessageCount(0);
@ -74,7 +76,8 @@ class Navigation extends React.Component {
// We only poll if it has been less than 32 minutes. // We only poll if it has been less than 32 minutes.
// Chances of someone actively using the page for that long without // Chances of someone actively using the page for that long without
// a navigation is low. // a navigation is low.
if (ms < 32 * 60 * 1000) { // 32 minutes if (ms < 32 * 60 * 1000) {
// 32 minutes
const nextFetch = ms * 2; // exponentially back off next fetch time. const nextFetch = ms * 2; // exponentially back off next fetch time.
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
this.pollForMessages(nextFetch); this.pollForMessages(nextFetch);
@ -93,7 +96,9 @@ class Navigation extends React.Component {
window.location.href = targetUrl; window.location.href = targetUrl;
} }
render () { render () {
const createLink = this.props.user ? '/projects/editor/' : '/projects/editor/?tutorial=getStarted'; const createLink = this.props.user ?
'/projects/editor/' :
'/projects/editor/?tutorial=getStarted';
return ( return (
<NavigationBox <NavigationBox
className={classNames({ className={classNames({
@ -132,103 +137,114 @@ class Navigation extends React.Component {
<li className="search"> <li className="search">
<Form onSubmit={this.handleSearchSubmit}> <Form onSubmit={this.handleSearchSubmit}>
<Button <Button
aria-label={this.props.intl.formatMessage({
id: 'general.search'
})}
className="btn-search" className="btn-search"
type="submit" type="submit"
/> />
<Input <Input
aria-label={this.props.intl.formatMessage({id: 'general.search'})} aria-label={this.props.intl.formatMessage({
id: 'general.search'
})}
className="search-wrapper" className="search-wrapper"
name="q" name="q"
placeholder={this.props.intl.formatMessage({id: 'general.search'})} placeholder={this.props.intl.formatMessage({
id: 'general.search'
})}
type="text" type="text"
value={this.props.searchTerm} value={this.props.searchTerm}
/> />
</Form> </Form>
</li> </li>
{this.props.session.status === sessionActions.Status.FETCHED ? ( {this.props.session.status === sessionActions.Status.FETCHED ?
this.props.user ? [ this.props.user ?
<li [
className="link right messages" <li
key="messages" className="link right messages"
> key="messages"
<a
href="/messages/"
title={this.props.intl.formatMessage({id: 'general.messages'})}
> >
<span <a
className={classNames({ href="/messages/"
'message-count': true, title={this.props.intl.formatMessage({
'show': this.props.unreadMessageCount > 0 id: 'general.messages'
})} })}
>{this.props.unreadMessageCount} </span> >
<FormattedMessage id="general.messages" /> <span
</a> className={classNames({
</li>, 'message-count': true,
<li 'show': this.props.unreadMessageCount > 0
className="link right mystuff" })}
key="mystuff" >
> {this.props.unreadMessageCount}{' '}
<a </span>
href="/mystuff/" <FormattedMessage id="general.messages" />
title={this.props.intl.formatMessage({id: 'general.myStuff'})} </a>
</li>,
<li
className="link right mystuff"
key="mystuff"
> >
<FormattedMessage id="general.myStuff" /> <a
</a> href="/mystuff/"
</li>, title={this.props.intl.formatMessage({
<li id: 'general.myStuff'
className="link right account-nav" })}
key="account-nav" >
> <FormattedMessage id="general.myStuff" />
<AccountNav </a>
classroomId={this.props.user.classroomId} </li>,
isEducator={this.props.permissions.educator} <li
isOpen={this.props.accountNavOpen} className="link right account-nav"
isStudent={this.props.permissions.student} key="account-nav"
profileUrl={this.getProfileUrl()} >
thumbnailUrl={this.props.user.thumbnailUrl} <AccountNav
username={this.props.user.username} classroomId={this.props.user.classroomId}
onClick={this.props.handleToggleAccountNav} isEducator={this.props.permissions.educator}
onClickLogout={this.props.handleLogOut} isOpen={this.props.accountNavOpen}
onClose={this.props.handleCloseAccountNav} isStudent={this.props.permissions.student}
/> profileUrl={this.getProfileUrl()}
</li> thumbnailUrl={this.props.user.thumbnailUrl}
] : [ username={this.props.user.username}
<li onClick={this.props.handleToggleAccountNav}
className="link right join" onClickLogout={this.props.handleLogOut}
key="join" onClose={this.props.handleCloseAccountNav}
> />
{/* there's no css class registrationLink -- this is </li>
] :
[
<li
className="link right join"
key="join"
>
{/* there's no css class registrationLink -- this is
just to make the link findable for testing */} just to make the link findable for testing */}
<a <a
className="registrationLink" className="registrationLink"
href="#" href="#"
onClick={this.props.handleClickRegistration} onClick={this.props.handleClickRegistration}
>
<FormattedMessage id="general.joinScratch" />
</a>
</li>,
<li
className="link right login-item"
key="login"
> >
<FormattedMessage id="general.joinScratch" /> <a
</a> className="ignore-react-onclickoutside"
</li>, href="#"
<li key="login-link"
className="link right login-item" onClick={this.props.handleToggleLoginOpen}
key="login" >
> <FormattedMessage id="general.signIn" />
<a </a>
className="ignore-react-onclickoutside" <LoginDropdown key="login-dropdown" />
href="#" </li>
key="login-link" ] :
onClick={this.props.handleToggleLoginOpen} []}
>
<FormattedMessage id="general.signIn" />
</a>
<LoginDropdown
key="login-dropdown"
/>
</li>
]) : []
}
{this.props.registrationOpen && !this.props.useScratch3Registration && ( {this.props.registrationOpen && !this.props.useScratch3Registration && (
<Registration <Registration key='registration' /> //eslint-disable-line
key="registration"
/>
)} )}
</ul> </ul>
<CanceledDeletionModal /> <CanceledDeletionModal />
@ -314,9 +330,8 @@ const mapDispatchToProps = dispatch => ({
}); });
// Allow incoming props to override redux-provided props. Used to mock in tests. // Allow incoming props to override redux-provided props. Used to mock in tests.
const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign( const mergeProps = (stateProps, dispatchProps, ownProps) =>
{}, stateProps, dispatchProps, ownProps Object.assign({}, stateProps, dispatchProps, ownProps);
);
const ConnectedNavigation = connect( const ConnectedNavigation = connect(
mapStateToProps, mapStateToProps,