Inventarisatie Bold web components

Web component, afgeleid van een CSS bestand, als je begint met het formulier invullen van Opgaaf zonnepaneelhouders.

Gecheckt in versie assets/bold/bldc-components/2.42.3/dist

`bldc-backdrop`

Waarschijnlijk vergelijkbaar met Utrecht backdrop component
heeft standaard 6px blur effect met de CSS backdrop-filter: blur(6px)
web component zonder shadow root
CSS animation voor backdrop fade in
A11y: geen rekening gehouden met prefers-reduced-motion
ik zie geen code voor ::backdrop
er lijkt net een iets andere implementatie te zijn voor de CSS component .bldc-backdrop

`bldc-badge`

web component met shadow DOM
heeft geen slot, alleen attributes: value en max-value
rendert een <span>, geen <data>
Gebruikt aria-roledescription="badge". Dit kan een accessibility probleem zijn.
Gebruikt role="status", waardoor die altijd politely wordt aangekondigd door screen readers. 🧐
Vergelijkbaar met de Utrecht counter badge, behalve dat die (nog) niet standaard role="status" krijgt omdat het overwhelming kan zijn bij gebruik. With great power comes great responsibility...
Heeft een max-value="" property die voor mijn gevoel een off-by-one-error heeft: <bldc-badge max-value="999" value="1234"></bldc-badge>
Misschien moet de max-value property een minimum waarde krijgen van 1:

`bldc-breadcrumb`

web component met shadow root
rendert standaard een <nav> element, die moet wel een goed label krijgen natuurlijk
rendert standaard een aria-label="breadcrumb1", die lijkt niet configurable 🧐 ook een manier om een unieke landmark label te hebben 😂
rendert een <ol> voor de breadcrumb items

`bldc-breadcrumb-item`

rendert role="listitem" op de host element, zodat er de <ol> uit bldc-breadcrumb direct een listitem child heeft. Rendert geen <li> in de shadow DOM, maar een <div>
rendert standaard href="none", wat niet een bestaande URL is
rendert standaard een icon (delta_rechts) met de hardcoded kleur $donkerblauw-vol
heeft text overflow CSS: max-width: 15.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap. Is dit een accessibility issue?
heeft een href attribute die wordt gekopieerd naar de <a>
heeft een target attribute die wordt gekopieerd naar de <a>.
je kunt met type="currentPage" de huidige pagina aangeven
er is speciale support voor de alignment van slotted icons met <bldc-icon>, ik vraag me af in welke situaties je een icon zou gebruiken. Home?

`bldc-button`

<bldc-button class="bldc-html-component hydrated" id="F_1100" elem-id="F_1100" elem-title="Volgende" type="primary" size="regular" icon-only="false" icon="volgende" icon-pos="right" icon-title="Volgende" href="" target="_self" html-type="button" disabled="false" aria-label="" data-events="{"bldcClick":"leapNextPage","bldcFocus":"","bldcBlur":""}" data-fields-to-display="" data-fields-to-display-on-error="" data-fields-to-hide="" data-add-data-to="" data-fields-to-set-required="" data-fields-to-unset-required="" data-select-page="" validation-role="status"></bldc-button>
manier om aria-label te zetten
focus event
blur event
click event
lijkt één icon te supporten
type: primary/secondary/tertiary/...?
primary button is minder opvallend dan secondary button in forced colors mode:

`bldc-buttonbar`

Lijkt op Utrecht button group component
Optie voor backgroundColor
Optie voor disable padding / margin
Hardcoded viewport media query voor full width buttons bij kleine viewports
Slots voor left, center en right
Heeft een renderWrappedView om te herkennen dat buttons op een tweede regel terecht zijn gekomen (offsetTop > firstButton.offsetTop), voegt dan de wrapped class name toe aan die buttons

`bldc-calculation`

`bldc-calculation-accordion`

`bldc-calculation-amount`

`bldc-calculation-row`

`bldc-card`

`bldc-card-header`

`bldc-checkbox`

Lijkt op de Utrecht checkbox form field component, is composite van form field, form field label en checkbox
Label is de default slot, bijvoorbeeld: <bldc-checkbox>Ik ga akkoord met de voorwaarden</bldc-checkbox>
Checkbox zit in shadow root
Er is een slot voor een form field description op de regel erna, bijvoorbeeld <bldc-checkbox>Ik ga akkoord met de voorwaarden<p slot="after-label">Lorem ipsum</p></bldc-checkbox>
Heeft pristine, untouched en valid state attributes.
name property wordt doorgezet naar de <input> element, maar die zit alsnog wel in shadow dom dus niet duidelijk of het nuttig is
Gebruikt <bldc-icon name="check"> voor de checkmark
Heeft een active state om van unchecked naar checked te gaan, maar niet voor checked naar unchecked
Zoom animatie voor checkmark bij checked naar unchecked
Heeft hover effect voor checked en unchecked

`bldc-checkbox-group`

