[wp-trac] [WordPress Trac] #29872: Permalink Structure Tags buttons

[WordPress Trac]

#29872: Permalink Structure Tags buttons
-------------------------------------------------+-------------------------
 Reporter:  Apiweb                               |       Owner:
     Type:  feature request                      |      Status:  new
 Priority:  normal                               |   Milestone:  4.8
Component:  Permalinks                           |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-ui-feedback has-patch needs-     |     Focuses:  ui,
  testing                                        |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 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?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/29872#comment:23>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform