Mkdocs-material: HTML issue: attribute "autocomplete" not allowed on checkboxes

Created on 16 Mar 2020 · 9Comments · Source: squidfunk/mkdocs-material

__I checked that...__

[x] ... the documentation does not mention anything about my problem
[x] ... the problem doesn't occur with the default MkDocs template
[x] ... the problem is not in any of my customizations (CSS, JS, template)
[x] ... there are no open or closed issues that are related to my problem

Description

The template in MkDocs 5.0.0 RC 2 uses 2 checkboxes at the beginning of the body:

<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">

Expected behavior

No HTML issues found by the W3C validator.

Actual behavior

W3C validator complains that autocomplete="off" is not allowed for checkbox:

Error: Attribute autocomplete is only allowed when the input type is color, date, datetime-local, email, hidden, month, number, password, range, search, tel, text, time, url, or week.

Steps to reproduce the bug

Go to https://validator.nu/ and check a site using the template, or just this simple HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
</form>
</body>
</html>

Package versions

Python: 3.7.7
MkDocs: 1.1
Material: 5.0.0rc2

Project configuration

site_name: Rocket Validator Documentation
nav:
    - Home: index.md
    - API: api.md
theme:
  name: material
  language: en
  features:
    - instant
  logo: img/rocket-icon-300x300.png
extra:
  social:
    - icon: fontawesome/brands/github-alt
      link: https://github.com/rocketvalidator
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/rocketvalidator
    - icon: fontawesome/brands/linkedin
      link: https://pr.linkedin.com/company/rocket-validator
google_analytics:
  - UA-81204018-1
  - auto
markdown_extensions:
- admonition
- pymdownx.superfences
- codehilite:
    guess_lang: false
extra_css:
    - css/extra.css

System information

OS: macOS 10.15.3
Browser: Chrome 80

Source

jaimeiniesta

All 9 comments

Unless there's a reason for having those attributes, removing them will lead to better markup. I'll be happy to submit a PR for that if you think it's safe to remove them - I tried locally and everything seems to work fine without them.

jaimeiniesta on 16 Mar 2020

Additional documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete

This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.

jaimeiniesta on 16 Mar 2020

There is a reason. If you don't set this attribute, open the drawer on mobile and click on a link, then navigate back, the drawer will remain open. This behavior is really odd. It probably only happens on iOS Safari (i.e. webkit), which unfortunately has substantial market share among browsers.

squidfunk on 16 Mar 2020

👍1

Thanks for the explanation! Then I'll mute that on my report and keep that.

jaimeiniesta on 16 Mar 2020

Okay, great. Unfortunately, sometimes we have to break validation to ensure some browsers behave as they should.

squidfunk on 16 Mar 2020

No problem, I can mute the issues, I just wanted to check there was a reason for this.

Also, sometimes browsers are ahead of standards. The W3C validator also complains that autocorrect is not allowed on input - there is a valid attribute spellcheck but I suppose we want both.

In this case, I've seen that autocorrect is a Safari extension, so I guess we want to keep it.

jaimeiniesta on 16 Mar 2020

Correct, both are non-standard but necessary for Safari.

squidfunk on 16 Mar 2020

👍1

Thanks for the explanation! And congratulations on this template, it's by far the most accessible and customizable that I've found for documentation.

If you're curious, here's the site we're building:

https://docs.rocketvalidator.com

jaimeiniesta on 16 Mar 2020

Thanks, happy to hear! We've gone a long way to try to improve and keep accessibility to a maximum. Also, if something could be improved without losing functionality, always happy to merge PRs.

squidfunk on 16 Mar 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings