Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fonts Library: Replace modal dialog sub-views with disclosure patterns #62977

Open
Tracked by #60528
afercia opened this issue Jun 28, 2024 · 0 comments
Open
Tracked by #60528

Fonts Library: Replace modal dialog sub-views with disclosure patterns #62977

afercia opened this issue Jun 28, 2024 · 0 comments
Labels
[Feature] Font Library [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jun 28, 2024

Description

In #54431 many accessibility specialists agreed that a disclosure pattern would be a clearer, more efficient pattern for the fonts management modal dialog content, instead of the current sliding sub-view panels. That feedback went lost, in a way, and I think it's worth reconsidering improvements to the fonts managemetn flow;

As I see it, there are a few inefficient and unclear aspects that could be improved.

  • When opening the modal dialog by clicking one of the listed installed fonts, it is not clear that the modal dialog content actually shows a sub-view with the details of that specific font.
  • To go back to the main view of the fonrs library, there's only a small, a little undiscoverable, 'Back' button.
  • The only indication that hte UI is actually showing a sub-view is the left chevron arrow and the title of the edited font.

Screenshot:

Screenshot 2024-06-28 at 15 02 58

  • Each time users want to go to the main panel or. vice-versa. go from the main panel to a specific font sub-view they have to click, wait for the sliding animation to complete, do their edits, click back, wait for the sliding animation to complete, maybe click another font to edit, wait for the sliding animation to complete and so on and on.
  • This interaction appears to be unnecessarily complex ad inefficient.

Intead, a disclosure pattern could drastically simplify things. Basically, there wouldn't be sub-views any longer.
The main view of the Library tab would basically be an accordion with items that expand / collpse to reveal / hide the font variants.

As far as I can tell, the only concern that was rasied in #54431 with regards to a disclosure pattern is that the fonts list and each font variants could be long. I'm not sure this would be a big concern because if the content is very long users would have to scroll the modal dialog content anyways, even with the current sub-vew UI.

One more advantage of removing the sub-views in favor of a main panel that uses the discolosure pattern would be making more clear what happens when opening the modal dialog,
Right now:

  • Clicking the 'Manage fonts' button opens the main view of the Library tab in the modal dialog.
  • Clicking a specific font opens the related sub-view of the Library tab in the modal dialog.
  • This different behavior isn't immediately clear.
  • Simplifying the UI to use only one main view would make things clearer and more predictable.
  • Clicking a specific font could just open the main view with the related font disclosure pattern expanded.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Feature] Font Library labels Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Font Library [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant