Inventarisatie std web components

Publieke websites waar deze web components worden gebruikt:

• https://www.stelselcatalogus.nl/
• https://stelselvanbasisregistraties.nl/
• https://opendata.stelselcatalogus.nl/

std-accordion

😱 er staat aria-live="polite" op de hele accordion in de shadow DOM, waardoor alles wordt voorgelezen, ook van accordion items waar je niet bent

• web component met shadow DOM
• single-open="true" property, die in een itemToggledHandler ervoor zorgt dat alleen de accordion-item die is "getoggled" op is-active="true" staat.
• er wordt zowel open als active gebruikt als term voor expanded accordion items, misschien kan dat expanded zijn net als in aria-expanded?

std-accordion-item

• web component met shadow DOM
• 😱 aria-live="polite" voor de expandable region
• slot voor header
• slot voor content
• geen default slot
• lijkt ook bruikbaar zonder std-accordion, als je de single-open optie niet nodig hebt.
• is-active="true" state attribute. Aanwezig in de DOM, zodat je std-accordion-item[is-active="true"] kan doen. Qua naamgeving een beetje verwarrend met std-accordion-item:active misschien, kan ook _std-accordion-item[expanded]` zijn, een boolean attribute.
• is-scrollable="true" attribute om scroll overflow behavior te krijgen bij teksten die langer zijn dan de hardcoded max-height: 280px. Het is waarschijnlijk handig om die height configurable te maken met een CSS custom property, en als die standaard niet is ingesteld dan is wellicht de DOM property niet nodig: je kunt het gewoon via CSS instellen.
• icon positie is standaard aan het begin van de regel (goed qua toegankelijkheid voor gebruikers met kokervisie), maar het is instelbaar op einde van de regel met icon-position="right". Dit wordt waarschijnlijk (en hopelijk) met name gebruikt in smalle containers, waardoor de icon in de buurt staat van het label.
• toggleAccordionItem event, met evt.detail.id en evt.detail.active
• er lijkt support te zijn voor nested accordions, maar nog niet uitgezocht wat het precies doet
• er lijkt support te zijn voor een animation bij het uitklappen
• er lijkt geen support te zijn voor scrollIntoView bij het uitklappen

De icon-position="right" wordt bijvoorbeeld gebruikt bij checkbox groups:

std-alert

• web component met shadow DOM
• vergelijkbaar met Utrecht alert component
• type property: "info", "success", "warning", "error"
• closable property: heeft optioneel een ingebouwde button (wel echt een <button>) om de alert te sluiten
• active property, die false is als de alert gesloten is
• clickCloseAlert event, misschien voor statistieken verzamelen
• heeft een prefix slot, not sure waarvoor
• heeft een Rijkshuisstijl icon ingebouwd voor elke type
• sluit button heeft hardcoded label in het Nederlands ("Melding sluiten")
• inhoud van de melding gaat via de default slot
• geen speciale aria-live support, als je <std-alert aria-live="true"> zou doen dan wordt ook de button label voorgelezen bijvoorbeeld

std-banner

• Web component met Shadow DOM
• embleem van Rijksoverheid logo, geen support voor tekst naast het logo
• <img> met externe SVG, geen support voor CSS variables of dark mode dus
• responsive op basis van viewport media queries
• hardcoded alt met "Logo: Rijksoverheid" in het Nederlands

std-breadcrumbs

std-button

primary button

secondary button

tertiary button

• web component met Shadow DOM
• gebruikt intern een <button> element
• default slot voor tekst label
• heeft geen icon slot, maar een property icon properties die <std-icon> elementen maakt. Niet mogelijk om met dezelfde layout een ander custom icon element te gebruiken.
• type="primary": primary action button van Utrecht:
• type="secondary": secondary action button van Utrecht
• type="tertiary": heeft niet echt een equivalent bij Utrecht, het lijkt anders te zijn dan de subtle button daar:
• icon-left property en icon-right property, bijvoorbeeld: icon-right="chevron-right-white" of icon-left="chevron-left-white"
• heeft hover effect (transformX -2px) en een box shadow, dat zijn design tokens die de component van Utrecht niet ondersteunt
• event: buttonClicked
• disabled property
• expanded property voor aria-expanded
• description property voor een visually hidden beschrijving. Werkt intern met aria-describedby, maar je kunt niet descriptions buiten de button koppelen. Bijvoorbeeld een alinea met small print. Als workaround kun je de tekst zowel in de description attribute als in de print. Voor strings werkt dat, maar voor teksten met meerdere alinea's wordt het al lastiger om er een string van te maken.
• niet voor alle belangrijke ARIA properties zijn mogelijkheden, bijvoorbeeld:
  • aria-describedby niet, maar er is een workaroudn
  • aria-controls niet
  • aria-pressed niet
  • aria-haspopup niet

Button as link

• de <std-button> wordt in de single page app ook gebruikt als link tussen pagina's, dat is een toegankelijkheids-probleem: links moeten role="link" hebben, liefst door gewoon <a> te gebruiken
• de Utrecht component link that looks like a button voorziet in die noodzaak

std-card

std-carousel

std-checkbox-multiselect

• Web component met shadow DOM
• Checkbox group, met fieldset en legend
• Zonder in te stellen is de legend text "Default legend", en de legend heeft geen slot 🤔
• Heeft een slot voor een label, maar dat is niet in de legend
• Checkbox wordt met JSON geconfigureerd via checkboxProps, onduidelijk wat de API is
• heeft een optie voor een accordion (expandable/collapsible region) voor de checkboxes die in deze group vallen, met een animatie
• ...er valt nog veel meer te vertellen over deze component 🕵️‍♀️

Alert

• Heeft een optie om een info alert component te tonen, een soort details/summary voor meer informatie
• icon span heeft een custom role="button" implementatie met tabIndex and click/enter event handlers, in plaats van een icon button component hergebruiken
• Label is hardcoded in het Nederlands: "aria-label": this.showAlert ? "Informatie over " + this.labelContent + " sluiten" : "Meer informatie over " + this.labelContent

std-checkbox

• Web component met shadow DOM
• gebruikt intern <input type="checkbox">, niet een <div> ofzo
• gebruikt aria-checked="true" _in plaats van de boolean HTML attribute checked: misschien handiger om gewoon checked te gebruiken? lijkt gebruikt te zijn om aria-checked="mixed" te ondersteunen.
• heeft een slot voor een gekoppeld label
• heeft indeterminate property, handig voor checkbox group hierarchiëen
• heeft hideLabel property: is dit voor gevallen dat eigenlijk een atomic checkbox component nodig was zonder label? Label is nog wel steeds verplicht, maar "visually-hidden"
• disabled property
• checked property
• clickCheckbox event: een soort van change event?

std-filter

std-footer

• web component met shadow DOM
• vergelijkbaar met Utrecht page footer component
• gebruikt <footer> element voor de juiste ARIA landmark
• gebruikt een JSON configuratie om alle footer links te maken
• links hebben een chevron of een external link icon

[
  {
    "nameId": "footercat-Stelselbasisregistratie",
    "name": "Menu",
    "items": [
      {
        "href": "/home",
        "isExternal": false,
        "label": "Home",
        "title": "Navigeer naar de home van Stelsel van Basisregistraties."
      },
      {
        "href": "/products-selection",
        "isExternal": false,
        "label": "Datadiensten",
        "title": "Navigeer naar de datadiensten van Stelsel van Basisregistraties."
      },
      {
        "href": "/stories",
        "isExternal": false,
        "label": "Verhalen",
        "title": "Navigeer naar de verhalen van Stelsel van Basisregistraties."
      },
      {
        "href": "/about-system",
        "isExternal": false,
        "label": "Over het stelsel",
        "title": "Navigeer naar informatie over wat Stelsel van Basisregistraties is."
      },
      {
        "href": "/FAQ",
        "isExternal": false,
        "label": "Veelgestelde vragen",
        "title": "Navigeer naar de veelgestelde vragen van Stelsel van Basisregistraties."
      }
    ]
  },
  {
    "nameId": "footercat-aanbod",
    "name": "Datadiensten",
    "items": [
      {
        "href": "/products?categorie=service",
        "isExternal": false,
        "label": "Services",
        "title": "Navigeer naar de services van Stelsel van Basisregistraties."
      },
      {
        "href": "/products?categorie=proces",
        "isExternal": false,
        "label": "Processen",
        "title": "Navigeer naar de processen van Stelsel van Basisregistraties."
      },
      {
        "href": "/products?categorie=dataset",
        "isExternal": false,
        "label": "Datasets",
        "title": "Navigeer naar de datasets van Stelsel van Basisregistraties."
      },
      {
        "href": "/products?categorie=metadata",
        "isExternal": false,
        "label": "Metadata",
        "title": "Navigeer naar de metadata van Stelsel van Basisregistraties."
      },
      {
        "href": "/products?categorie=standaard",
        "isExternal": false,
        "label": "Standaarden",
        "title": "Navigeer naar de standaarden van Stelsel van Basisregistraties."
      }
    ]
  },
  {
    "nameId": "footercat-service",
    "name": "Service",
    "items": [
      {
        "href": "/contact",
        "isExternal": false,
        "label": "Contact",
        "title": "Navigeer naar de contact van Stelsel van Basisregistraties."
      }
    ]
  },
  {
    "nameId": "footercat-platforms",
    "name": "Over deze site",
    "items": [
      {
        "href": "/about",
        "isExternal": false,
        "label": "Over het platform",
        "title": "Navigeer naar informatie over wat het Platform Stelsel van Basisregistraties is."
      },
      {
        "href": "/toegankelijkheid",
        "isExternal": false,
        "label": "Toegankelijkheid",
        "title": "Navigeer naar de toegankelijkheid van Stelsel van Basisregistraties."
      },
      {
        "href": "/cookies",
        "isExternal": false,
        "label": "Cookies",
        "title": "Navigeer naar de cookies van Stelsel van Basisregistraties."
      },
      {
        "href": "/sitemap",
        "isExternal": false,
        "label": "Sitemap",
        "title": "Navigeer naar de sitemap van Stelsel van Basisregistraties."
      }
    ]
  }
]

std-hamburger-menu

std-header

std-horizontal-menu

std-icon

std-img-card

std-input-field

std-kv-table

• web component met shadow DOM
• vergelijkbaar met de data list component van Utrecht
• de aanpak van slots voelt een beetje vergezocht: key-0, value-0, key-${index}, value-${index}. Je kunt niet gewoon child elements toevoegen met een hardcoded slot, je moet de index instellen.
• rendering in de shadow DOM met een <table> met direct <tr> elementen, zonder column headers. Voelt alsof het misschien beter was geweest om een <dl>/<dt>/<dd> te gebruiken, maar uit user testing zou kunnen blijken dat screen reader gebruikers dit fijner vinden natuurlijk.
• mijn indruk: API zou duidelijker zijn met een container element voor key/pairs, zoals datalist/data-item/data-key/data-value

Heeft ook nog een optie om een alert te tonen bij een key/value pair:

not expanded:

expanded:

std-link

• web component met shadow DOM
• vergelijkbaar met de link component van Utrecht
• event voor clickExternalLink en clickInternalLink, waarschijnlijk voor user statistics verzamelen
• heeft "gewoon" een href property en een target property
• heeft een skip="true" property om een skip link te maken. Utrecht heeft hiervoor een losse component, de skip link
• stelselcatalogus.nl lijkt deze skip link versie niet te gebruiken, maar een custom implementatie: <button _ngcontent-jgy-c18="" aria-label="Overslaan navigatie">Overslaan navigatie</button>
• aria-label wordt gekopieerd van de host element naar de <a> in de shadow DOM, wat wel betekent dat er een aria-label staat op een element dat niet de juiste role heeft (std-link). Misschien kan de label property een andere naam krijgen.
• type="external" bepaalt of het een externe link is. In HTML kan dat met rel="external". Externe links krijgen zo'n icoontje erbij, met iconPosition kun je 'm right of left zetten. In NL Design System zou ik ook graag logical properties supporten, start en end.

std-pagination

std-popup

std-radio-button-group

std-radio-button

std-sub-navigation

std-table

std-tag

• web component met shadow DOM
• vergelijkbaar met de data badge component van utrecht
• achtergrondkleur is niet instelbaar

Er is geen badge list component zoals bij Utrecht, de CSS daarvoor is nu onderdeel van de card component.

std-text-block

---

ion-badge

• De ionic counter badge wordt gebruikt op stelselcatalogus.nl
• web component met shadow DOM
• vergelijkbaar met
• aantal in de default slot
• role="img" aria-label="0 gegevens geselecteerd om te vergelijken" voor toegankelijkheid, waarschijnlijk custom bedacht voor toegankelijk, de Ionic documentatie heeft het hier niet over

---

Heading 1 - 6

Zijn niet beschikbaar als web component, worden gewoon als <h1>-<h6> gebruikt met global styles.

Paragraph

Niet beschikbaar als web component, wordt gewoon als <p> gebruikt met global styles