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.

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

Add Editor component to the Mobile IDE View #1459

Merged
merged 10 commits into from
Jun 18, 2020

Conversation

ghalestrilo
Copy link
Collaborator

This PR mounts the <Editor /> component on the Mobile IDE View (/mobile), and places a button for exiting the mobile view.

Functionality is only partially implement, as expected: running the code will require a new overlay component.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
  • is descriptively named and links to an issue number, i.e. Fixes #123

<h2>{project.name}</h2>
<h3>{selectedFile.name}</h3>
</div>
<Icon href="/">
Copy link
Member

Choose a reason for hiding this comment

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

You should import CloseIcon from client/common/icons.jsx, and wrap it in a <Link> or <button> depending on what you want it to do. And then, because this icon has no text but performs an action, it should have the attribute aria-label="close header" (or whatever the alt text should be.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ok, will do that!

@ghalestrilo ghalestrilo requested a review from catarak June 16, 2020 19:54
@@ -92,18 +91,14 @@ const IDEViewMobile = (props) => {
return (
<Screen>
<Header>
<Link to="/" style={{ width: '3rem', marginRight: '1.25rem' }}>
Copy link
Member

Choose a reason for hiding this comment

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

Since we're using styled components, I think it makes sense to not use any inline CSS like this! You also shouldn't need aria-label or aria-hidden on the CloseIcon, as aria-label should be added to the <Link>, see https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Makes sense. Just updated this!

@ghalestrilo ghalestrilo requested a review from catarak June 18, 2020 17:22
@catarak catarak merged commit ca4502d into processing:develop Jun 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants