Improve quote component

NicolaSaunders commented 11 months ago

Describe the issue The quote component uses the figure and figcaption elements to hold a blockquote and citation. This follows an example pattern from MDN.

This pattern has recently been flagged as overly verbose for screen reader users.

URL https://www.w3.org/about/ (see the Tim Berners-Lee quote, roughly halfway through the page)

Recommended solution Consider replacing the figure with div and figcaption with footer, or refactoring the quote component to be closer to the pattern presented at https://adrianroselli.com/2023/07/blockquotes-in-screen-readers.html#Example07

vivienlacourba commented 11 months ago

cc: @iadawn

iadawn commented 11 months ago

@NicolaSaunders Why not follow the complete pattern from Adrian?

<blockquote>
  <p></p>
  <footer></footer>
</blockquote>

Then no <div> is involved?

NicolaSaunders commented 11 months ago

@iadawn Well, indeed. I just wanted to note the issue and potential solutions here. If it's not needed to hook onto for styling then I wouldn't include the div, but I want to be sure in the context of the design system.

iadawn commented 11 months ago

I would be for removing it to make the pattern just that little bit cleaner

NicolaSaunders commented 9 months ago

Pull request raised at https://github.com/w3c/w3c-website-templates-bundle/pull/123

deniak commented 9 months ago

The fix has now been deployed. Thanks @iadawn and @NicolaSaunders

w3c / w3c-website

Improve quote component #454