Pagination: aanpassingen t.b.v. toegankelijkheid​

In deze breaking release is binnen het component Pagination een <nav> element om de <ul> geplaatst met aria-label="Paginering". Daarnaast heeft het laatste item van de paginering de alleen voor screenreaders 'zichtbare' aanduiding "(laatste pagina)" gekregen.

In deze breaking release is binnen het component Accordion de (optioneel) te tonen Badge component vervangen door een Label en zijn kleine verbeteringen aan het formulier doorgevoerd.

In deze breaking release is het legacy HTML/CSS Component Panel verwijderd, en zijn kleine verbeteringen aan het formulier doorgevoerd.

Breaking change​

In deze release is de ondersteuning voor Angular 15 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 16, 17 en 18.

In deze release zijn twee nieuwe features aan het Logo component toegevoegd, die op zich niet breaking zijn, maar toch een toelichting behoeven.

In deze release is een bug in de Modal opgelost waardoor in sommige gevallen de modal in een viewport onder 768px breedte verdween.

In deze release is een regressie bug in de Date Picker opgelost die in v60.0.0 is geintroduceerd.

Date Picker​

Het change event dsoDateChange van <dso-date-picker> moet de value als dd-mm-jjjj emitten. In versie v60.0.0 is dit per abuis jjjj-mm-dd geworden. In #2391 is dit opgelost en is de output format weer dd-mm-jjjj.

Tegelijkertijd hebben we #2380 Date Picker: Bij handmatige invoer van datum buiten min/max, geen event met error opgelost. Dit betekent dat event.error weer klopt. Met de komst van <input type="date"> in het Web Component is dit ook een erg beperkte API gebleven. Daarom hebben we de API uitgebreid met het validatieobject van de browser validity: ValidityState.

export interface DatePickerChangeEvent {
  component: "dso-date-picker";
  originalEvent: Event;
  value: string;
  valueAsDate: Date | undefined;
  error?: "required" | "min-range" | "max-range" | "invalid";

  // Nieuw
  validity: ValidityState;
}

Selectable​

Het SelectableChangeEvent was voorheen een alias voor Event. Dit was verwarrend en we hebben dit gelijkgetrokken met de overige events:

// ❌ Oud
interface SelectableChangeEvent extends Event {}

// ✅ Nieuw
export interface SelectableChangeEvent {
  originalEvent: Event;
  checked: boolean;
}

Voor het één-op-één migratiepad geldt dat het vorige DsoSelectableCustomEvent<SelectableChangeEvent>.detail object nu op DsoSelectableCustomEvent<SelectableChangeEvent>.detail.originalEvent staat:

event.detail === event.detail.originalEvent;

Voor de afnemers die de checked state willen weten kunnen ook gebruik maken van DsoSelectableCustomEvent<SelectableChangeEvent>.detail.checked:

event.detail.target.checked === event.detail.checked;

🚨 Breaking release! We hebben een nieuw component erbij: het logo! Je kunt nu door middel van dit component gemakkelijk een smal logo in de header plaatsen. Om te laten zien hoe dat werkt hebben we het header component in Storybook ook aangepast. De wijzigingen in het logo maken dit een breaking change.

Logo​

In de oude situatie gaf je één of twee statische afbeeldingen door aan het header component. Een afbeelding voor het logo (een afbeelding van het beeldmerk en het woordmerk) en een afbeelding met daarin de applicatienaam.

In het component laden we nu alleen het beeldmerk als afbeelding in (als inline SVG), en komen het woordmerk, de 'ribbon' en de applicatienaam terug als tekst. Dit maakt het gebruik van het logo flexibeler en toegankelijker, en bovendien konden we het bepaald gewenst responsive gedrag meegeven.

Vanaf nu kun je op deze manier het logo tonen in je applicatie:

<dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>

De applicatienaam geven we mee als label op het dso-logo component. Dit label is optioneel.

Het 'beta' blokje dat in deze fase op het logo staat kan worden ingezet door het logo component het attribuut ribbon mee te geven met de gewenste tekst. Zo kunnen we het logo straks ook gebruiken om visueel te communiceren dat we bijvoorbeeld op de pre- of acceptatie omgeving zijn. Ook dit attribuut is optioneel.

Afgesproken is om voor voornoemde gebruik steeds de prefix van de omgeving te gebruiken:

Opgelet: de header verandert ook​

Om het logo in het header component te plaatsen en goed te laten zien, is ook het header component aangepast. Er is nu geen sub-logo slot meer.

❌
<dso-header>
  <div slot="logo">
    <img alt="Omgevingsloket" src="LOGO" />
  </div>
  <img slot="sub-logo" alt="Regels op de kaart" src="LABEL" />
</dso-header>

✅
<dso-header>
  <div slot="logo">
    <dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>
  </div>
</dso-header>

Responsive gedrag​

Het nieuwe logo component wordt zo breed als nodig, maar als er niet genoeg ruimte is krimpt het vanzelf.

Op beeldschermen waar er genoeg ruimte is om het hoofdmenu volledig te tonen, ziet de bezoeker het beeldmerk, de tekst 'Omgevingsloket' met een beta ribbon, en de applicatienaam. In dit geval de tekst 'Maatregelen op maat'.

Als het scherm minder breed is, bijvoorbeeld bij tablets, verdwijnt de tekst Omgevingsloket en wordt alleen de applicatienaam Maatregelen op maat getoond. Deze tekst lijnt uit met een knop waarmee het menu kan worden geopend.

Op kleine telefoons waar de applicatienaam niet op één regel past, wordt de tekst vanzelf verdeeld over twee regels. De tekst blijft verticaal gecentreerd uitgelijnd ten opzichte van het logo.

Viewer Grid​

In #2161 hebben we ondersteuning voor de VDK layout gemaakt. Tegelijkertijd hebben we het component stateless gemaakt, in lijn met onze visie op stateful vs. stateless components.

Dit betekent dat afnemers van het Viewer Grid met de VRK layout ook werk moeten verzetten.

Stateless​

Voorheen was de breedte van het linkerpaneel onderdeel van de interne state. Nu moet de afnemer dit bijhouden. Hetzelfde geldt voor de "responsive tab view".

Hierdoor is de property initialMainSize komen te vervallen.

Interfaces​

API​

Bovenstaande opmerkingen komen enigszins in onderstaande markup voorschriften samen. Dit is exclusief de nieuwe functionaliteit die is ontwikkeld voor VDK.

❌
<dso-viewer-grid
  [initialMainSize]="'medium'"
  (dsoMainSizeChange)="$event.detail.stage === 'end' && resizeMap()"
></dso-viewer-grid>

✅
<dso-viewer-grid
  [mainSize]="mainSize"
  (dsoMainSizeChange)="mainSize = $event.detail.nextSize"
  [activeTab]="activeTab"
  (dsoActiveTabSwitch)="activeTab = $event.detail.tab"
  (dsoMainSizeChangeAnimationEnd)="resizeMap()"
></dso-viewer-grid>

Date Picker​

In #2226 zijn de maatwerk routines in Date Picker vervangen door de browser native <input type="date">. Dit gaat alleen over de implementatie van het Web Component. Dit betekent iets minder invloed maar veel betere toegankelijkheid.

Properties​

De volgende properties zijn komen te vervallen:

Interfaces hernoemd​

De interfaces van de Date Picker waren onterecht geprefixed met Dso.

In deze breaking release zijn de API's van Banner, Tooltip en Ozon Content aangepast.

Banner​

In deze breaking release hebben we de legacy CSS selector voor Banner verwijderd. Deze is sinds v22.0.0 deprecated.

Het migratiepad is gebruik maken van de namespaced CSS selector: dso-banner.

❌
<div class="banner"></div>

✅
<div class="dso-banner"></div>

Tooltip​

Zoals in 58.0.0 aangekondigd, is de HTML/CSS implementatie van Tooltip verwijderd. Zie de blogpost van versie 58.0.0 voor de onderbouwing.

Het migratiepad omvat het gebruik van het Web Component.

Migratie naar Web Component​

❌
<div class="tooltip fade in top|right|bottom|left" aria-hidden="true">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">LABEL</div>
</div>

✅
<dso-tooltip position="POSITION" descriptive>
  LABEL
</dso-tooltip>

Ozon Content​

Een deel van de functionaliteit van dit component is verhuisd naar Document Component.

Concreet betekent dit:

• De property deleted bestaat niet meer.
• De property interactive bestaat niet meer.
• Het event dsoClick met bijbehorend event model OzonContentClick bestaat niet meer.
• Het model OzonContentAnchorClick van het event dsoAnchorClick is hernoemd naar OzonContentAnchorClickEvent
• De slots prefix en suffix zijn verwijderd.

Er is geen uitgestippeld migratiepad. Hoogstwaarschijnlijk wil je als high-level afnemer gebruik maken van Document Component. Ozon Content kan gezien worden als een "Low Level component".