Problem/Motivation

The URL alias page (/admin/config/search/path) truncates the alias to 47 characters and three elipsis. This number is far too small and makes even a small site difficult to manage because all aliases in the row results look the same. When trying to manage long aliases and trying to resolve the dreaded '-0' pattern, no amount of truncation is helpful

Steps to reproduce

  1. Go to /admin/config/search/path
  2. filter for any subsection of your site that has decent length of aliases
  3. Notice that you can tell one page from the other because the truncation makes them look the same
  4. Get sad because this interface is not helpful at all.

Proposed resolution

(patch #23) First suggestion is to remove truncation altogether. There is not really a problem that the truncation solves.

Other options are to:
Truncate at the beginning rather than the end. - Still obscures data needed to fill purpose of the UI.

Keep the beginning and the end, but put elipses in the middle. - Still obscures data needed to fill purpose of the UI.

Remaining tasks

User interface changes

Before
Alias truncation makes them all look the same.

After
untruncated aliases

API changes

None

Data model changes

None

Release notes snippet

Issue fork drupal-3351638

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

swirt created an issue. See original summary.

swirt’s picture

Status: Active » Needs review

I posted a PR.

swirt’s picture

StatusFileSize
new1.34 KB

Uploaded a patch file in case anyone needs an immutable version.

Status: Needs review » Needs work

The last submitted patch, 4: 3351638-4.patch, failed testing. View results

swirt’s picture

I am working on fixing the test failures.

I did some digging into the history and found that this truncation came from this issue https://www.drupal.org/project/drupal/issues/86461 which arbitrarily picked 50 characters for the truncation by the first person attempting to patch it.

There was no discussion as to how useless this would render the UI and no discussion of alternative like CSS to solve the problem instead of hiding the relevant data completely. The issue itself did suggest truncation OR wrapping but it was never discussed and truncation was the first patch that came in.

swirt’s picture

Status: Needs work » Needs review
StatusFileSize
new2.77 KB

This patch adjusts the test to not look for truncation.

swirt’s picture

swirt’s picture

Issue summary: View changes
skyriter’s picture

I tested this, and it's working in my environment.

smustgrave’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

Can see the problem with not being able to see the URLs

I don't think it should be an issue to remove.

Updated IS with the solution that was chosen.

swirt’s picture

Issue summary: View changes
StatusFileSize
new71.9 KB

Thank you @skywriter and @smustgrave

Just to be sure that this patch does not make a breaking change, I created a 255 char long alias. It displays just fine in the list of aliases

long alias in the list of aliases without breaking things

larowlan’s picture

Category: Bug report » Task
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs usability review

So with some git archaeology 🤠 I traced this back to #86461: Truncate long paths and path aliases on admin/build/path - yes a 5 digit NID from 11 years ago where we made this change intentionally.

So now we're directly reversing that.

The motivation given there was 'it looks bad and can break template layout'

I think we should put this to the usability team to decide if the decision we made 11 years ago was the wrong one or not.

larowlan’s picture

Crediting myself as the git archaeology required going back to before we even had controllers.

swirt’s picture

Issue summary: View changes
StatusFileSize
new31.84 KB

Thanks @larowlan. Glad to see you came to the same archeological roots that I called out in comment #6.

That issue made a lot of reference to the method of truncation and what tests were needed, but little was done to address concerns like

@Dries saying

... Not sure this is the proper solution.

@David_Rothstein : saying

but can someone clarify why we are choosing 50 characters as the number to truncate at? That seems like an awfully small number.

That went unanswered and the 50 count just came from the original patch in the thread.
Until @Poker_10 commented a decade later

3. Reopen this for D9 to change the truncated length from 50 characters to another number

The problem is, the purpose of the Alias UI is to help you manage aliases. By truncating them to any level, we get in the way that purpose. In its current state, managing the aliases is like a child's game of memory.

Which of the 27 aliases that all look identical is the one I really want?
Click.
Not that one.
Click.
Not that one either.
Click.
Nope.
{frustration builds}
Click.
Yay, I finally found the right one.

The way I read the thread of the original issue, the usability of the page was never considered, or at least not discussed. We took a usable interface and made it less useful but slightly more pretty.

I also think there are Accessibility concerns introduced in the original issue too because the link title was made the same as the next column (the system path). So anyone using screen readers is presented with not enough information (due to the truncation) and they also get to hear the system path read twice back to back.
system path as alias link title and its own column
Listen to it with a screen reader, it is annoying.

That is not to say that this issue does not need usability review. I agree that it does and by essentially rolling back #86461 we are undoing the usability review that was never done on that issue.

mgifford’s picture

Issue tags: +Accessibility

Interesting to see that the original issue was started in 2006, before the iPhone was released. The goal at the time was "When working with small-width templates, the long paths can destroy the nice look/layout of the template." Thanks for doing the research on this @swirt & @larowlan.

This does look like an accessibility problem currently. I haven't looked at the source code of this in a long time, however taking away the truncation and providing the whole link should resolve the accessibility problems with these links.

mgifford’s picture

Issue tags: +wcag244
mgifford’s picture

Issue tags: +atag
swirt’s picture

Sample html without truncation

<td><a href="/2021-post-911-gi-bill-chapter-33-rates" title="/node/39676">/2021-post-911-gi-bill-chapter-33-rates</a></td>
<td><a href="/2021-post-911-gi-bill-chapter-33-rates" title="/node/39676">/node/39676</a></td>
maggiewachs’s picture

+1 for removing the title attribute that was added for the purpose of showing the full path. Titles are best suited for situations where link text isn't available. In this case, the full text should be linked, making the title attribute redundant (and possibly noisy for screen readers).

swirt’s picture

Based on what maggiewachs has identified, it sounds like we should be doing this

<td>
  <a href="/2021-post-911-gi-bill-chapter-33-rates">/2021-post-911-gi-bill-chapter-33-rates</a>
</td>
<td>
  <a href="/node/39676">/node/39676</a>
</td>

This includes:

  1. Removing the title attributes from both alias link and system path link.
  2. Making the system href use the system path rather than the alias.*

* Yes this system path should lead to the alias version via a rewrite but sometimes there are redirects that interfere so this allows testing that in the UI.

swirt’s picture

StatusFileSize
new4.89 KB

Here is an immutable patch file from the PR.

swirt’s picture

StatusFileSize
new163.76 KB
new119.66 KB

Proof of life

 <tr class="odd">
        <td><a href="/2021-post-911-gi-bill-chapter-33-rates">/2021-post-911-gi-bill-chapter-33-rates</a></td>
        <td><a href="/node/39676">/node/39676</a></td>
        <td class="priority-medium">English</td>
        <td>  <div class="dropbutton-wrapper"><div class="dropbutton-widget"> [Removed from this paste] </div></div></td>
</tr>

Example of untruncated output.
untruncated aliases

And here is the same output on a much narrower screen

untruncated narrow screen.

larowlan’s picture

Version: 9.5.x-dev » 10.1.x-dev

Removing my credit because I missed the comment in #6

@swirt could you reformat your link using the [#nid] format so it gets updated to emit the title?

Sounds like we have broad buy in here, next step is to visit the #ux channel in Slack and put this in the bot generated agenda reminder so the kind folks there can look at it in their next meeting. Before doing so, making sure we have before and after shots in the issue summary

Moving to 10.1.x as we don't commit tasks to 9.5.x

If you could make the argument that this is a bug it would be eligible to backport

swirt’s picture

Issue summary: View changes
swirt’s picture

Thanks @larowlan.

Crediting @larawlan because he gave great guidance on how to move this along. ;)

Added before and after screen caps to original.

Posted in the #UX channel.

I would call it a "Bug" because the Alias UI is intended to make make it possible to manage aliases effectively, and when we can't see the alias variations in a meaningful way, it prevents me from doing what I need to do.

swirt’s picture

Issue summary: View changes
swirt’s picture

Issue summary: View changes
swirt’s picture

swirt’s picture

This was presented at the #3350284: Drupal Usability Meeting 2023-04-07
That issue will have a link to a recording of the meeting.

For the record, the attendees at today's usability meeting were @benjifisher, @mgifford, @rkoller, @simohell, and @swirt.

swirt’s picture

Issue summary: View changes
swirt’s picture

Discussion on the call touched on whether this was fixing a bug, or just an improvement.
There was agreement that it borders on these bug criteria

  • Incorrect or misleading user interface text. - This is considered because the system path link was href to the alias and not the system path.
  • Usability issues that prevent people from using functionality (as if it didn't work at all). - Not fully useless as there is a workaround for sighted users by hovering over the truncated alias and have the browser surface the actual destination.
  • Accessibility issues that prevent people from using functionality (as if it didn't work at all) - screen readers would not reveal the destination of the url so non-sighted users could not detect the actual alias by hovering over the truncated link.
swirt’s picture

Issue tags: +bug
smustgrave’s picture

Category: Task » Bug report
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs usability review

Changing to a bug per #34

Sounds like from the UX meeting there is nothing that needs to be fixed. Think this is good for committer review.

skyriter’s picture

I just tested the patch in our PR environment. The URLs are no longer truncated and are thus visually distinguishable from each other.

swirt’s picture

Thank you both for reviewing and testing.

larowlan’s picture

+++ b/core/modules/path/src/PathAliasListBuilder.php
@@ -170,10 +170,13 @@ public function buildRow(EntityInterface $entity) {
+    // We want the unaliased system path.
+    $system_url = Url::fromUri("base:{$path}");
     $row['data']['path']['data'] = [
       '#type' => 'link',
       '#title' => $path,
-      '#url' => $path,
+      '#url' => $system_url,

Why was this change needed?

swirt’s picture

There were two reasons for this.
1. Having two visually different links that were the same destination in adjacent columns was misleading especially to visually impaired users since the links sound like different urls due to the anchor text, but are in fact the same href destination. (An accessibility concern)

2. There are times when a system link does not end up resolving to it's alias due to a redirect or some other rewiring. This allows the ability to verify where the actual system link resolves

larowlan’s picture

Should we move those changes to a different issue to have a separate discussion?

swirt’s picture

@larowlan That aspect was discussed specifically on the Drupal Usability Meeting

Incorrect or misleading user interface text. - This is considered because the system path link was href to the alias and not the system path.

It received positive review from all in attendance. I tried to reference the meeting transcript or the recording but they have not been added yet #3350284

My vote would be not to separate it out as then this UI will still have have a significant accessibility issue.

larowlan’s picture

Ok, I'll wait for the recording and watch that - thanks

larowlan’s picture

Issue tags: -bug
quietone’s picture

Title: Truncation of alias makes Alias UI unhelpful » Remove truncation of path alias

Trying for a better title.

poker10’s picture

@larowlan Seems like the Drupal Usability Meeting recording was published today.

bnjmnm’s picture

Status: Reviewed & tested by the community » Needs work

Due to the scope expansion that @larowlan identified in #39, one of the following changes needs to happen for this to be committable:

  1. Update the issue summary so the issue scope includes the additional changes as mentioned in #39. Much of this can probably repurpose the motivations explained in #42. Note that I personally would not commit this version as I feel they are unrelated issues that happen to be in close proximity. I'd also be fine if another committer was OK with the expanded scope.
  2. Remove the changes pointed out in #39 and open a followup. This is my preference as it contains the issue scope so the commit-worthiness is clear and basically an unqualified improvement.

And I hope this additional process isn't too annoying. The rationale for the additional changes is good ones and I'd like to see those changes. The benefits to containing the scope of an issue are less immediate, but become more apparent later. For example, if accessibility concerns are brought up and someone demands a revert (this happens enough that it's example-worthy), we wind up losing the no-truncation benefit due to concerns that are unrelated to it.

swirt’s picture

Sounds good. I created #3362007: Make system path column more accurate and will break up this patch into two patches.

swirt’s picture

Status: Needs work » Needs review

I updated the MR to remove the use of the actual system path. The system path is back the way it was, now only with the truncation removed.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bnjmnm’s picture

Status: Needs review » Reviewed & tested by the community

Thanks for the flexibility @swirt, this looks ready to me.

For additional assurance this is a good idea, I messed with this at different widths and when the viewport is narrow enough to cause unwanted vertical scrolling, the experience really isn't improved with the truncation. Perhaps slightly less horizontal scrolling is needed, but it is still needed. That's a larger problem to be addressed in #3068696: Tables overflow on mobile

lauriii made their first commit to this issue’s fork.

  • lauriii committed 9daaabee on 11.x
    Issue #3351638 by swirt, lauriii, larowlan, mgifford, bnjmnm, smustgrave...
lauriii’s picture

Version: 11.x-dev » 10.1.x-dev

Committed 9daaabe and pushed to 11.x. Thanks!

Leaving open for potential 10.1.x backport.

  • lauriii committed 2368fcf9 on 10.1.x
    Issue #3351638 by swirt, lauriii, larowlan, mgifford, bnjmnm, smustgrave...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Decided to backport to 10.1.x with a +1 from @longwave.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.