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

Add "click to continue" reminder animation #405

Merged
merged 16 commits into from
Jul 15, 2024
Merged

Add "click to continue" reminder animation #405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cb697b1
Add bounce animation to bottom
bencodeorg Jun 27, 2024
701fd4c
No icon in info guide, make space for bounce animation
bencodeorg Jun 27, 2024
c293667
Show icon 2 seconds after guide finishes typing
bencodeorg Jul 9, 2024
b5912ee
Add svg click animation with fade
bencodeorg Jul 9, 2024
34ba4e1
Clean up
bencodeorg Jul 9, 2024
e86d74f
Add space for animation before it appears
bencodeorg Jul 9, 2024
1990c9d
Only for K5
bencodeorg Jul 9, 2024
9ce6d9a
Pull out hide logic
bencodeorg Jul 10, 2024
27e28b5
Potential updates to guide reminder
breville Jul 10, 2024
75ca618
Restore code
breville Jul 10, 2024
c1d7d57
Fix typo
breville Jul 11, 2024
73c19f0
Merge branch 'ben/guide-continue-icon-click' into ben/guide-continue-…
breville Jul 11, 2024
4e201a6
Remove duplicate field
breville Jul 11, 2024
12948de
Stub css and svg in tests
bencodeorg Jul 11, 2024
42fa549
Clean up
bencodeorg Jul 11, 2024
287e312
Merge pull request #404 from code-dot-org/ben/guide-continue-icon-cli…
bencodeorg Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"jsx"
],
"moduleNameMapper": {
".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif)$": "identity-obj-proxy",
".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif|svg|css)$": "identity-obj-proxy",
"^@ml(.*)$": "<rootDir>/src/$1",
"^@public(.*)$": "<rootDir>/public/$1"
},
Expand Down
3 changes: 3 additions & 0 deletions public/images/finger-click-icon-1.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions public/images/finger-click-icon-2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 9 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
button {
padding: 1.5% 3%;
}

#pondTextMarkdown p {
margin: 0
}
Expand Down Expand Up @@ -106,6 +106,14 @@
font-size: calc(18px * 1024 / 930);
}
}
@media screen and (min-width: 1422px) and (min-height: 830px) {
#container {
max-width: 1280px;
}
#container-react {
font-size: calc(18px * 1280 / 930);
}
}
</style>
</head>
<body>
Expand Down
46 changes: 35 additions & 11 deletions src/oceans/components/common/Guide.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import React from 'react'
import Radium from "radium";
import Typist from "react-typist";
import React from 'react';
import Radium from 'radium';
import Typist from 'react-typist';

import {getState, setState} from "@ml/oceans/state";
import guide from "@ml/oceans/models/guide";
import soundLibrary from "@ml/oceans/models/soundLibrary";
import styles from "@ml/oceans/styles";
import colors from "@ml/oceans/styles/colors";
import I18n from "@ml/oceans/i18n";
import {Button} from "@ml/oceans/components/common";
import arrowDownImage from "@public/images/arrow-down.png";
import '@ml/oceans/styles/fade.css';

import {getState, setState} from '@ml/oceans/state';
import guide from '@ml/oceans/models/guide';
import soundLibrary from '@ml/oceans/models/soundLibrary';
import styles from '@ml/oceans/styles';
import colors from '@ml/oceans/styles/colors';
import I18n from '@ml/oceans/i18n';
import {Button} from '@ml/oceans/components/common';
import arrowDownImage from '@public/images/arrow-down.png';
import fingerClickIcon1 from '@public/images/finger-click-icon-1.svg';
import fingerClickIcon2 from '@public/images/finger-click-icon-2.svg';

let UnwrappedGuide = class Guide extends React.Component {
onShowing() {
Expand Down Expand Up @@ -48,6 +52,12 @@ let UnwrappedGuide = class Guide extends React.Component {
setState({guideTypingTimer});
}

const renderClickToContinueReminder =
state.guides === 'K5' &&
state.guideShowing &&
!currentGuide.noDimBackground &&
currentGuide.style !== 'Info';

return (
<div>
{currentGuide && currentGuide.image && (
Expand Down Expand Up @@ -98,6 +108,20 @@ let UnwrappedGuide = class Guide extends React.Component {
{currentGuide.textFn(getState())}
</div>
</div>
{renderClickToContinueReminder && (
<div style={styles.guideClickToContinueReminderContainer}>
<img
src={fingerClickIcon1}
alt=""
style={styles.guideClickToContinueReminder1}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fill these out for accessibility?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh good q -- I had a (maybe not perfect) alt text in here at one point, did you intentionally remove @breville (possibly considered decorative?) Or is it that you can't actually dismiss these via keyboard currently 😬 , which might be the bigger accessibility issue?

Copy link
Contributor Author

@bencodeorg bencodeorg Jul 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also noticed that you can tab nav between the buttons in the progression, but there's no visual indicator of what has focus. I think it's a result of outline: none, which apparently isn't recommended:

Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

https://developer.mozilla.org/en-US/docs/Web/CSS/outline#accessibility_concerns

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I did make it blank intentionally in my branch, but meant to follow up. I'm curious to know when alternate text on this particular pair of images helps with accessibility. In other accessibility work I've done, I've focused on making sure the screenreader works when tab-navigating a UI, but it's a fairly limited experience.

It would be great to do a broader accessibility pass for the tutorial separately.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think given the current poor accessibility (ie, you can't actually "click to continue" with only a keyboard) treating these images as decorative (ie, alt="") is appropriate. If we make the tutorial keyboard nav friendly, then having actual alt text would make sense.

I'm taking a quick look at the broader accessibility issues while we're in here.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense! & doesn't need to block the PR by any means.

/>
<img
src={fingerClickIcon2}
alt=""
style={styles.guideClickToContinueReminder2}
/>
</div>
)}
{currentGuide.style === 'Info' && (
<Button style={styles.infoGuideButton} onClick={() => {}}>
{I18n.t('continue')}
Expand Down
17 changes: 17 additions & 0 deletions src/oceans/styles/fade.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes blink {
0%, 45% {
opacity: 0;
}
55%, 100% {
opacity: 1;
}
}
22 changes: 20 additions & 2 deletions src/oceans/styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import colors from "@ml/oceans/styles/colors";
import colors from '@ml/oceans/styles/colors';

const styles = {
body: {
Expand Down Expand Up @@ -507,6 +507,24 @@ const styles = {
padding: 20,
opacity: 0
},
guideClickToContinueReminderContainer: {
position: 'absolute',
right: '1%',
bottom: 0,
width: '5%',
minWidth: 25,
height: 15,
animation: '0.25s ease-in 4s 1 normal backwards running fadein'
},
guideClickToContinueReminder1: {
width: '100%',
position: 'absolute'
},
guideClickToContinueReminder2: {
animation: '1s linear 0.5s infinite normal none running blink',
width: '100%',
position: 'absolute'
},
guideBackground: {
backgroundColor: 'rgba(0,0,0,0.3)',
position: 'absolute',
Expand Down Expand Up @@ -589,4 +607,4 @@ const styles = {
}
};

export default styles
export default styles;
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const commonConfig = {
]
},
{
test: /\.(png|gif)$/,
test: /\.(png|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 8192,
Expand Down
Loading