Closed
Description
Bootstrap V4 is addressing some of the accessibility issues: twbs/bootstrap#22549, Of which bootstrap-vue has started to already address.
Here is little list of items that are complete or need work for aria and/or keyboard navigation (to be updated as we progress through them):
Components - ARIA / Keyboard Navigation
-
b-form-radio
input wrapped in label (which negates need forfor
on label) -
b-form-checkbox
input wrapped in label (which negates need forfor
on label) -
b-progress
ARIAprogress
attributes -
b-modal
attributesaria-labelledby
andaria-describedby
. Sectionroles
& semantic elements. (PR Added closeOnEsc, hideHeaderClose & enforceFocus #247) -
b-modal
Focus first input/button on open (PR Added closeOnEsc, hideHeaderClose & enforceFocus #247). Allow page author to specify input to be focused when opened via@shown
event (PR [modal] Do not change focus if activeComponent is in modal content. #378) -
b-modal
focus the modal content when opened -
b-tabs
&b-tab
attributesaria-controls
andaria-labelelledby
. Sectionroles
(PR [tabs] Add in ARIA and keyboard navigation support #339) -
b-tabs
&b-tab
keyboard navigation (PR [tabs] Add in ARIA and keyboard navigation support #339) -
b-alert
has ariarole="alert"
,aria-live
andaria-atomic
(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-form-file
Needs focus styling in custom-file-input mode for keyboard users (PR feat(form-file): Add focus styling for custom-file input #1033) -
b-form-fieldset
attributefor
when ID supplied on,form-control
. Hasrole="alert"
,aria-live
,aria-atomic
on feedback. andaria-describedby
(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-breadcrumb
should have role of navigation (PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340)Addaria-current
to active crumb (PR [breadcrumb] ARIA changes #526) -
b-input-group
needsrole="group"
(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-button-group
role="group"
, make new toolbar component (PR [button-toolbar] New component b-button-toolbar #367) -
b-button-toolbar
role="toolbar"
+ optional keyboard navigation (PR [button-toolbar] New component b-button-toolbar #367) -
b-nav
&b-nav-link
aria attributes (PR [navs][dropdown] Additional ARIA features #358) -
b-dropdown
keyboard navigation (PR Dropdown ARIA keyboard nav #274) -
b-nav-dropdown
aria-
attributes (PR [navs][dropdown] Additional ARIA features #358) -
b-nav-dropdown
open on ENTER or SPACE (see Issue Nav dropdowns only open on mouse click #348) (PR [button-group] Toolbar keyboard navigation + new button-group-dropdown component #349) -
b-nav-toggle
aria-
attributes (PR [navs][dropdown] Additional ARIA features #358, [collapse] render ID on root div #410, [collapse] aria-expanded state #411, [collapse] Emitting collapse show state to toggle #412) -
(leave as standard TAB key navigation)b-nav
&b-nav-link
keyboard navigation -
b-collapse
Reflect expanded/collapsed state on trigger element (PR [navs][dropdown] Additional ARIA features #358 & [collapse] Add Accordion support, ARIA, and test suite #519) -
b-pagination
aria-[label|current|setsize|posinset]
attributes. (Note:aria-controls
should be set manually in the<b-pagination>
markup) (PR [pagination] ARIA attributes + Keyboard navigation #364) -
b-pagination
keyboard navigation (PR [pagination] ARIA attributes + Keyboard navigation #364 & [pagination] Refactored button keyboard selection #377) -
b-carousel
aria-[controls|label|current|setsize|posinset]
attributes androles
. (PR [carousel] ARIA attributes and keyboard control #380) -
b-carousel
keyboard left/right control (PR [carousel] ARIA attributes and keyboard control #380, [carousel] ARIA tweaks #420) -
b-carousel
Pause slide scrolling onmouseenter
and resume onmouseout
. -
b-tooltip
aria-
attributes (aria-live, aria-describedby, etc -
b-popover
aria-
attributes (aria-live, aria-describedby, etc. Also needs ability to changerole
fromtooltip
topopover
ordialog
- Popovers can have some issues with regards to accessibility, especially for interactive popover content, and possibly should have a role other than
tooltip
(configurable). Popover accessibility twbs/bootstrap#18618
- Popovers can have some issues with regards to accessibility, especially for interactive popover content, and possibly should have a role other than
Directives
-
v-b-modal
return focus to open trigger element. -
v-b-toggle
attributesaria-controls
andaria-expanded
. (PR [collapse] Add Accordion support, ARIA, and test suite #519)
Documentation
- Create ARIA best practices for Bootstrap-Vue - sections added to each compoent
- Add documentation where needed