Skip to content

Add <main> to default html #1476

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

Merged
merged 7 commits into from
Nov 3, 2021
Merged

Add <main> to default html #1476

merged 7 commits into from
Nov 3, 2021

Conversation

lm-n
Copy link
Member

@lm-n lm-n commented Jun 26, 2020

Following processing/p5.js#4644 we are updating the default html of empty examples to include <main>.

This is because the canvas is appended to the <main> element. We recently merged this change because the <main> element behaves like a main landmark role and can be used by assistive technology to quickly identify and navigate to the dominant part of the body. <main> doesn't contribute to the document's outline and doesn't affect the DOM's concept of the structure of the page. If <main> does not yet exist in the html, p5.js creates element <main> in <body> before appending canvas. This change in p5.js doesn't affect user input node cases.

In an effort to model best practices for default html we are changing default html in the website and thought changing it on the editor could also be a good idea.

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

@kjhollen

@catarak
Copy link
Member

catarak commented Jun 29, 2020

Awesome 😄 Maybe it makes sense to wait on this until by default the p5.js canvas is appended to <main>? Is it confusing that by merging in this PR, <main> is empty and then the canvas is appended after?

@catarak
Copy link
Member

catarak commented Nov 3, 2021

Sorry for losing track of this one! I guess I was waiting for the p5.js version that contained this fix to be released, but it definitely has, so now it is time to merge this.

@catarak
Copy link
Member

catarak commented Nov 3, 2021

I also added a <main> to the examples. After this is merged and deployed I can run the script in production to update all of the examples.

@catarak catarak merged commit 6976906 into processing:develop Nov 3, 2021
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.

2 participants