Legacy Dev Forum Posts

Jeff | 2022-10-25 06:50:33 UTC | #1

Hi All,

We're looking at implementing a custom launcher button for our web messaging whilst trying to maintain some form of ARIA (Accessible Rich Internet Applications) accessibility compatibility.

Currently the recommended process to disable the default launcher visibility and create our own button doesn't by default have any accessibility states, so we've added them to our proposed code with our custom button

E.g. default state tells assistive technologies the message window isn't open (aria-expanded="false")

Then when clicking the button/toggle, we switch it to true

However we've noticed when turning off the default launcher button, this adds a 'minimise' icon to the messenger window (that isn't normally present)

If using this minimise button/icon within the messenger iframe, it can't update our custom button aria-expanded attribute - so the assistive technologies still thinks the messenger is open when it's actually closed (minimised).

So the question is: a) can the 'minimise' icon/button be hidden or disabled (so the user must use the custom launcher button to toggle open/closed and maintain aria states) b) is there any other event or script that we can use or reference to update the aria-expanded state in our custom button?

I can see there is an already an idea for a 'Customizable Launcher Button that may fit our need in the future, but looking at options until then.

Thanks in advance. Jeff

Angelo_Cicchitto | 2022-10-25 23:01:27 UTC | #2

Hi Jeff,

If you subscribe to Messenger.opened and Messenger.closed events, you should be able to build the logic that can update your aria-expanded variable accordingly. See Messenger plugin related SDK commands and events here. We'll revisit how to further refine that minimize icon: we currently add it also within mobile browsers (as launcher button would be hidden anyway). Out of curiosity, can you please provide some comments on why you are building your custom launcher? As we are planning for launcher improvements, that can help us during design.

Jeff | 2022-10-25 23:00:54 UTC | #3

Thanks Angelo for the quick reply - I'll check out the events.

There's a few reasons that we're looking at using a custom button, namely:

1. To add text and make it more inviting (so users know what the button is for - especially for the less 'technically minded' audiences) - for example:

2. To align the iconography to our preferred styling to match the rest of our website

3. On a very minor level, make sure there's a consistent shadow around the icon (as the current messenger icon shadow is cut-off on the edges

system | 2022-11-24 23:01:02 UTC | #4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

This post was migrated from the old Developer Forum.

ref: 16873