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

Provide valid and more semantic HTML with <audio> #1236

Merged
merged 2 commits into from Nov 18, 2018

Conversation

Projects
None yet
2 participants
@karlstolley
Copy link
Contributor

karlstolley commented Nov 18, 2018

The old example used <label>, which while permitted in this context, the
value of for must be a labelable form element. In HTML 5.2, that list
is at https://www.w3.org/TR/html/sec-forms.html#labelable-element (W3C)
https://html.spec.whatwg.org/multipage/forms.html#category-label (TLS).
Because <audio> is not in that list, the previous example triggered
validation errors with both the W3C and WHATWG validators.

I have rewritten the example with a more accessible, semantic solution
using the <figure> element. The accompanying <figcaption> serves a more
semantic role than <label> in this context.

I've also updated the CSS for example, although it is kind of
superfluous.

Provide valid and more semantic HTML with <audio>
The old example used <label>, which while permitted in this context, the
value of `for` must be a labelable form element. In HTML 5.2, that list
is at https://www.w3.org/TR/html/sec-forms.html#labelable-element (W3C)
https://html.spec.whatwg.org/multipage/forms.html#category-label (TLS).
Because <audio> is not in that list, the previous example triggered
validation errors with both the W3C and WHATWG validators.

I have rewritten the example with a more accessible, semantic solution
using the <figure> element. The accompanying <figcaption> serves a more
semantic role than <label> in this context.

I've also updated the CSS for example, although it is kind of
superfluous.
@welcome

This comment has been minimized.

Copy link

welcome bot commented Nov 18, 2018

💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line:

  • If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.
@wbamberg

This comment has been minimized.

Copy link
Member

wbamberg commented Nov 18, 2018

Thank you, this looks great (and thanks also for the nice PR description :).

Just one thing, do you think setting margin: 0 will make it look better in the output pane?

figure {
    margin: 0;
}

(I agree that the existing CSS is not needed).

@karlstolley

This comment has been minimized.

Copy link
Contributor

karlstolley commented Nov 18, 2018

@wbamberg absolutely. Let me make that fix and push again.

@wbamberg
Copy link
Member

wbamberg left a comment

Thanks for your contribution @karlstolley !

@wbamberg wbamberg merged commit 6662530 into mdn:master Nov 18, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
security/snyk - package.json (schalkneethling) No new issues
Details
@welcome

This comment has been minimized.

Copy link

welcome bot commented Nov 18, 2018

Congrats on merging your first pull request! 🎉🎉🎉

wbamberg added a commit to kevinsimper/interactive-examples that referenced this pull request Dec 1, 2018

Merge remote-tracking branch 'upstream/master' into patch-1
* upstream/master:
  Put prefixed sticky value before standard value (mdn#1249)
  Added grid-area label indicators to div content (mdn#1248)
  Update dependency mdn-bob to v1.1.20 (mdn#1241)
  Update dependency prettier to v1.15.2 (mdn#1234)
  Update dependency eslint to v5.9.0 (mdn#1233)
  Update dependency stylelint to v9.8.0 (mdn#1232)
  Update dependency npm-run-all to v4.1.5 (mdn#1239)
  Provide valid and more semantic HTML with <audio> (mdn#1236)
  remove Jenkinsfile code related to MozMEAO
  fix issues with the Jenkins build step
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment