scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-25 13:54:59 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

71
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) {
@ -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,35 +137,47 @@ 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 <li
className="link right messages" className="link right messages"
key="messages" key="messages"
> >
<a <a
href="/messages/" href="/messages/"
title={this.props.intl.formatMessage({id: 'general.messages'})} title={this.props.intl.formatMessage({
id: 'general.messages'
})}
> >
<span <span
className={classNames({ className={classNames({
'message-count': true, 'message-count': true,
'show': this.props.unreadMessageCount > 0 'show': this.props.unreadMessageCount > 0
})} })}
>{this.props.unreadMessageCount} </span> >
{this.props.unreadMessageCount}{' '}
</span>
<FormattedMessage id="general.messages" /> <FormattedMessage id="general.messages" />
</a> </a>
</li>, </li>,
@ -170,7 +187,9 @@ class Navigation extends React.Component {
> >
<a <a
href="/mystuff/" href="/mystuff/"
title={this.props.intl.formatMessage({id: 'general.myStuff'})} title={this.props.intl.formatMessage({
id: 'general.myStuff'
})}
> >
<FormattedMessage id="general.myStuff" /> <FormattedMessage id="general.myStuff" />
</a> </a>
@ -192,7 +211,8 @@ class Navigation extends React.Component {
onClose={this.props.handleCloseAccountNav} onClose={this.props.handleCloseAccountNav}
/> />
</li> </li>
] : [ ] :
[
<li <li
className="link right join" className="link right join"
key="join" key="join"
@ -219,16 +239,12 @@ class Navigation extends React.Component {
> >
<FormattedMessage id="general.signIn" /> <FormattedMessage id="general.signIn" />
</a> </a>
<LoginDropdown <LoginDropdown key="login-dropdown" />
key="login-dropdown"
/>
</li> </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,