WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 weeks ago

#29872 assigned feature request

Permalink Structure Tags buttons

Reported by: Apiweb Owned by: swissspidy
Milestone: 4.8.1 Priority: normal
Severity: normal Version:
Component: Permalinks Keywords: has-ui-feedback has-patch needs-testing
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 (7)

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 9 months ago.
29872.3.diff (3.9 KB) - added by swissspidy 9 months ago.
29872.4.patch (4.2 KB) - added by joedolson 9 months ago.
Add ARIA announcement
29872.4.diff (5.6 KB) - added by swissspidy 9 months ago.
29872.5.diff (7.6 KB) - added by swissspidy 6 weeks ago.

Download all attachments as: .zip

Change History (40)

#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
2 years ago

  • Focuses accessibility removed

#8 @swissspidy
19 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
9 months ago

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

#10 @karmatosed
9 months ago

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

@swissspidy
9 months ago

#11 @swissspidy
9 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
9 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
9 months ago

#13 @swissspidy
9 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.


9 months ago

#15 @afercia
9 months ago

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

#16 @joedolson
9 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
9 months ago

Add ARIA announcement

#17 follow-up: @joedolson
9 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
9 months ago

#18 in reply to: ↑ 17 @swissspidy
9 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
5 months ago

  • Milestone changed from Future Release to 4.8

#20 @jbpaul17
7 weeks 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.


7 weeks ago

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


7 weeks ago

#23 @afercia
7 weeks 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
7 weeks 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
7 weeks 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.


7 weeks ago

#27 @afercia
7 weeks ago

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

#28 @swissspidy
7 weeks 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
7 weeks 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 weeks ago

#30 @swissspidy
6 weeks 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 weeks ago

Here's how the latest patch looks like:

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

#32 @swissspidy
6 weeks ago

  • Milestone changed from 4.8 to 4.8.1

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


3 weeks ago

Note: See TracTickets for help on using tickets.