ARIA label for More link

Added a patch for 1.x-dev to add some accessibility options, but I did not write tests for it. Also included a patch for 8.x-1.2 in case someone needs it (like me).

Changes might be slightly out of scope and not exactly what was requested (aria-label), but could be amended to have it if necessary.

Change list:

• Added custom replacement patterns to add a screen-reader-only span around the More link text.
• Added a field to customize the class on the screen-reader-only span.
• Added two checkbox options for accessibility properties on the link: Add aria-hidden & role=presentation, and disable tabbing.
• Option 1 (aria-hidden + role=presentation): Adds the aria-hidden=true and role=presentation properties to the More link.
• Option 2 (disable tabbing): Adds the tabindex=-1 property to prevent keyboard tabbing.
• Added XSS filtering to More link text because we need to support span elements, so we need to filter out bad html.
• Added token replacement options using Drupal Tokens in the More link text, allowing you to add the Node title field. I was not entirely sure how to support other entities (paragraphs, etc.) and I ran out of time to address this, so feel free to chip in or suggest and I can amend the patch.
• More text is properly translated BEFORE custom replacement patterns and tokens to make it easier to translate in the interface.

Let me know if I missed anything critical or if something needs to be added/removed to get this rolled into the module. It's quite possible I made this patch too complex, but I was trying to cover all avenues of translating text (and how sentences aren't always as straight forward in other languages), using different tokens for text replacement, and using different classes to hide for screen-readers.

Oops, the 8.x-1.2 patch didn't apply properly for some reason.

I'll get this 8.x-1.2 patch right, I swear... Turns out the patch was replacing the other multilingual patch from a different issue, which is why it was failing in composer for me. This 1.2 patch works correctly.

Rerolling for 1.3 and newest 1.x-dev.

Does anyone have suggestions on improving this so we can get some accessibility options committed?

I think the sr-only token replacement is too complex. I wonder if it would be smarter to just have two separate fields:

1. one for the More text
2. one for the SR-only More text

Then we would just use appropriate elements to prevent screen readers from reading both.

Thoughts or am I the only one experiencing this?

This patch is working great! Recently on a project, I updated my search results to print out the node title as a linked title, but we also provided a Read more link. But, since both the title and read more were links to the same page, the links were redundant, but still wanted.

With this patch, if the read more link was displayed, it allowed me to add the "aria-hidden" attribute to the read more like, as desired. I think this patch is RTBC.

Hi there, this works great! Do we know when this will be incorporated into the main branch? Thanks!

First off, huge thanks to @PaulDinelle for the excellent work here! Smart Trim's 'more' links definitely need work in terms of accessibility.

One concern with the current approach — I worry that the addition of the 'aria-hidden' and 'disable tabbing' options could lead to bad practice. While I like the idea of reducing the number of redundant links for screen reader users, aria-hidden should not be used on focusable elements — which means 'disable tabbing' becomes pretty much required to make the link not focusable. But that removes visible, normally-focusable links from the tab order, which could be problematic/confusing for keyboard-only users. Personally, I'd argue for removing those options.

Lately I've started using 'aria-label' to add appropriate context to links instead of hiding text with CSS. I created an issue with that alternative approach at #3194955: Improve more link accessibility with aria-label attribute. I didn't want to muddy the water here, since this one is RTBC. Hopefully the maintainers will choose a path to improve accessibility and merge one or the other soon!

I started following this issue for aria-label, and I think @justcaldwell makes a good argument. It could make for some interesting discussion, in any case. :)

Thanks, @othermachines. Also, I just re-read the issue description and realized it actually suggests 'aria-label' as a solution. So, maybe it would've been more appropriate to post my patch here instead of creating a new issue. Shame on me for not reading more closely. :)

Just doing a little tag tidying. Nice work everyone!!