Here’s a breakdown of the HTML snippet you provided, focusing on the categories and follow buttons:
Overall Structure
The code represents a list of categories associated with an article on The Verge. Each category is presented as a <li> (list item) element. Within each list item, ther’s a button to follow the category and an associated “popover” (a small panel that appears when you interact with the button) containing more details and a follow action.
Key Elements and Attributes
* <li>: The list item that encapsulates each category.
* div class="_6ytxv90": A container for the category information and follow button.
* <button aria-expanded="false" aria-haspopup="true">: The main button that, when clicked, is intended to reveal the popover.
* aria-expanded="false": Indicates that the popover is initially hidden.
* aria-haspopup="true": Indicates that the button triggers a popup (the popover).
* span class="gnx4pm0 _4hoiss4 _1xwtict5 _1618ekm0": Contains the category name and the follow icon.
* svg (inside the span): The SVG (Scalable Vector graphics) code defines the “Follow” icon.It’s a path that creates the shape of the follow icon.
* span class="_1618ekm8": Contains the actual category name (e.g., “macOS”, “Tech”, “Verge Shopping”).
* <aside id="popover-...-article_footer" style="position:absolute;left:0;top:0;visibility:hidden" class="_1wu3rm0" aria-hidden="true">: The popover element.
* style="position:absolute;left:0;top:0;visibility:hidden": Positions the popover absolutely on the page and initially hides it.
* aria-hidden="true": Indicates that the popover is initially hidden for accessibility.
* <button class="_1wu3rm3"> (inside the popover): A close button within the popover to dismiss it. It uses an SVG to create an “X” icon.
* <button class="duet--cta--button ..."> (inside the popover): The “Follow” button within the popover. this is the button that actually subscribes the user to the category. it also uses an SVG for the follow icon.
* <a class="fv263x5" href="..."> (inside the popover): A link to view all articles in that category.
Categories Listed
The code lists three categories:
- macOS: Link:
https://www.theverge.com/apple-mac-os - Tech: Link:
https://www.theverge.com/tech - Verge Shopping: Link:
https://www.theverge.com/shopping
Functionality (Intended)
- Clicking the main category button: Should reveal the popover.
- Within the popover:
* You can close the popover using the “X” button.
* You can click the “Follow” button to subscribe to updates from that category.
* You can click the “See All” link to view all articles in that category on The Verge’s website.
this HTML snippet provides a user interface for following specific categories on The Verge, allowing users to customize their content feed. The use of ARIA attributes enhances accessibility for users with disabilities.
