feat: [A11y] Add a button to skip to web widget #440

smansouri · 2023-10-05T16:11:38Z

Description

This PR adds a button to skip to web widget using keyboard navigation.
The last commit is to make the skip navigations links to not change color after clicking as this was requested from accessibility team.
The js code checks if the widget doesn't exist after 500 ms then it hides the skip button but I had to add a timeout since the widget is loaded after some delay. There might be some slow widgets that load after 500ms and then the skip button is not rendered or we can increase the delay to 1s to decrease this chance.

Screen.Recording.2024-01-08.at.12.57.23.mov

Jira: https://zendesk.atlassian.net/browse/GS-2485

Checklist

📗 all commit messages follow the conventional commits standard
⬅️ changes are compatible with RTL direction
♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
📝 changes are tested in Chrome, Firefox, Safari and Edge
📱 changes are responsive and tested in mobile
👍 PR is approved by @zendesk/vikings

jgorfine-zendesk

Hi @smansouri, thanks for doing this! Caught a couple of typos.

src/navigation.js

templates/header.hbs

smansouri · 2023-10-25T07:28:09Z

templates/header.hbs

@@ -1,4 +1,5 @@
 <a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>
+<a class="skip-to-chat-widget" tabindex="1" href="#launcher" >{{t 'skip_to_chat'}}</a>



The string is "Skip to Chat" https://github.com/zendesk/help_center/blob/main/config/locales/translations/help_center.en.yml#L6830

@zendesk-lzingarelli @jgorfine-zendesk I understand the suggestion to use Skip to chat is to make it more understandable for users. However, the web widget can provide other functions besides chat. From the docs, a user can:

Search help center articles for immediate self-service.

Submit a support request using a contact form.

Request a callback, or view a phone number that they can call instead.

Start a live chat with an agent.

It's also possible to configure the widget to not provide a chat, in which case this string will be misleading. Could we reconsider it?

Currently, the web widget renders with a title with a Opens a widget where you can find more information value. From that perspective, wouldn't it be consistent if we use Skip to widget instead?

I had added a string for skip to Web Widget before. Is that ok or you think it should be widget and not have web.

For some reason the translation for skip_to_web_widget is not found, although the translations were merged long time ago in HC

I think you also need to add the string to the I18nKeysMapping hash used by the t helper

Thanks I made a PR https://github.com/zendesk/help_center/pull/28668

bence-toth

LGTM 🙌

anpa

Thanks for working on this Sara and sorry for the delayed review 🙈

I added some comments as I have some concerns with this solution. Please let me know what you think or if you'd like to go through the comments together.

I'd also like to ask @zendesk/emu to review this PR as owners of the web widget EUX.

anpa · 2023-11-01T15:11:22Z

src/navigation.js

+    if (!chatWidget) {
+      skipButton.style.display = "none";
+    }
+  }, 500);


Since the theme does not have control on the markup and behaviour of the widget, this logic creates some coupling between the widget and the theme. For example, this logic will break:

if the web widget changes its markup and does not render an iframe with launcher as id;

if the web widget changes its logic so it takes longer than 500ms to render these elements;

For this reason, I suggest relying on the public API of the widget as I believe that would be a more stable and robust solution. If a widget is present, there should be a zE function defined in the window object.

So in order to check if the widget is present, we could do the following:

