WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 4 weeks ago

#29872 closed feature request (fixed)

Permalink Structure Tags buttons

Reported by: Apiweb Owned by: swissspidy
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Permalinks Keywords: has-ui-feedback has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description (last modified by jeremyfelt)

I think it would be interesting, in the customization of permalinks screen, display a box with all the available structures, where the user could drag and drop them.

With that, he would not need to open a new page, view the documentation and check what are the available structures. He could already build your own structure on the page by dragging and dropping.

I made a mockup:
http://i.imgur.com/25U4K5Y.png

Attachments (8)

29872-avail-tags.png (109.8 KB) - added by kpdesign 3 years ago.
Available tags span in Custom Structure option
29872.diff (2.2 KB) - added by kpdesign 3 years ago.
Add available tags span
29872.2.diff (3.6 KB) - added by swissspidy 13 months ago.
29872.3.diff (3.9 KB) - added by swissspidy 13 months ago.
29872.4.patch (4.2 KB) - added by joedolson 13 months ago.
Add ARIA announcement
29872.4.diff (5.6 KB) - added by swissspidy 13 months ago.
29872.5.diff (7.6 KB) - added by swissspidy 6 months ago.
29872.6.diff (3.8 KB) - added by swissspidy 3 months ago.

Download all attachments as: .zip

Change History (55)

#1 @SergeyBiryukov
3 years ago

  • Component changed from General to Permalinks

#2 @helen
3 years ago

Drag-and-drop is not a great starting point (touch, accessibility), but an autocomplete-y method could be interesting. Probably worth a small proof of concept plugin.

#3 @Apiweb
3 years ago

I thought if we used some drag-drop like the one used in the management of menus or widgets, it could work.

#4 @jeremyfelt
3 years ago

  • Description modified (diff)
  • Summary changed from Permainlink Structure Tags drag and drop to Permalink Structure Tags drag and drop

#5 follow-up: @GaryJ
3 years ago

I'd like to see the structures added to the contextual help, or a description span as a simpler first step before looking at something interactive. That alone with save people from having to go look for the documentation elsewhere.

@kpdesign
3 years ago

Available tags span in Custom Structure option

@kpdesign
3 years ago

Add available tags span

#6 in reply to: ↑ 5 @kpdesign
3 years ago

  • Keywords has-patch ui-feedback added

Replying to GaryJ:

I'd like to see the structures added to the contextual help, or a description span as a simpler first step before looking at something interactive. That alone with save people from having to go look for the documentation elsewhere.

I thought about adding a list of available tags to the contextual help, but there is a chance that users would not find them there (issues with Admin Help discoverability).

Deep-linking to a contextual help tab isn't possible now (see #21273), so I opted to add a span below the Custom Structure option to show the available tags. I moved the Codex link to the Available Tags text in this span, and removed the reference to it in the opening section.

This could be a good first step, with possibly adding auto-complete later if someone works up a small proof-of-concept plugin, as @helen suggested.

29872.diff attached.

Available tags span in Custom Structure option

#7 @joedolson
3 years ago

  • Focuses accessibility removed

#8 @swissspidy
23 months ago

  • Focuses javascript administration removed
  • Keywords needs-patch added; has-patch removed

I'd say listing available tags with a click handler to easily add them to the text input is doable. No drag & drop because of the mentioned reasons.

#9 @karmatosed
13 months ago

I'd +1 to not having drag and drop but having suggested tags is a better approach.

#10 @karmatosed
13 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

@swissspidy
13 months ago

#11 @swissspidy
13 months ago

  • Focuses accessibility added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to Future Release

In 29872.2.diff:

  • Add a (filterable) list of available tags below the input field, including text for screen readers.
  • Uses buttons for improved keyboard navigation and focus styling
  • When clicking on a tag, the "Custom Structure" radio button is checked automatically (if not already) and the tag gets added to the input field, including leading and trailing slashes.

#12 @afercia
13 months ago

Hello :) Few things noticed so far:

  • the whole feature should be hidden when JS is off
  • adding type="button" to the buttons prevents the form from being submitted even when JS is off and would allow to remove e.preventDefault();

