Missing landmark on select options

Current behaviour

After opening select and checking with axe plugin it fails All page content should be contained by landmarks rule:

Expected behaviour

After opening select it should not fail All page content should be contained by landmarks rule.

CodeSandbox or Storybook URL

https://codesandbox.io/s/festive-panka-oi2mw?file=/src/index.js

JIRA Ticket (Sage Only)

RIV-527

Suggested Solution

No response

Carbon Version

87.0.1

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS, Windows

Anything else we should know?

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

@tempertemper I am going to create a different issue with your above comment and look for solutions.

[tempertemper]

Probably not the answer you’ll be looking for, but I don’t think this should be given a landmark…

Giving the dropdown it its own landmark wouldn’t quite make sense because it’s not an individual, identifiable page landmark like a header, footer, call to action, etc. – it’s part of a form control.

Also, it’s content that you can reach with a screen reader without removing focus from the input, but it’s after the second ‘Hello Carbon’ button in the source order, which is a bit disorienting, especially when there’s a lot more content between the form control and the bottom of the page.

So the ideal fix for this would be to insert it alongside the text <input> that triggers it in the DOM. That way it:

• would be contained by the same main landmark, or whatever sub-landmark the whole form’s a part of
• will appear in context for screen reader users who manage to read ‘into’ the dropdown itself, leaving focus on the input