Która z właściwości przycisków typu Radio-button opisanych w przedstawionym fragmencie dokumentacji jest poprawna?
Radio-button label ... The label can be positioned before or after the radio-button by setting the labelPosition property to 'before' or 'after'. Radio groups Radio-buttons should typically be placed inside of an <mat-radio-group> unless the DOM structure would make that impossible ... The radio-group has a value property that reflects the currently selected radio-button inside of the group. Źródło: https://material.angular.io/components/radio/overview |
Właściwość labelPosition w przyciskach typu radio-button, szczególnie w popularnych bibliotekach jak Angular Material, naprawdę potrafi ułatwić życie programiście. Jej działanie sprowadza się do tego, że pozwala określić, czy etykieta powinna być wyświetlana przed, czy po elemencie radio. Można ustawić tę właściwość na 'before' albo 'after'. Nie brzmi skomplikowanie, ale znaczenie praktyczne jest ogromne – czasem projekt graficzny wymaga, by tekst pojawił się z lewej strony guzika, a czasem z prawej. Dobre praktyki UX też to uwzględniają, bo zgodność z oczekiwaniami użytkownika poprawia czytelność formularzy. Moim zdaniem, jeśli budujesz interfejs dla internautów z różnych środowisk kulturowych (np. z językiem pisanym od prawej do lewej), ta opcja jest wręcz niezbędna. Warto też pamiętać, że takie ustawienie można łatwo nadpisywać na poziomie pojedynczego przycisku, co daje dużą elastyczność. W większości poważnych frameworków webowych, np. Angularze, ta właściwość jest dokumentowana jako podstawowa, bo daje deweloperowi kontrolę bez grzebania w CSS-ach. Sam nie raz korzystałem z labelPosition, szczególnie w korporacyjnych projektach, gdzie musiałem spełniać szczegółowe wymagania projektantów – dzięki temu oszczędza się czas i nerwy.
Często się zdarza, że osoby pracujące z radio-buttonami skupiają się na nazwie elementu grupującego albo mieszają pojęcia związane z etykietami i wartościami. No właśnie – typowy błąd to przekonanie, że grupa radio to <radio-group>, podczas gdy np. w Angular Material używa się <mat-radio-group>. Standardy webowe nie definiują takiego elementu jak <radio-group>, to raczej wynalazek niektórych bibliotek. Kolejna kwestia to mechanizm value w grupie radio. On nie przechowuje tekstów etykiet, tylko wartość wybranego przycisku, czyli to, co deweloper przypisał do konkretnego radio-buttona (np. id, liczbę albo string techniczny). Gdyby wartość była powiązana z tekstem etykiety, trudno byłoby obsłużyć przypadki, gdy etykieta i wartość mają się różnić (a to się zdarza bardzo często, chociażby przy tłumaczeniach). Z mojego doświadczenia wynika, że zamieszanie powstaje też wokół samej etykiety – niektórzy sądzą, że label w radiobuttonach zawsze znajduje się po prawej stronie. W rzeczywistości dobre biblioteki dają wybór właśnie poprzez labelPosition – możemy bezproblemowo wyrenderować label z dowolnej strony guzika, wystarczy jeden parametr. Zresztą, to nie tylko kwestia wygody, ale też dostępności i zgodności ze standardami WCAG. Podsumowując: warto rozumieć fundamentalne różnice między etykietą, wartością i sposobem grupowania, bo to eliminuje wiele nieporozumień, które potem skutkują błędami zarówno w kodzie, jak i w interfejsie użytkownika.