Uses buttons for improved keyboard navigation and focus styling

Buttons would need some specific CSS styling, not all browsers display a native focus style, depending also on the OS

@swissspidy
13 months ago

#13 @swissspidy
13 months ago

Thanks @afercia!

I somehow always forget about type="button" :-)

29872.3.diff adds that in addition to improved focus styling. The list is hidden if JS is disabled.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


13 months ago

#15 @afercia
13 months ago

  • Summary changed from Permalink Structure Tags drag and drop to Permalink Structure Tags buttons

#16 @joedolson
13 months ago

This could make creating custom permalink structures easier, but if we do this, we'll need to make sure that it's clear to screen reader users that something has happened when they click the button.

We discussed this in the accessibility team meeting, and agreed that there are a few specific questions to address:

1) When a button is clicked, what should be announced by a screen reader? Should it announce the entirety of the new custom format, or just what element has been added?

2) Should focus change when a button is clicked?

My opinion is that clicking the button should announce something along the lines of 'post ID added to permalink', and no focus change.

@joedolson
13 months ago

Add ARIA announcement

#17 follow-up: @joedolson
13 months ago

Patch added that announces addition of structure to permalink structure.

Other issues to consider:

1) Ability to place cursor between items and insert new structure in that location instead of end
2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?

@swissspidy
13 months ago

#18 in reply to: ↑ 17 @swissspidy
13 months ago

Replying to joedolson:

Other issues to consider:

1) Ability to place cursor between items and insert new structure in that location instead of end
2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?

Added in 29872.4.diff. It's even possible to replace the selected text in the input field. Slashes are only added when needed. Adding the same structure tag twice doesn't work either. I also cleaned up the HTML a bit to make it more readable.

#19 @swissspidy
9 months ago

  • Milestone changed from Future Release to 4.8

#20 @jbpaul17
6 months ago

  • Keywords needs-testing added

This needs a review and an owner if its going to land in 4.8.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


6 months ago

This ticket was mentioned in Slack in #accessibility by swissspidy. View the logs.


6 months ago

#23 @afercia
6 months ago

I think this is an improvement that would help users enter the custom structure tags and I'd second introducing this feature in core. It would be great to refine some details and make the buttons as much easy to use as possible, as well as error-safe. Some considerations off the top of my head:

Selection
When tabbing through the form fields, the input field content will be selected. Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

Description
I'd add a short description of what the buttons do after "Available tags:", something like: Click the buttons below to add custom structure tags surrounded by the percentage sign. (with some better wording).

For screen reader users
I'd consider to avoid screen readers announce the percentage signs, this would require one more string to represent the tag without the % that can probably be generated programmatically. The generated HTML instead of, for example:

<button type="button" data-added="%year% added to permalink structure">
	<code>%year%</code><span class="screen-reader-text">The year of the post, four digits, for example 2004</span>
</button>

could be something like:

<button type="button" data-added="year added to permalink structure"
	aria-label="year (The year of the post, four digits, for example 2004)">
	<code>%year%</code>
</button>

Already used tags
When a tag is already present in the structure, the related button does nothing and that's correct. However, there's nothing that can inform users the button won't produce any effect. It gets a bit trickier but in this case the button should announce something like: aria-label="year (Already used in the Custom Structure". Maybe, the buttons representing already inserted tags should also look differently.

Visuals
I'm not a designer, so I'd ask to real designers, however I was wondering if there's a good reason to style these buttons with the styling usually reserved to <code> elements. After all, they're buttons: users should understand immediately what they are, so maybe style them as standard buttons?

#24 @afercia
6 months ago

Minor things:
at least one -> at least once. ?

Some "explanation text" end with a period, some don't.

@since needs to be updated

#25 @afercia
6 months ago

Safari doesn't expose a list as a list to assistive technologies when it's styled with list-style: none;. This is a particularly annoying Safari "feature" since VoiceOver won't announce "list" or the number of items in the list. There's a workaround, it's redundant, the W3C validator will produce a warning when it's used, but it doesn't harm anything: add role="list" on the... list.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

#27 @afercia
6 months ago

  • Owner set to swissspidy
  • Status changed from new to assigned

#28 @swissspidy
6 months ago

I'm working on a refreshed patch to address the above feedback.

Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

I found this feature to be handy when you want to replace existing tags or add yours at some specific position. For example, when you put the cursor to the beginning of the input and click on a button, the tag will be inserted at the beginning. I added that based on earlier feedback by @joedolson:

1) Ability to place cursor between items and insert new structure in that location instead of end

However, I can remove that selection feature if it doesn't make much sense.


When a tag is already present in the structure, the related button does nothing and that's correct. However, there's nothing that can inform users the button won't produce any effect. Maybe, the buttons representing already inserted tags should also look differently.

I have that "Already used" thing working, but I was wondering if we should just disable a button when the tag was inserted. VoiceOver doesn't announce the buttons anymore in that case and you already have the different styling. Also, @joedolson said this earlier:

2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?


at least one -> at least once. ?

Where did you see that, @afercia?


users should understand immediately what they are, so maybe style them as standard buttons?

Makes sense.

#29 @afercia
6 months ago

Yep I've seen the tag is inserted at the previous cursor insertion point :) However, since the "select all" text in the field is the default behavior when tabbing through the fields, that could lead to unexpected results. I'm not sure how to solve this though.

"Already used"
Hm, maybe use "aria-pressed" on a button representing an already used tag? Then, clicking again the button should remove the tag. aria-pressed conveys that the control works like a "toggle", so maybe it could work. /cc @joedolson

in a comment :)
// See if the permalink structure input field has had focus at least one

@swissspidy
6 months ago

#30 @swissspidy
6 months ago

29872.5.diff addresses most of that feedback.

The buttons now look better and are actually toggles.

Regarding this:

Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

To solve this issue it's probably the easiest to not select the whole text when tabbing.

#31 @swissspidy
6 months ago

Here's how the latest patch looks like:

https://cldup.com/z7Sf5-Yu6i.png

#32 @swissspidy
5 months ago

  • Milestone changed from 4.8 to 4.8.1

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#36 @afercia
3 months ago

  • Milestone changed from 4.8.1 to 4.9

4.8.1 will be a bug-fix maintenance release, so no new features should be introduced. Punting for now.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#38 @swissspidy
3 months ago

  • Keywords has-screenshots added; needs-testing removed

#39 @swissspidy
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 41182:

Permalinks: Add buttons for the available structure tags to the admin UI.

Often times, it can be confusing to set a custom permalink structure. One has to double-check the documentation, make
sure to correctly insert the structure tag, and hope not to break their site.

With this addition, the available structure tags are being displayed as a list of easily clickable buttons that can be
used to insert tags to the custom structure input field and to remove them again.

Props kpdesign, swissspidy, joedolson, afercia.
Fixes #29872.

#40 @swissspidy
3 months ago

In 41183:

Permalinks: Remove unnecessary semicolon after [41182].

See #29872.

#41 @johnbillion
3 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

When clicking on one of the common settings (eg. "Day and name"), the highlighted tag buttons aren't updated to correctly reflect their state.

@swissspidy
3 months ago

#42 @swissspidy
3 months ago

  • Keywords has-patch added; needs-patch removed

Thanks for pointing this out @johnbillion!

In 29872.6.diff:

  • Deprecate options_permalink_add_js() and move that JS logic to the same place as the one introduced in [41182].
  • Call changeStructureTagButtonState() on the buttons when clicking on one of the common settings.

#43 @afercia
4 weeks ago

@swissspidy anything left here? planning to commit?

#44 @swissspidy
4 weeks ago

I hoped somebody woukd test before committing but I can proceed here to have a bigger audience for testing

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 weeks ago

#46 @afercia
4 weeks ago

I'd say ship it! 🇨🇭 Beta is the right place for final testing.

#47 @swissspidy
4 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 41598:

Permalinks: Change structure tag button state more reliably.

Changes the highlighted tag buttons accordingly when selecting one of the commong permalink settings.

Deprecates options_permalink_add_js() as that JavaScript isn't added inline anymore.

Fixes #29872.

Note: See TracTickets for help on using tickets.