Twitter.com's HTML, which is produced by React Native for Web, explained

Re:Twitter.com's HTML, which is produced by React Native for... by Milolol on Thursday September 02, 2021 @12:50PM (#28394369)

The classic mistake of thinking role=button replaces <button>. It doesn't (as mentioned in the linked PR comments). Native HTML buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default [1]. The "short answer" they give as to why they did this (a flexbox bug) links to a comment from February saying this was fixed in Firefox 63.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by slowwriter on Thursday September 02, 2021 @01:00PM (#28394489)

> > The "paragraph" role isn’t mapped to a <p> tag because it’s an HTML conformance error to include block-level children within the [article] element

I believe you are misquoting here. "The element" refers to the paragraph element, meaning that valid HTML5 doesn't allow block-level elements within <p>. This is supported by what follows the quote:

> in React Native for Web both Text and View support block-level children.

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by dexwiz on Thursday September 02, 2021 @04:37PM (#28397037)

I think years of <div> only development has destroyed most developer's knowledge of semantic HTML elements. There are over a hundred elements with various meanings, but to a visual user, they all look the same. With a renewed interested in A11Y people are still starting to rediscover these, but it's still slow.

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by extra88 on Thursday September 02, 2021 @02:24PM (#28395534)

At least they were thorough enough in their re-implementation of <button> to include activation by pressing either Enter/Return or Space bar.

[ Parent | on HN ]