React-Bootstrap components are not meeting ADA website accessibility standards

[medicalspanw]

Is your feature request related to a problem? Please describe

Navbar, dropdowns and possibly other components are not compling with ADA website accessibility standards. That is, one cannot use a simple keyboard to navigate through the website when constructed with these components. Using these components requires a touch screen, mouse and/or some tactile interface. People with limited dexterity cannot use these more advanced interfaces and will have a difficult time navigating through a website constructed with these components.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
To replicate the problem:
Go to the github users guide for Navbars at:
https://react-bootstrap.netlify.com/components/navbar/#navbars-overview

Mouse click the "#" symbol that appears after the heading "Overview". Now attempt to navigate through this page using the tab key.
Click 1: advances to the link "containers".
This is correct.

Click 2: advances to the Navbar.Brand component labeled "React-Bootstrap".
This is correct.

Click 3: advances to the search window.
This is incorrect, as it bypasses the Nav.Links to "Home" and "Link" and bypasses the Nav.Dropdown component labeled dropdown.

Describe the solution you'd like

The Nav.Links and Dropdowns and other components require something equivalent to an anchor tag for the browser to recognize a landing spot for each tab click. Further, the dropdowns need to open with a return. The dropdown items need to be accessible via the arrow keys and need to be activated with a return key.

A clear and concise description of what you want to happen.
(See above)

Describe alternatives you've considered

The alternative is to use a tactile interface component, such as a mouse. However, this defeats the intent of ADA website accessibility standards.

A clear and concise description of any alternative solutions or features you've considered.
I have tried adding a discrete anchor tag within these components. This has not worked.

Additional context

Add any other context or screenshots about the feature request here.

[jquense]

Hey thanks for the report, The behavior you're seeing with nav links is a bug we are aware of and working on. You can use beta.10, which is what the host docs point too and see that that the nav link behavior is correct. https://react-bootstrap.github.io/components/navbar/#navbars-overview

[medicalspanw]

Thanks for the reply. You are correct. The react-bootstrap.github.io page works as expected. I am having issues with my implementation. I am using react-boostrap version: 1.0.0-beta.12. The local version (npm run start) and deployed version (npm run build) do not allow tabbing to the Nav.Link and NavDropdown components.

…

On Fri, Aug 30, 2019 at 12:12 PM Jason Quense ***@***.***> wrote: Closed #4371 <#4371> via 5e1668a <5e1668a> . — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4371?email_source=notifications&email_token=AHAGGCW7D2JAAJMBGFUFLTTQHFWIHA5CNFSM4ISP3TW2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOTLN2EDA#event-2598085132>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHAGGCWDIUWJBWJOBUKOLNTQHFWIHANCNFSM4ISP3TWQ> .

[jquense]

yup will be fixed in the next release!

[medicalspanw]

Thanks for responding. It is appreciated that you are on top of this issue. Thanks.

…

On Tue, Sep 3, 2019, 14:41 Jason Quense ***@***.***> wrote: yup will be fixed in the next release! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4371?email_source=notifications&email_token=AHAGGCXBRJS72OLS325JXYDQH3KXBA5CNFSM4ISP3TW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5ZVHFI#issuecomment-527651733>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHAGGCTTSYVHJW3TT2HBNADQH3KXBANCNFSM4ISP3TWQ> .