Toolbar: osnove

Nazaj: predstavitveni pregled

Stanje: [Live]. Vir: lib/plugins/wkfluentui/helper/widgets.php, metoda toolbar() (vrstica 603).

toolbar() ovije HTML gumbov/povezav/select, ki ga je že izdelal klicatelj, z role=„toolbar“ in izbirnim združevanjem. Ciljna publika: vsaka vrstica dejanj (modulna ukazna vrstica, mrežna vrstica množičnih dejanj, gumbi obrazca), ki potrebuje s standardom WAI-ARIA skladno tipkovnično navigacijo brez lastne kode JavaScript.

• DokuWiki z omogočenim vtičnikom wkfluentui.
• helper_plugin_wkfluentui_widgets naložen prek plugin_load('helper', 'wkfluentui_widgets').
• Dejanske gumbe/povezave klicatelj priskrbi povsem izrisane — toolbar() sam ne izriše nobenega kontrolnika.

Ovijajoča semantika, brez izrisa kontrolnikov: toolbar() izriše le okvir role=„toolbar“ in združevanje; vsak element je že zaupanja vreden HTML, ki ga izdela klicatelj (ista konvencija kot pri rowActions(), glej api → odsek „Pojmi").

Rezervni način je živa koda, ne poslabšanje: goli izris <div class="wkq-bt wk-toolbar">, ki je bil že v produkciji v wksqliteds, je rezervni način brez JS — toolbar() zgolj doda role=„toolbar“ plus (postopno) tipkovnično navigacijo, ne nove osnovne oblike izrisa.

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
 
echo $widgets->toolbar([
    ['label' => 'Novo',   'element' => '<button type="submit" name="do" value="new">Novo</button>', 'group' => 'main'],
    ['label' => 'Odpri',  'element' => '<button type="submit" name="do" value="open">Odpri</button>', 'group' => 'main'],
    ['label' => 'Izbriši', 'element' => '<button type="submit" name="do" value="delete" class="wk-btn--danger">Izbriši</button>', 'group' => 'danger'],
], ['ariaLabel' => 'Dejanja tabele']);

Napačno: posredovati element kot navadno besedilo namesto dokončanega HTML-ja ('element' => 'Novo'). toolbar() element ne ubeže — besedilo brez ovijajoče oznake gumba/povezave se izriše nevidno/neosredotočljivo, namesto da bi se pojavilo kot dejanje.

public function toolbar(array $items, array $opts = []): string

Povzetek: ovije HTML klicatelja z <div role="toolbar"> in izbirnim združevanjem.

Vrnjena vrednost: string. Prazen niz pri praznem $items.

<div class="wk-toolbar" role="toolbar" aria-label="…"> → vnosi brez group neposredno kot otroci, vnosi z group znotraj <div class="wk-toolbar__group">.

echo $widgets->toolbar([
    ['label' => 'Izvoz', 'element' => '<button type="submit" name="do" value="export" class="wk-btn--accent">Izvoz</button>', 'group' => 'dejanja'],
    ['label' => 'Osveži', 'element' => '<button type="submit" name="do" value="refresh">Osveži</button>', 'group' => 'dejanja'],
], ['ariaLabel' => 'Dejanja modula']);

• Vedenje prelivanja je izbirno prek $opts['overflow'] — podrobnosti: Adaptivity.
• Naslovi ribbon-skupin/različice velikosti galerije prek groupLabel/size/ribbonStyle — podrobnosti: Ribbon-skupine/Galerija.

• Celoten pregled: Accessibility (konsolidirano, tu ni podvojeno).
• Brez JavaScripta vsako dejanje ostane normalno s tipko Tab dosegljiv element — vzorec WAI-ARIA roving tabindex je čisto postopno izboljšanje.

Simptom: navigacija s puščicami med vnosi orodne vrstice ne deluje.

Vzrok: scripts/toolbar.js ni bil naložen (npr. ker manjka kanonična pot nalaganja prek script.js), ali pa ima orodna vrstica manj kot dva osredotočljiva otroka — skript aktivira roving tabindex šele od dveh elementov naprej.

Rešitev: preveriti pot nalaganja skripta (direktiva DOKUWIKI:include v script.js, glej api → odsek „Pojmi"); pri le enem vnosu manjkajoča navigacija s puščicami ni napaka — tipka Tab tako ali tako neposredno doseže edini element.

• predstavitveni pregled — vsaka kategorija
• FluentUI: javni API pomočnika — popolna pogodba metod
• DataGrid: Data Editing (množična dejanja) — živ porabnik (vrstica množičnih dejanj)
• Styles-Contract (--wk-*) — barvna semantika vrstnega reda group