`bldc-chip`

web component met shadow DOM
wordt standaard gerendered met <button> (niet <button type="button"> 🧐)
heeft aria-roledescription="chip". Dat kan een toegankelijkheidsprobleem zijn, omdat chip niet gelocalised wordt, en omdat niet de verwachtingen van de mogelijkheden van "button" worden gewekt, zoals kunnen activeren met bepaalde toetsen. Zie artikel: Léonie Watson - Using the aria-roledescription attribute

`bldc-chip-group`

rendert alleen een <div>, geen role="group" en geen list ofzo
web component met shadow root
hardcoded margins

`bldc-component`

`bldc-date-input`

Dit is de date input zoals Sergei Maertens die heeft gemaakt op basis van Utrecht componenten voor Open Formulieren
Input group date input
Belastingdienst screenshot:
Open Forms SDK Storybook:
Niet duidelijk in forced colors mode:

`bldc-date-picker`

Lijkt op de React component voor de date picker van Utrecht
Dagnummers uit vorige maand en volgende maand zijn niet aanwezig, waarschijnlijk vanwege contrast issues
Support voor arrow keys
Support voor PageUp / Page Down
Lijkt geen support te hebben voor Home/End
Lijkt geen support te hebben voor Enter/Space
Buttons hebben target size die voldoende groot is 46x46px en 48x48px
Heeft class="selected" maar niet aria-selected
Heeft <a href="javascript:;"> als buttons
Heeft naam van de maand als table cell, niet als table caption
Heeft alleen afkortingen als table column headers, niet de volledige naam van de dag van de week in aria-label ofzo
als readonly="true" is gebruikt, dan wordt wel een <fieldset> gerendered, maar geen <input> elementen. De formatted date komt in een <bldc-paragraph> te staan, waardoor die niet focusable is en mogelijk wordt gemist bij het controleren van de invoer van een formulier als je door de readonly inputs heen tabt.

`bldc-date-picker-modal`

`bldc-description-details`

`bldc-description-list`

`bldc-description-term`

`bldc-dropdown`

`bldc-dropdown-item`

`bldc-dropdown-menu`

`bldc-explanation-text`

`bldc-fieldset`

`bldc-fieldset-address`

`bldc-file`

`bldc-file-upload`

`bldc-file-upload-modal`

`bldc-focus-trap`

`bldc-footer`

`bldc-footer-list`

`bldc-form`

`bldc-grid`

`bldc-grid-column`

`bldc-grid-row`

`bldc-header`

`bldc-heading`

Net als de Utrecht heading component
Heeft een extra <div> eromheen, for reasons unknown
Heeft hyphenation CSS: -ms-hyphens:auto;hyphens:auto;-webkit-hyphens:auto
Heeft opties om een typescale uit te kiezen, om een h1 eruit te laten zien als een h2 bijvoorbeeld. Het heet "typescale".
Opties voor not-bold en no-margin
disableMargin property
size property: xxxl, xxl, xl, l, m, s, xs

`bldc-help`

`bldc-help-button`

Dit is de details/summary button voor het vraagtekentje bij formulier velden. Deze bestaat nog niet bij Utrecht.
Vermoedelijk is dit een aria-controls voor de bldc-explanation-text.
Heeft aria-haspop en aria-expaneded.
Heeft een title attribuut, raden wij af
Is wel erg kleine target size, 18x18px

`bldc-help-text-container`

`bldc-html-navigation-bar`

`bldc-html-navigation-bar-item`

`bldc-icon`

heeft aria-hidden="true" met role="img", lijkt me dat die role onnodig is
heeft title=""... zinloos?
blijkbaar kun je <bldc-icon aria-hidden="false"> doen, die waarde wordt gekopieerd naar de icon waardoor het label wordt voorgelezen
aria-label wordt ook gekopieerd, maar dan heb je een label op een custom element die zinloos is
support fill zodat nested SVG wordt gestyled
een of andere berekening met computedStyle om de icon size in rem te kunnen zetten, maar die relatief is ten opzichte van de <body> in plaats van de <html> ofzo??
lijkt niet mogelijk te zijn om relative font-size icons te hebben, die aanpassen aan de omliggende tekst
title attribute wordt gezet met de waarde van aria-label, die zorgt voor een onhandige tooltip. Lijkt me onnodig
houdt de hardcoded kleur in forced colors mode, daarom niet goed zichtbaar:
focus ring is niet de ideale kleur in forced colors mode

`bldc-icon-notification`

`bldc-input`

`bldc-language-picker`

`bldc-language-picker-option`

`bldc-layout`

`bldc-link`

