-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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-radioinput wrapped in label (which negates need forforon label) -
b-form-checkboxinput wrapped in label (which negates need forforon label) -
b-progressARIAprogressattributes -
b-modalattributesaria-labelledbyandaria-describedby. Sectionroles& semantic elements. (PR Added closeOnEsc, hideHeaderClose & enforceFocus #247) -
b-modalFocus first input/button on open (PR Added closeOnEsc, hideHeaderClose & enforceFocus #247). Allow page author to specify input to be focused when opened via@shownevent (PR [modal] Do not change focus if activeComponent is in modal content. #378) -
b-modalfocus the modal content when opened -
b-tabs&b-tabattributesaria-controlsandaria-labelelledby. Sectionroles(PR [tabs] Add in ARIA and keyboard navigation support #339) -
b-tabs&b-tabkeyboard navigation (PR [tabs] Add in ARIA and keyboard navigation support #339) -
b-alerthas ariarole="alert",aria-liveandaria-atomic(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-form-fileNeeds focus styling in custom-file-input mode for keyboard users (PR feat(form-file): Add focus styling for custom-file input #1033) -
b-form-fieldsetattributeforwhen ID supplied on,form-control. Hasrole="alert",aria-live,aria-atomicon feedback. andaria-describedby(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-breadcrumbshould have role of navigation (PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340)Addaria-currentto active crumb (PR [breadcrumb] ARIA changes #526) -
b-input-groupneedsrole="group"(PR [ARIA] Quick fixes for breadcrumb, input-group, alert & form-fieldset #340) -
b-button-grouprole="group", make new toolbar component (PR [button-toolbar] New component b-button-toolbar #367) -
b-button-toolbarrole="toolbar"+ optional keyboard navigation (PR [button-toolbar] New component b-button-toolbar #367) -
b-nav&b-nav-linkaria attributes (PR [navs][dropdown] Additional ARIA features #358) -
b-dropdownkeyboard navigation (PR Dropdown ARIA keyboard nav #274) -
b-nav-dropdownaria-attributes (PR [navs][dropdown] Additional ARIA features #358) -
b-nav-dropdownopen 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-togglearia-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-linkkeyboard navigation -
b-collapseReflect expanded/collapsed state on trigger element (PR [navs][dropdown] Additional ARIA features #358 & [collapse] Add Accordion support, ARIA, and test suite #519) -
b-paginationaria-[label|current|setsize|posinset]attributes. (Note:aria-controlsshould be set manually in the<b-pagination>markup) (PR [pagination] ARIA attributes + Keyboard navigation #364) -
b-paginationkeyboard navigation (PR [pagination] ARIA attributes + Keyboard navigation #364 & [pagination] Refactored button keyboard selection #377) -
b-carouselaria-[controls|label|current|setsize|posinset]attributes androles. (PR [carousel] ARIA attributes and keyboard control #380) -
b-carouselkeyboard left/right control (PR [carousel] ARIA attributes and keyboard control #380, [carousel] ARIA tweaks #420) -
b-carouselPause slide scrolling onmouseenterand resume onmouseout. -
b-tooltiparia-attributes (aria-live, aria-describedby, etc -
b-popoveraria-attributes (aria-live, aria-describedby, etc. Also needs ability to changerolefromtooltiptopopoverordialog- 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-modalreturn focus to open trigger element. -
v-b-toggleattributesaria-controlsandaria-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
mosinve, odahcam and donPuertopi0