(Accessibility) [DESIGN]: Users should be made aware their session is expiring, and be allowed to extend it

[1Copenut]

Steps to reproduce

1. Open the dashboard in chrome browser
2. Leave the window inactive for certain period.
3. Notice the application logged out the user without notification.

---

---

Actual Result

• User is logged out without an announcement (to screen readers) or a way to extend the session.

Expected Result

• All users are made aware of a pending timeout. Screen readers should announce this aurally to match the visual presentation.
• Users should have a way to extend the session like clicking a button to reset the timer.
• Users should be made aware the session timeout may lead to lost data.

Changes Needed

1. The div[data-test-subj=globalToastList] needs an aria-atomic="true" attribute added. The whole message "Session timeout. You will be logged out in 5 minutes." is only read once. The next message announces "in 4 minutes". There's too little context -- What happens in 4 minutes?
2. The last minute countdown should only announce once at 1 minute, and maybe once more at 15 seconds. The constant updates were causing a high cognitive load and could trigger anxiety or panic in some users.
3. The logged out session message should be announced to users. If users miss the status message or don't press the button soon enough, we need to confirm their session ended and they're now being asked to log in again. After a quick testing session locally, I determined the div[role="status'] that houses the session logout message isn't firing reliably. Can we have the empty div on the page on first render, and load the session timeout message async? This will cue Safari + VO to announce the change consistently.

Kibana Version: 7.16.3

OS: Windows 10/11

Browser: Chrome

Screen reader: [if relevant] Probably NVDA or JAWS. Issue was client-reported.

Relevant WCAG Criteria: SC 2.2.1: Timing Adjustable - Level A

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[legrego]

Hey @1Copenut, thanks for the report. Kibana offers two different session timeouts: An idle timeout, and a session lifespan.

The idle timeout will automatically logout a user if they haven't used their session for longer than a configurable duration. We already show a warning message (via toast) 5 minutes before the session expires, and this gives the user the ability to extend their session if they wish to do so.

The session lifespan is a little different. Session lifespans define the maximum amount of time a session is valid for, regardless of user activity. When this timeout is reached, we require users to re-authenticate, so a button to extend their session wouldn't be possible in this scenario. Like the idle timeout above, we should be showing a warning message (via toast) when this is about to happen.

---

How did you have Kibana configured? Do you know which of these timeouts you ran into?

[1Copenut]

Hello @legrego. I wasn't able to interact with either signout messages on a stock version of Kibana in the cloud or on my desktop. This item was first raised to me by a customer. The screenshot attached above was my attempt at modifying their original image with a ring around the item I'm interested in.

I think the idle timeout is the one I'm most interested in, to start. That one would have the most impact for assistive technology on a day to day basis. That said, I would like to review the session lifespan timeout as well. Where can I access this control, assuming a local install of Kibana from main branch?

[legrego]

Assuming a local install of Kibana from main branch:

Idle Timeout

# kibana.yml

# Configure a 6 minute idle timeout
xpack.security.session.idleTimeout: 6m

Step 1: Configure Kibana as shown above Step 2: Start Kibana & ES locally Step 3: Login to Kibana Step 4: After logging in, navigate to the home screen, a dashboard, or similar Step 5: Do not interact with Kibana for about 1 minute

Expected: 5 minutes before your session expires, you should see a toast message similar to the following:

Session Lifespan

# kibana.yml

# Configure a 6 minute session lifespan
xpack.security.session.lifespan: 6m

Step 1: Configure Kibana as shown above Step 2: Start Kibana & ES locally Step 3: Login to Kibana Step 4: After logging in, navigate to the home screen, a dashboard, or similar Step 5: Wait for about 1 minute for message to appear (you may interact with Kibana)

Expected: 5 minutes before your session expires, you should see a toast message similar to the following. Note the message is similar to the Idle Timeout message, but we omit the button which allows you to extend your session:

[1Copenut]

@legrego Thank you for the local config override. I was able to interact with the toast message and the user logged out message. I added a screenshot to the original ticket description for the logged out message update needed.

[legrego]

@1Copenut I'm seeing what I think is close to the correct behavior when testing in Safari with VoiceOver:

https://share.cleanshot.com/i8s41b

I am notified in VoiceOver when the toast message appears, warning me about my upcoming session timeout.

Once there is < 1 minute left to the timeout, the toast starts counting down the seconds. As you can see in the video, we don't have that part quite right: it just repeats

• "in 59 seconds"
• "in 58 seconds"
• "in 57 seconds"
• ...

without giving any context.

When we do finally get logged out, however, you can see that VoiceOver is announcing the message on screen, indicating that the session has timed out, and to login again.

Edit: I also tested this in Edge with VoiceOver, and I got nearly identical results. Maybe we have an issue when a different screen reader is in use? Is there a way for me to verify that on a Mac?

[1Copenut]

@legrego I was able to observe the behavior, but I am not able to hear the session logout message. I've tested this a number of times with Safari + VoiceOver and it's inconsistent enough that I'd like to look into improving robustness.

I mocked up a quick test and tested locally with Safari + VO. The short version is if the live region is on the page "as is" with the text pre-loaded, Safari won't announce it consistently. If we load the page and change the text async or with a callback, then it will announce correctly.

I've added a Changes needed section to the issue description to outline the items I feel need to be adjusted to make the logout warning experience as inclusive as possible. Please let me know if you'd like to discuss further or have any questions.

FWIW, I don't recommend testing VoiceOver with anything besides Safari (first) and Firefox (second). VO definitely has a preference and Apple isn't explicitly supporting any other browsers.

[legrego]

@1Copenut thanks so much for your patience and help on this issue. We'll work to incorporate your feedback, and tag you for review once we have something ready to share.

[legrego]

@1Copenut sorry for so much back and forth, but I have a question around this request:

The last minute countdown should only announce once at 1 minute, and maybe once more at 15 seconds. The constant updates were causing a high cognitive load and could trigger anxiety or panic in some users.

Is there a way for us to show the second-by-second countdown in the toast as we do today, but prevent screen readers from announcing them all? Would we have to use something like aria-hidden for most of those updates, and remove aria-hidden for the few announcements that we do want to make?

[1Copenut]

@legrego NP! I think you might have more consistent results by setting the aria-live attribute to "off" and then setting it to "polite" for the relevant 1 minute and 15 second marks. I sourced the prop change from MDN:

...As aria-live="off" is the assumed default for elements, it should not be necessary to set this explicitly, unless you're trying to suppress the announcement of elements which have an implicit live region role (such as role="alert").

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions