The "Please select option" text shows outside the select and is persistent on the screen while the select has focus

[jeremeevans]

The "Please select option" text shows outside the select and is persistent on the screen while the select has focus

If a select is focused, the "Please select option" text shows up (in this repro case) below the select. If you click on the select to close the selection menu, but retain focus on the select, the "Please select option" text remains on the screen.

To Reproduce

I created a minimal reproduction repository, in Vue...

1. Clone https://github.com/jeremeevans/auro-select-bug
2. Open it in a Visual Studio Code dev container
3. npm i
4. npm run dev
5. Open in the browser
6. Click on the select twice to open and close the menu
7. Observe the "Please select option" text still on the screen.

Expected behavior

The "Please select option" text should now show anywhere other than in the select when an option is not selected.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser Firefox
• Version Latest

Additional context

Found by Karthi, not sure which broswer/OS she was using...

[blackfalcon]

@jeremeevans this is odd behavior. See from the screenshot there is a DOM element that appears, but it not respecting the utility class applied to it.

This DOM sticks around when the bib is closed, but then disappears once there is another click.

@jason-capsule42 can you shed light on this?

[blackfalcon]

I should also note, this issue does not happen on the doc site. Firefox or Chrome.

[jordanjones243]

@jeremeevans this is odd behavior. See from the screenshot there is a DOM element that appears, but it not respecting the utility class applied to it.

This DOM sticks around when the bib is closed, but then disappears once there is another click.

@jason-capsule42 can you shed light on this?

This is a valid bug. The div that appears in the DOM because in order to follow the HTML5 workflow for screenreaders on select elements, we needed to have the screenreader read the label. This was not happening, so we had to insert a method that created a div that forced the screenreader to read the placeholder text and have it disappear from the DOM after the auro-select element has focus blurred. When the select element is clicked twice, it still appears in the DOM.

As for the class that is supposed to hide this div element visually, I am unsure why it is not being applied and the element is not hidden. I can do further investigaiton.

[blackfalcon]

The conclusion is that the mechanism that we are using to hide the assistive text is not available outside the scope of the shadow DOM, aka custom element.

Spec

Update the code to brute-force the hiding of the content directly on the HTML node versus relying on a CSS class

Exit criteria

This will be considered closed once the additional DOM element for assistive devices is no longer visible in any state or device.