if (window.zE) { // there is a widget } else { // there is not a widget }

Then, a Help Center can have 2 types of widgets: classic and messenger.

Messenger seems to support zE('messenger', 'open') to open the widget (docs).

Classic seems to support zE('webWidget', 'open') to open the widget (docs).

So we could use a logic like this, to open the widget after clicking the button:

const skipToWidgetButton = document.querySelector("#skipToWidget"); if (window.zE) { // web widget is present, add logic to open both the classic and the messenger widget skipToWidgetButton.addEventListener("click", () => window.zE( window.zE.widget === "classic" ? "webWidget" : "messenger", "open" )); } else { // no web widget is present skipToWidget.style.display = "none"; }

What do you think @smansouri? It would also be nice to have @zendesk/emu blessing on this one, to make sure we are not missing something.

Thanks Andre, I changed it to use zE which is indeed better than looking for id. However even with this we still need to have some delay since the zE.widget is loaded after some milliseconds which you see it in this recording.

280727644-08f82789-4133-4347-9122-1070255d5599.mov

Update: Bence suggested to change this to poll the zE in a time interval.

The click handler with open method works very well 🙏

anpa · 2023-11-01T16:59:11Z

templates/header.hbs

@@ -1,4 +1,5 @@
 <a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>
+<a class="skip-to-chat-widget" tabindex="1" href="#launcher" >{{t 'skip_to_chat'}}</a>



@zendesk-lzingarelli @jgorfine-zendesk I understand the suggestion to use Skip to chat is to make it more understandable for users. However, the web widget can provide other functions besides chat. From the docs, a user can:

Search help center articles for immediate self-service.

Submit a support request using a contact form.

Request a callback, or view a phone number that they can call instead.

Start a live chat with an agent.

It's also possible to configure the widget to not provide a chat, in which case this string will be misleading. Could we reconsider it?

Currently, the web widget renders with a title with a Opens a widget where you can find more information value. From that perspective, wouldn't it be consistent if we use Skip to widget instead?

smansouri · 2024-06-18T14:41:15Z

Closing this, since I couldn't get it approved.

smansouri force-pushed the smansouri.skip-to-widget-button branch 6 times, most recently from 9fcb341 to b38b16b Compare October 6, 2023 06:51

smansouri marked this pull request as ready for review October 6, 2023 07:13

smansouri requested a review from a team as a code owner October 6, 2023 07:13

jgorfine-zendesk requested a review from a team October 11, 2023 13:59

jgorfine-zendesk requested changes Oct 11, 2023

View reviewed changes

src/navigation.js Outdated Show resolved Hide resolved

src/navigation.js Outdated Show resolved Hide resolved

templates/header.hbs Outdated Show resolved Hide resolved

smansouri force-pushed the smansouri.skip-to-widget-button branch 2 times, most recently from a1af7b4 to e72b022 Compare October 11, 2023 15:19

smansouri requested a review from jgorfine-zendesk October 12, 2023 08:02

smansouri commented Oct 25, 2023

View reviewed changes

bence-toth approved these changes Oct 30, 2023

View reviewed changes

anpa reviewed Nov 1, 2023

View reviewed changes

anpa requested a review from a team November 1, 2023 17:27

smansouri force-pushed the smansouri.skip-to-widget-button branch 2 times, most recently from 8bab8aa to 73e4eaf Compare November 7, 2023 10:26

smansouri force-pushed the smansouri.skip-to-widget-button branch 4 times, most recently from 4fc0d1e to 0eed465 Compare November 15, 2023 10:51

feat: [A11y] Add a button to skip to web widget

b20b6fd

smansouri force-pushed the smansouri.skip-to-widget-button branch from 0eed465 to b20b6fd Compare December 6, 2023 12:38

fix: don't change clicked links color

484762f

smansouri force-pushed the smansouri.skip-to-widget-button branch from a7a5402 to 484762f Compare January 8, 2024 11:31

smansouri closed this Jun 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [A11y] Add a button to skip to web widget #440

feat: [A11y] Add a button to skip to web widget #440

smansouri commented Oct 5, 2023 •

edited

Loading

jgorfine-zendesk left a comment

smansouri Oct 25, 2023

anpa Nov 1, 2023 •

edited

Loading

smansouri Nov 6, 2023

smansouri Nov 15, 2023 •

edited

Loading

Fredx87 Dec 5, 2023

smansouri Dec 6, 2023

bence-toth left a comment

anpa left a comment •

edited

Loading

anpa Nov 1, 2023 •

edited

Loading

anpa Nov 1, 2023

smansouri Nov 6, 2023 •

edited

Loading

anpa Nov 1, 2023 •

edited

Loading

smansouri commented Jun 18, 2024

		@@ -1,4 +1,5 @@
		<a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>
		<a class="skip-to-chat-widget" tabindex="1" href="#launcher" >{{t 'skip_to_chat'}}</a>

feat: [A11y] Add a button to skip to web widget #440

feat: [A11y] Add a button to skip to web widget #440

Conversation

smansouri commented Oct 5, 2023 • edited Loading

Description

Checklist

jgorfine-zendesk left a comment

Choose a reason for hiding this comment

smansouri Oct 25, 2023

Choose a reason for hiding this comment

anpa Nov 1, 2023 • edited Loading

Choose a reason for hiding this comment

smansouri Nov 6, 2023

Choose a reason for hiding this comment

smansouri Nov 15, 2023 • edited Loading

Choose a reason for hiding this comment

Fredx87 Dec 5, 2023

Choose a reason for hiding this comment

smansouri Dec 6, 2023

Choose a reason for hiding this comment

bence-toth left a comment

Choose a reason for hiding this comment

anpa left a comment • edited Loading

Choose a reason for hiding this comment

anpa Nov 1, 2023 • edited Loading

Choose a reason for hiding this comment

anpa Nov 1, 2023

Choose a reason for hiding this comment

smansouri Nov 6, 2023 • edited Loading

Choose a reason for hiding this comment

anpa Nov 1, 2023 • edited Loading

Choose a reason for hiding this comment

smansouri commented Jun 18, 2024

smansouri commented Oct 5, 2023 •

edited

Loading

anpa Nov 1, 2023 •

edited

Loading

smansouri Nov 15, 2023 •

edited

Loading

anpa left a comment •

edited

Loading

anpa Nov 1, 2023 •

edited

Loading

smansouri Nov 6, 2023 •

edited

Loading

anpa Nov 1, 2023 •

edited

Loading