Closed Bug 1693644 Opened 2 months ago Closed 2 months ago

WebRTC camera / mic sharing permission panels should show a label instead of a list if a specific device is requested

Categories

(Firefox :: Site Permissions, enhancement, P2)

enhancement

Tracking

()

VERIFIED FIXED
88 Branch
Tracking Status
firefox88 --- verified

People

(Reporter: mconley, Assigned: mconley)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

(Whiteboard: [proton-door-hangers])

Attachments

(2 files)

Right now, we show a select dropdown for camera and microphone selection when the user is being asked to choose which camera or microphone they'd like to share.

Sites can, however, also request a full list of cameras and microphones (which results in that same permission dialog). Later on, they can then request the use of a particular device.

When the site requests a particular device, we show the same mic/camera (or combined) permission dialog. The dropdown only has a single selection available: the device that the site requested. This is bizarre... why show a menulist for a single item?

In the event that the site is requesting a particular device, and we're only showing a single device in the panel, we should show a label instead of a menulist.

STR:

  1. Visit https://webrtc.github.io/samples/src/content/devices/input-output/ in Firefox
  2. Click "Allow" in the initial combined mic/camera permission dialog to populate the device list on the page
  3. Choose a new audio or video source in the select dropdowns on the page

ER:

A permission panel comes up requesting permission for the site to use the selected devices. The panel should not imply that the user can choose which device is being shared.

AR:

A permission panel comes up showing the devices that the site has requested, but they're presented as single-entry menulists. See screenshot.

Severity: -- → N/A
Priority: -- → P2
Assignee: nobody → mconley

Hey Asa,

My solution in this patch isn't to swap out the <xul:menulist> with a <label>, but to disable the <xul:menulist> if it only has one item in it, and to style the disabled menulist for the mic / camera selector to look like a <label>. This saves on a bunch of special-case DOM manipulation.

What I want to know is whether or not a disabled <xul:menulist> makes sense for somebody using an accessibility device. The a11y inspector in DevTools shows me that the menulist still says what item is selected, but I can't tell whether or not the disabled state makes sense for accessibility devices here.

Flags: needinfo?(asa)

Asa asked me for feedback here.

The biggest concern here is that a disabled control isn't focusable and this isn't a browseable "document", so a screen reader user will be completely unaware that the menulist even exists unless they explicitly go hunting for it with review commands. We could get around this by ensuring that the description of the alert includes both the alert prompt ("Will you allow...") and the menulist. This can be done using aria-describedby. We'd end up with something like this:
<panel ... role="alert" id="notification-popup" aria-describedby="webRTC-description webRTC-selectCamera-menulist webRTC-selectMicrophone-menulist">
(webRTC-description would be a new id for the <description> element.)
That would result in an accessible description property which looks something like this:
"Will you allow test.webrtc.org to use your camera and microphone? Camera to share: Integrated Camera Microphone to share: Microphone Array (Realtek High Definition Audio) "
Note that if one of those menulists is hidden (but still in the DOM), you must not include it in aria-describedby, since aria-describedby includes hidden elements.

Beyond that, I'm not thrilled about the fact that we semantically have a disabled menulist, but we visually have a label. The intentional visual styling suggests we have an explicit thing we want to communicate, but the semantics don't reflect that. That said, there's no role="label" at this stage, so we can't override that with ARIA. Pragmatically, it probably doesn't make that much difference, so I can let this slide if making it a label introduces too much complexity.

Flags: needinfo?(asa)

Pragmatically, it probably doesn't make that much difference, so I can let this slide if making it a label introduces too much complexity.

I appreciate that, thank you Jamie. I'll update the patch to set aria-describedby on the panel appropriately.

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #4)

I appreciate that, thank you Jamie. I'll update the patch to set aria-describedby on the panel appropriately.

Argh. That's harder than I thought it'd be. The description is actually generated by the popupnotification custom element binding. I'm going to try DOM manipulation instead.

Attachment #9204498 - Attachment description: Bug 1693644 - Disable the mic/camera selection dropdown if there's only 1 device, and make it appear like a label. r?pbz! → Bug 1693644 - Only show a label for the camera/mic in the WebRTC device selector if there's only 1 device available or requested. r?pbz!
Pushed by mconley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/73633f8e0e58
Only show a label for the camera/mic in the WebRTC device selector if there's only 1 device available or requested. r=pbz
Status: NEW → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → 88 Branch
Depends on: 1698824
Duplicate of this bug: 905696

Marking this as verified-fixed based on the testing done for the QA PI ticket. Testing was done on:

  • Firefox Nightly 88
  • Firefox Beta 88

Covered Platforms:

  • Windows 7/10
  • MacOS 10.15
  • Ubuntu 20.04
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.