web component met shadow DOM
ondersteunt geen slotted content
syntax lijkt niet heel erg op het <a> element uit HTML
<bldc-link url="https://example.com/" elem-text="example.com" type="inline"></bldc-link>
url attribute in plaats van href
type="inline" rendert <a class="inline" aria-label="label"><div class="inline"><span class="nowrap">label</span></div></a>
zonder type="inline" rendert 'ie geen <div>: <a class="block" aria-label="label">label</a>
de span lijkt er te zijn zodat de underline alleen op de span gezet kan worden (en misschien niet op een icon?)
heeft elem-title="foo" om <a title="..."> in te stellen, maar dat raden we af bij NL Design System
heeft black-text="true" voor color: rgb(0, 0, 0); 🧐
heeft een size="xs" attribute om class="typescale-${size}" in te stellen
heeft een aria-label attribuut die wordt gekopieerd naar het <a> element, maar dat betekent dat er een <bldc-link aria-label="foo"> in de DOM staat, en je moet niet aria-label instellen op elementen waarvan de role niet appropriate is (zoals role="none" van bldc-link)

`bldc-list`

`bldc-login`

`bldc-login-status`

`bldc-logo`

Lijkt standaard een <a href="#"> te renderen, niet nodig
De linktekst is "Logo Belastingdienst, link naar startpagina" - dat het een logo is hoeft niet in de linktekst, "link naar" hoeft niet in een linktekst, en de link gaat niet naar de startpagina in dit geval
Het logo werkt niet in forced colors mode:

`bldc-modal`

`bldc-navigation`

`bldc-navigation-bar`

`bldc-navigation-bar-item`

`bldc-navigation-bar-subs`

`bldc-navigation-dropdown`

`bldc-navigation-item`

`bldc-navigation-menu`

`bldc-navigation-user-info`

`bldc-notification`

Lijkt op de Alert component van Utrecht:
Heeft standaard role="alert"
Heeft standaard een aria-describedby met de tekst "Storing melding" in een screen reader only div
Heeft een slot voor een heading
Heeft altijd een icon
type: "error"/"warning"/information/success/suggestion?
optie voor compact="true"
optie voor disableMargin
optie voor disableIcon
optie voor elem-title="foo" die maakt een bldc-heading in de heading slot. De level is hardcoded, 3 of 4 afhankelijk van of 'ie compact is. Niet toegankelijk dus. Lijkt me logischer dat deze heading is gekoppeld via aria-labelledby.
Alle content is role="alert", er is niet een slot voor actions die niet aria-live is

`bldc-paragraph`

Lijkt op in eerste instantie op paragraph component van Utrecht, maar bij nader inzien is het meer een container voor rich text
heeft disable-margin="true" attribute

`bldc-radiobutton`

web component met shadow dom
label is in te stellen via de slot
radio button is niet duidelijk in forced colors mode, niet zichtbaar of 'ie checked is
label is grijs wanneer de radio button disabled is, de after-label heeft geen andere stijling
rendert role="radio" aria-checked="false" op de host element, onduidelijk waarom. Host element is niet focusable namelijk 🧐
rendert <input type="radio"> in de shadow dom
name attribuut wordt gekopieerd naar <input>
value attribuut wordt gekopieerd <input>
bldc-value="true" is om checked te zetten, bldc-value="false" is om niet checked te zijn.
zou aria-checked="true" op de host element gebruikt worden om CSS state selectors te maken als alternatief op :checked? Bijv: bldc-radiobutton[aria-checked="true"]?
aria-disabled wordt gerendered naast disabled, onduidelijk wat de toegevoegde waarde is
events: change / focus / blur
heeft net als checkbox een slot voor de form field description

`bldc-radiobutton-group`

`bldc-select-box`

`bldc-sign-form`

`bldc-status-step-indicator`

`bldc-tab`

`bldc-table`

`bldc-tabs`

`bldc-task-step-indicator`

`bldc-template`

`bldc-textarea`

`bldc-tooltip`

`bldc-translate`

lijkt iets te zijn om translation keys toe te passen

`bldc-translate-init`

waarschijnlijk om een dictionary met translation keys in te laden, misschien met JSON

`bldc-user-info`

`bldc-user-service`

`bldc-validation`

`bldc-version`

debug component: <bldc-version show-on-screen="true"></bldc-version>
ben benieuwd hoe deze wordt gemaakt in de pipeline: hoe wordt het versienummer in de build opgenomen?

Overige opmerkingen:

de CSS van de componenten lijkt vaak CSS te bevatten van andere componenten
de CSS van de componenten lijkt vaak CSS te bevatten met theme informatie. De theme werkt dan out of the box, maar hij wordt ook wel onnodig vaak gedownload. Lijkt me handiger de theme buiten de shadow DOM te definieren, want custom properties can pierce the shadow DOM.
mogelijkheden om een eigen thema in te stellen zijn heel beperkt, lijkt me behoorlijk lastig om bijvoorbeeld dark mode te ondersteunen

Vragen:

Hebben jullie al plannen voor Bold 3.0, welke breaking changes zijn ben je van plan?
Raad je aan om <input> elementen in de Shadow root te hebben, of zou je dat anders aanpakken?
Iconen namen zijn soms Nederlands (volgende) en soms Engels (check), werkt dat prettig?