Update HTML input pattern attribute documentation (fixes #26907)

[gijsk]

I've tried to apply the feedback from #29842 and reorganized some of the sections to hopefully make them clearer.

Description

This adds language around the specifics of how the pattern attribute's functionality compares with "normal" JS regular expression (notably the addition of the v flag). It also reorganizes the a11y and usability considerations so they read a bit better and aren't spread out across the document.

Motivation

Because I got confused about why [\w-] was not working inside a pattern attribute. It took asking several people before someone was able to point out that the v flag gets applied and that's why the behaviour was different.

Additional details

whatwg/html#7908

Related issues and pull requests

fixes #26907, relates to #29842.

[github-actions]

Preview URLs

• /en-US/docs/Web/HTML/Attributes/pattern

External URLs (1)

URL: /en-US/docs/Web/HTML/Attributes/pattern
Title: HTML attribute: pattern

• https://github.com/tc39/proposal-regexp-v-flag (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-01-09 09:00:48)

[teoli2003]

Added @estelle as a reviewer, as this PR adds additional accessibility info, and she will be able to review it.

[gijsk]

Added @estelle as a reviewer, as this PR adds additional accessibility info, and she will be able to review it.

It doesn't, actually - it just moves existing content around so it's not under the "example" section and groups usability and accessibility together.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[gijsk]

So I'm pretty confused here because this now has conflicts as a result of #31180 which was @estelle's PR to "standardize" the a11y header. It references "guidelines" (where are those? They are not linked - I found https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines but not sure which subdoc the specific guidelines referenced are in). But the header is still in the "examples" section which seems wrong, and I can't tell if the guidelines mean it's "wrong" for me to rename it and include UX-y considerations in the same place. I did so because IMO how and when to show guidance on form validation is not just about accessibility but about usability in general.

[estelle]

Thanks! 🎉