Permalink and its Edit button could be clearer

[karlgroves]

Permalink and its Edit button could be clearer

• Severity: Low
• Affected Populations:
  • Blind
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Title Block

Issue description

The "Permalink" section of the Title Block has an "Edit" button
which is not semantically associated with the permalink except by
context. Similarly, the permalink itself has the word "Permalink:"
before it, but this is not explicitly associated either.

Although association by context is generally sufficient for content like
this, it would nevertheless be helpful to add a more descriptive label
to the button, and to describe the fact that the link is a permalink
within its screen reader text.

These changes would help to make the meaning clearer to screen reader
users, especially those with a cognitive disability.

Issue Code

    <span class="editor-post-permalink__label">Permalink:</span>


    <a target="_blank" class="..." href="http://142.93.114.99/?p=19" rel="external noreferrer noopener">


        http://142.93.114.99/2019/01/31/gutenberg-editor-demo-edited-for-output-scoping/‎


        <span class="screen-reader-text">(opens in a new tab)</span>


        ...


    </a>


    <button type="button" class="...">Edit</button>

Remediation Guidance

Add an aria-label to the "Edit" button which explains what it does
more clearly, and amend the .screen-reader-text of the permalink to
do the same.

Recommended Code

    <span class="editor-post-permalink__label">Permalink:</span>


    <a target="_blank" class="..." href="http://142.93.114.99/?p=19" rel="external noreferrer noopener">


        http://142.93.114.99/2019/01/31/gutenberg-editor-demo-edited-for-output-scoping/‎


        <span class="screen-reader-text">(permalink opens in a new tab)</span>


        ...


    </a>


    <button aria-label="Edit permalink" type="button" class="...">Edit</button>

Relevant standards

• 1.3.1 Info and Relationships
  (Level A)
• 3.3.2 Labels or Instructions
  (Level A)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-87 in Tenon's report

[afercia]

Totally agree. The current permalink UI has been discussed several times and it was mentioned as "candidate for removal" a few times, see for example #10996 (comment). Previously: #5494

Related: #12031

[melchoyce]

Screenshot from full report:

[mapk]

Design team talked about this in today's triage. Let's implement the suggested changes.

1. Add an aria-label to the "Edit" button.
2. Amend the .screen-reader-text of the permalink to explain clearly what it does.

I'm removing the needs design feedback label and adding needs dev.

[afercia]

As previously commented, these changes are very welcome. However, this UI has other important issues, starting from its placement in the DOM and the tab order as outlined in #5494.

Either these other issues should be solved or this UI should be finally removed in favor of the permalink UI in the sidebar.

[mapk]

Good point @afercia. I think we can get this work completed first, and continue discussion and work around #11553 which involves possibly moving the permalink to the Inspector.

[afercia]

Fine, then I'm going to reopen #5494.

[Soean]

The permalink was removed from the title in #21099. Now it's only in the sidebar. Can we close this issue?