A11Y: move heading role to parent tag to fix voice control (#30796)

The heading role on topic lists is desirable for screenreader users
because they can easily navigate from heading to heading.

Having this role on the link tag directly becomes problematic for Voice
Control users on Apple devices because unfortunately Voice Control
assumes that when given the role of a heading, it is not a link. This
makes it difficult to click.

This PR moves the heading role to the link's wrapper. This change allows
for heading-to-heading navigation for screenreaders, and also makes it
easier to click using Voice Control. The end result is that topic lists
are both navigable for screenreaders and Voice Control users.
This commit is contained in:
Kris 2025-01-15 12:53:05 -05:00 committed by GitHub
parent 34acc9fe54
commit adf098f21b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 2 additions and 6 deletions

View File

@ -55,7 +55,7 @@ export default class TopicCell extends Component {
@outletArgs={{hash topic=@topic}}
/>
<span class="link-top-line">
<span class="link-top-line" role="heading" aria-level="2">
{{~! no whitespace ~}}
<PluginOutlet
@name="topic-list-before-status"

View File

@ -17,8 +17,6 @@ export default class TopicLink extends Component {
<a
href={{this.url}}
data-topic-id={{@topic.id}}
role="heading"
aria-level="2"
class="title"
...attributes
>{{htmlSafe @topic.fancyTitle}}</a>

View File

@ -17,8 +17,6 @@ export default function topicLink(topic, args = {}) {
return htmlSafe(
`<a href='${url}'
role='heading'
aria-level='2'
class='${classes.join(" ")}'
data-topic-id='${topic.id}'>${title}</a>`
);

View File

@ -18,7 +18,7 @@
<td class='main-link clearfix topic-list-data' colspan="1">
{{~raw-plugin-outlet name="topic-list-before-link"}}
{{~plugin-outlet name="topic-list-before-link" outletArgs=(raw-hash topic=topic)}}
<span class='link-top-line'>
<span class="link-top-line" role="heading" aria-level="2">
{{~raw-plugin-outlet name="topic-list-before-status"}}
{{~plugin-outlet name="topic-list-before-status" outletArgs=(raw-hash topic=topic)}}
{{~raw "topic-status" topic=topic}}