Dopo l’aggiornamento recente alla versione 2.8.0.beta2, il pulsante del menu amministratore è evidenziato in giallo.
Pensavo che Discourse volesse comunicarmi qualcosa, ma anche dopo aver cercato sul web e in questo forum, non ho idea di cosa potrebbe essere.
Qualcuno può per favore chiarirmi le idee?
Penso che ti stia indicando che il focus della tastiera è su quell’elemento. Si tratta di una recente modifica #accessibilità:
Dopo aver visualizzato il menu, prova a premere Tab per spostarti tra le voci del menu.
Sì, corretto, come ha notato @simonk, uno degli errori che commettevamo era non spostare il focus sui livelli sovrapposti. Il focus deve trovarsi in una posizione logica mentre si naviga nell’applicazione.
Quindi si considera che funzioni “come previsto” quando vedo questo (il mouse passa sopra “Distintivi”)?
Hmm, non sono sicuro; serve uno stato hover lì @awesomerobot?
Penso che potremmo voler passare da :focus a :focus-visible nel nostro CSS. Non è ancora supportato su Safari, ma in quel caso è semplice fare un fallback su :focus.
Se l’elemento attivo corrisponde a :focus-visible e uno script sposta il focus altrove, il nuovo elemento focalizzato dovrebbe corrispondere a :focus-visible.
Quindi, se apri il menu hamburger navigando con il tasto Tab (il che attiva lo stile :focus-visible), quando il menu si apre, lo stile :focus-visible viene applicato. Se invece apri il menu con un dispositivo di puntamento, lo stile :focus-visible non viene applicato:
C’è però un inconveniente: in uno scenario misto in cui apri il menu hamburger con un dispositivo di puntamento e poi provi a navigare con il tasto Tab, lo stile :focus-visible non è visibile sul primo link (anche se tecnicamente è focalizzato), quindi sembra che venga saltato. Non sono sicuro che esista una soluzione alternativa per questo…
Dato che sono (per lo più) un utente che usa il mouse, mi aspetto esattamente questo comportamento.
D’altra parte, a volte uso lo smartphone con il touchscreen: lo stesso problema si verifica anche lì; “Admin” viene evidenziato, indicando che potrebbe esserci qualcosa di importante nella sezione amministrativa che richiede attenzione.
Dall’argomento correlato sugli screen reader, vedo che sembra esserci la necessità di impostare in qualche modo il focus.
Sarei già soddisfatto del comportamento sopra menzionato per i puntatori.
Ho lo stesso problema.
Non credo che questo elemento abbia attualmente il valore UX che voi avevate in mente: abbiamo ricevuto immediatamente segnalazioni di bug al riguardo dal nostro forum. Il focus scompare quando si fa clic con il tasto destro in qualsiasi punto della finestra e c’è un doppio focus quando si passa il mouse sui pulsanti. Nel complesso, agli utenti sembra difettoso, soprattutto perché Discourse non impone questa selezione in nessuna altra vista.
Sarebbe meglio mostrare il focus della tastiera solo quando l’utente preme per la prima volta Tab, oppure solo quando l’utente ha utilizzato un’azione da tastiera per aprire il menu hamburger.
Puoi pubblicare uno screenshot di questo? Non ne ero a conoscenza.
Vedo lo stesso problema in Safari e Firefox (macOS); questo è anche menzionato nel post sopra:
Se ho capito correttamente questa funzionalità, dovrei poter aprire quel menu cliccando o premendo = e poi navigare con qualcosa (frecce direzionali?) e premere qualcosa (Invio?) per selezionare l’elemento evidenziato.
In Safari e Firefox su macOS, sia che apra il menu con un clic o con =, non riesco a navigare all’interno del menu. Le frecce su/giù spostano la pagina su e giù, mentre le frecce destra/sinistra non sembrano fare nulla di visibile.
Il tasto Tab sposta il focus su qualcos’altro, come un pulsante Mi piace in un post, e rimuove l’evidenziazione gialla dal menu. In Firefox, il tasto Tab prima ciclava correttamente tra gli elementi del menu mentre scrivevo questa risposta, ma ora non lo fa più; tra questi tentativi è stata chiusa una finestra in navigazione privata.
Osservo questi comportamenti sia qui su Meta che sulla mia istanza aggiornata a efbc2481d8 (tranne che in Firefox il tasto Tab funziona correttamente, cosa che ho visto solo qui).
Le frecce direzionali non dovrebbero fare nulla, ma tab e invio dovrebbero funzionare!
Quindi quando apri il menu con = e premi tab, non stai scorrendo gli elementi del menu? Sono su macOS e funziona come previsto in Safari, Firefox e Chrome, quindi è un po’ sconcertante!
Ho dato un’occhiata più da vicino a ciò che sta succedendo in generale e l’idea di utilizzare focus-visible che ho menzionato sopra non funzionerà.
Il problema è che il menu hamburger appare nel nostro HTML al di fuori del contenitore del pulsante del menu (il contenitore che ospita i pulsanti di ricerca, hamburger e utente). Ciò significa che il menu non è il successivo nell’ordine naturale di tabulazione. Per compensare, impostiamo focus sul primo elemento del menu utilizzando JavaScript. Questo ha l’effetto collaterale di evidenziare l’elemento (perché dobbiamo anche avere gli stili :focus).
Non credo che possiamo fare affidamento sul rilevamento della pressione di tab perché non è l’unica tasto utilizzata dagli screen reader per navigare, e interferiremmo con altre scorciatoie se catturassimo tutti i tasti premuti…
Posso pensare a due possibili soluzioni:
Spostare il menu nell’HTML in modo che appaia immediatamente dopo il pulsante che lo attiva. Questo potrebbe avere alcuni effetti collaterali sul layout.
Bloccare il focus all’interno del menu quando è aperto, ma non impostare il focus su un elemento specifico. Ciò significa che quando il menu è aperto, puoi solo tabulare i suoi contenuti e nient’altro nella pagina. Penso che questa sia probabilmente la soluzione preferibile…
Esatto. Per maggiore precisione, sto usando macOS 11.4 e Safari 14.1.1. Sto visualizzando Meta in una finestra di navigazione privata e la mia istanza in una finestra normale.
Devo aver commesso un errore nel mio test iniziale di Firefox: funziona come descritto da te se è attivata la preferenza di sistema “Usa la navigazione da tastiera per spostare lo stato attivo tra i controlli”, mentre passa al pulsante Mi piace nel modo che ho descritto in precedenza se è disattivata.
Posso passare in modo affidabile tra i due comportamenti attivando o disattivando quella preferenza di sistema, senza dover ricaricare la pagina in Firefox.
In Safari, invece, vedo che passa al pulsante Mi piace indipendentemente da quella preferenza di sistema, anche dopo aver ricaricato la pagina. Non ho ancora testato il riavvio di Safari dopo averla attivata.
Ho controllato anche Chrome: funziona come descritto da te, indipendentemente dalla preferenza di sistema.
Ho individuato la causa del mio problema in Safari. Ho notato che, a differenza di Chrome e Firefox, se clicco in qualche punto della barra dell’intestazione e premo il tasto Tab, non viene selezionato nessun elemento presente nell’intestazione.
Questo mi ha portato a scoprire questa preferenza in Safari, sotto la sezione Avanzate:
Sono quasi certo al 99% che sia l’impostazione predefinita con un’installazione pulita di Big Sur; non credo di averla modificata. Con questa preferenza attiva, il comportamento inizia a funzionare come da te descritto. Come suggerisce il testo sopra, funziona in questo modo anche quando si utilizza Option-Tab con la preferenza disattivata.
