• Stars
    star
    789
  • Rank 57,694 (Top 2 %)
  • Language
    HTML
  • License
    BSD 3-Clause "New...
  • Created almost 11 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Accessibility Plugin for Bootstrap 3 and Bootstrap 3 as SubModule

PayPal accessibility logo

Bootstrap Accessibility Plugin, v1.0.6

by the PayPal Accessibility Team

See the Authors section below for more information.

What is it?

This plugin adds accessibility mark-up to the default components of Bootstrap 3 to make them accessible for keyboard and screen reader users. Do not worry, the plugin does not affect the performance or the visual layout of your website. Let the magic remain magic!

Why do I want it?

If you use Bootstrap library (version 3.x) on your website, your pages will now be much more usable and navigable for and by keyboard and screen reader users with no work on your part. Believe us, for this they will thank you! Read on to learn about all the enhancements introduced by this plugin.

How do I get it on my website?

  1. Download and include Bootstrap.js from getbootstrap.com.
  2. Download and include the bootstrap accessibility plugin js.
  3. Download and include the bootstrap accessibility plugin css to override css styles.
  4. Optional: Lazily load the JavaScript plugin after the page is loaded (example).
  5. For basic implementation:
 <link rel="stylesheet" href="/css/bootstrap.min.css">
 <link rel="stylesheet" href="/css/bootstrap-accessibility.css">

 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="/js/bootstrap.min.js"></script>
 <script src="/js/bootstrap-accessibility.min.js"></script>
  1. You can also install it from npm or bower:
 bower install bootstrapaccessibilityplugin
 npm install bootstrap-accessibility-plugin

Which components become accessible?

  • Alert
  • Tooltip
  • Popover
  • Modal dialog
  • Dropdown menu
  • Tab panel
  • Collapse
  • Carousel

Plugin Live Demo

Feel free to play with the live demo of the components listed above and the Bootstrap Accessibility Plugin in action. Seeing how "accessified" widgets work in this demo will help you verify whether the plugin is installed correctly on your website.

Details

Alert

  1. Add role of Alert to Alert, Warning, and Success Bootstrap Messages.
  2. Increase the color contrast. The foreground to background color contrast ratio for the message was too low.
  3. Add instructions in message dialog, so that the developer using the alert knows to manage keyboard focus on alert dismissal.
  4. Close button now accessible to screen readers.

Tooltip

  1. Add role of Tooltip to tooltip div.
  2. Generate a random id, assign it to the tooltip div, and reference it from the Tooltip element with the ARIA attribute "aria-describedby".
  3. Remove aria-describedby when the tooltip is hidden.

Popover

  1. Add role of Tooltip to popover div.
  2. Generate a random id, assign it to Popover div, and reference it from the Tooltip element with the ARIA attribute "aria-describedby".
  3. Remove aria-describedby when the popover is dismissed.

Modal Dialog

  1. Add role of Document to content div inside dialog, so that NVDA can force document mode and read contents inside Dialog.
  2. When the Modal is closed, return the focus to the element which opened the dialog.
  3. Change the focus outline of close button to visible.
  4. Close button now accessible to screen readers.

Dropdown

  1. Add aria-haspopup and and aria-expanded attributes to dropdown toggle link.
  2. Dynamically change aria-expanded when the dropdown closes or opens.
  3. Focus to first item on activating dropdown.
  4. Add ability to open dropdown with spacebar.
  5. Close dropdown when tabbing out from dropdown.
  6. Change the focus outline of dropdown to visible.

Tab Panel

  1. Add ARIA roles like tablist, presentation, and tab for tabs UL, LI.
  2. Add tabIndex, aria-expanded, aria-selected, aria-controls for tab.
  3. Add ARIA roles of tabPanel, tabIndex, aria-hidden, and aria-labelledBy for tabPanel.
  4. Add keydown event listener for the tab to work with keyboard.
  5. Dynamically flip tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible tab.

Collapse

  1. Add tab role, aria-selected, aria-expanded, aria-controls, and tabIndex for collapse tab.
  2. Add ARIA roles of tabPanel, tabIndex, aria-hidden, and aria-labelledBy for collapsible panel.
  3. Add role of tabList and aria-multiselectable for collapse container div.
  4. Dynamically flip tabIndex, aria-selected, and aria-expanded for tab when it is activated and add aria-hidden to hide the previously visible collapse tabpanel.
  5. Add keydown event listener for the collapse component to work with keyboard.

Carousel

  1. Prevent automatic cycling of the carousel.
  2. Prevent wrapping to first item on next button navigation or wrapping to last item on previous button navigation.
  3. Add role of listbox for carousel div.
  4. Add ARIA role of option, aria-selected, and tabIndex for individual carousel items.
  5. Add role of button for previous and next anchor links and a hidden screen reader text of "Previous" and "Next".
  6. Add keydown event listener for the carousel to work with keyboard.
  7. Dynamically change tabIndex and aria-selected property of active and inactive tabs.
  8. Remove display:none and hide (offscreen) of the inactive carousel items, so that screen readers can count the total number of carousel items.

Re-compiling

You may want to extend the plugin further or change some of the code. Here is how to do it:

  1. Get NodeJS from http://nodejs.org
  2. Clone the latest code from https://github.com/paypal/bootstrap-accessibility-plugin.git
  3. Go to the root of this project and install Compass and Sass:
 cd bootstrap-accessibility-plugin
 sudo gem install compass
  1. Install and run grunt:
 sudo npm install grunt-cli -g
 npm install
 grunt
  1. To run the examples, initialize the git submodules:
git submodule init
git submodule update

Feedback and Contributions

Please do not hesitate to open an issue or send a pull request if something doesn't work or you have ideas for improvement. For instructions on how to contribute to this project please read the contribution guide.

Authors

Related Resources

  • Bootstrap a11y theme - makes web accessibility easier for Bootstrap developers, a pure LESS/CSS solution.

Copyright and License

Copyright 2019, PayPal under the BSD license.

More Repositories

1

glamorous

DEPRECATED: πŸ’„ Maintainable CSS with React
JavaScript
3,640
star
2

junodb

JunoDB is PayPal's home-grown secure, consistent and highly available key-value store providing low, single digit millisecond, latency at any scale.
Go
2,565
star
3

accessible-html5-video-player

Accessible HTML5 Video Player
JavaScript
2,451
star
4

react-engine

a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
JavaScript
1,449
star
5

squbs

Akka Streams & Akka HTTP for Large-Scale Production Deployments
Scala
1,433
star
6

PayPal-node-SDK

node.js SDK for PayPal RESTful APIs
JavaScript
1,279
star
7

paypal-checkout-components

please submit Issues about the PayPal JS SDK here: https://github.com/paypal/paypal-js/issues
JavaScript
1,270
star
8

gatt

Gatt is a Go package for building Bluetooth Low Energy peripherals
Go
1,135
star
9

PayPal-iOS-SDK

Accept credit cards and PayPal in your iOS app
Objective-C
974
star
10

gnomon

Utility to annotate console logging statements with timestamps and find slow processes
JavaScript
932
star
11

PayPal-Android-SDK

Accept PayPal and credit cards in your Android app
Java
824
star
12

PayPal-Python-SDK

Python SDK for PayPal RESTful APIs
Python
702
star
13

AATT

Automated Accessibility Testing Tool
JavaScript
601
star
14

PayPal-Ruby-SDK

Ruby SDK for PayPal RESTful APIs
Ruby
593
star
15

ipn-code-samples

PHP
561
star
16

seifnode

C++
545
star
17

PayPal-NET-SDK

.NET SDK for PayPal's RESTful APIs
C#
535
star
18

PayPal-Java-SDK

Java SDK for PayPal RESTful APIs
Java
535
star
19

data-contract-template

Template for a data contract used in a data mesh.
460
star
20

Checkout-PHP-SDK

PHP SDK for Checkout RESTful APIs
PHP
418
star
21

hera

High Efficiency Reliable Access to data stores
Go
289
star
22

SeLion

Enabling Test Automation in Java
Java
281
star
23

nemo-core

Selenium-webdriver based automation in node.js
JavaScript
261
star
24

support

An evented server framework designed for building scalable and introspectable services, built at PayPal.
Python
261
star
25

PayPal-Cordova-Plugin

PayPal SDK Cordova/Phonegap Plugin
Objective-C
248
star
26

gimel

Big Data Processing Framework - Unified Data API or SQL on Any Storage
Scala
245
star
27

scala-style-guide

Style Guidelines for PayPal Scala Applications
240
star
28

merchant-sdk-php

PHP SDK for integrating with PayPal's Express Checkout / MassPay / Web Payments Pro APIs
PHP
230
star
29

paypal-js

Loading wrapper and TypeScript types for the PayPal JS SDK
TypeScript
229
star
30

paypal-rest-api-specifications

This repository contains the specification files for PayPal REST APIs.
192
star
31

resteasy-spring-boot

RESTEasy Spring Boot Starter
Java
188
star
32

Checkout-Java-SDK

PayPal Checkout Java SDK
Java
182
star
33

autosklearn-zeroconf

autosklearn-zeroconf is a fully automated binary classifier. It is based on the AutoML challenge winner auto-sklearn. Give it a dataset with known outcomes (labels) and it returns a list of predicted outcomes for your new data. It even estimates the precision for you! The engine is tuning massively parallel ensemble of machine learning pipelines for best precision/recall.
Python
171
star
34

skipto

SkipTo is a replacement for your old classic "Skipnav" link. Once installed on a site, the script dynamically determines the most important places on the page and presents them to the user in a drop-down menu.
HTML
152
star
35

TLS-update

Documentation & tools for the upcoming TLSv1.2 required update
Java
148
star
36

Checkout-NET-SDK

.NET SDK for Checkout RESTful APIs
C#
139
star
37

cascade

Common Libraries & Patterns for Scala Apps @ PayPal
Scala
129
star
38

merchant-sdk-ruby

Ruby
110
star
39

heap-dump-tool

Tool to sanitize data from Java heap dumps.
Java
110
star
40

NNAnalytics

NameNodeAnalytics is a self-help utility for scouting and maintaining the namespace of an HDFS instance.
Java
110
star
41

paypal-smart-payment-buttons

Smart Payment Buttons
JavaScript
108
star
42

yurita

Anomaly detection framework @ PayPal
Scala
106
star
43

InnerSourceCommons

DEPRECATED - old repo for InnerSourceCommons website. Moved to https://github.com/InnerSourceCommons/innersourcecommons.org
JavaScript
105
star
44

adaptivepayments-sdk-php

PHP SDK for integrating with PayPal's AdaptivePayments API
PHP
101
star
45

fullstack-phone

A dual-module phone number system with dynamic regional metadata ☎️
JavaScript
90
star
46

sdk-core-php

for classic PHP SDKs.
PHP
87
star
47

paypal-here-sdk-android-distribution

Add credit card (swipe & key-in) capabilities to your Android app
Java
84
star
48

merchant-sdk-dotnet

C#
83
star
49

paypal-here-sdk-ios-distribution

Add credit card (tap, insert, swipe & key-in) capabilities to your iOS app
Objective-C
82
star
50

payflow-gateway

Repository to store the Payflow Gateway and PayPal Payments Pro SDKs.
C#
80
star
51

sdk-packages

Binary packages for deprecated SDKs.
77
star
52

android-checkout-sdk

Kotlin
77
star
53

Iguanas

Iguanas is a fast, flexible and modular Python package for generating a Rules-Based System (RBS) for binary classification use cases.
Jupyter Notebook
74
star
54

paypal-android

One merchant integration point for all of PayPal's services
Kotlin
72
star
55

legalize.js

JavaScript object validation for browsers + node
JavaScript
70
star
56

paypalcheckout-ios

Need to add Native Checkout to your iOS Application? We can help!
Ruby
70
star
57

paypal-sdk-client

Shared config for PayPal/Braintree client SDKs
JavaScript
65
star
58

load-watcher

Load watcher is a cluster-wide aggregator of metrics, developed for Trimaran: Real Load Aware Scheduler in Kubernetes.
Go
63
star
59

dce-go

Docker Compose Executor to launch pod of docker containers in Apache Mesos.
Go
63
star
60

merchant-sdk-java

Java SDK for integrating with PayPal's Express Checkout / MassPay / Web Payments Pro APIs
Java
62
star
61

sdk-core-java

for classic Java SDKs.
Java
61
star
62

paypal-ios

One merchant integration point for all of PayPal's services
Swift
59
star
63

gorealis

Version 1 of a Go library for interacting with the Aurora Scheduler
Go
58
star
64

scorebot

CSS
57
star
65

PPExtensions

Set of iPython and Jupyter extensions to improve user experience
Python
50
star
66

paypal-checkout-demo

Demo app for paypal-checkout
JavaScript
49
star
67

dione

Dione - a Spark and HDFS indexing library
Scala
49
star
68

Payouts-PHP-SDK

PHP SDK for Payouts RESTful APIs
PHP
49
star
69

pdt-code-samples

Visual Basic
48
star
70

butterfly

Application transformation tool
Java
47
star
71

Payouts-NodeJS-SDK

NodeJS SDK for Payouts RESTful APIs
JavaScript
47
star
72

digraph-parser

Java parser for digraph DSL (Graphviz DOT language)
Java
44
star
73

paypalhttp_php

PHP
43
star
74

tech-talks

Place for all PayPalX presentations, tech talks, and tutorials, and the sample code and apps used in those.
ColdFusion
38
star
75

Illuminator

iOS Automator
Swift
38
star
76

paypal-sdk-release

Unified SDK wrapper module for tests, shared build config, and deploy
JavaScript
37
star
77

PayPal-REST-API-issues

Issue tracking for REST API bugs, features, and documentation requests.
37
star
78

paypal-messaging-components

PayPal JavaScript SDK - messaging components
JavaScript
37
star
79

ionet

ionet is a bridge between the Go stdlib's net and io packages
Go
37
star
80

paypal-access

Examples and code for PayPal Access
Python
36
star
81

horizon

An SBT plugin to help with building, testing, analyzing and releasing Scala
Scala
35
star
82

Payouts-Java-SDK

Java SDK for Payouts RESTful APIs
Java
35
star
83

genio

Genio is an extensible tool that can generate code to consume APIs in multiple programming languages based on different API specification formats.
Ruby
35
star
84

mirakl-hyperwallet-connector

The Hyperwallet Mirakl Connector (HMC) is a self-hosted solution that mediates between a Mirakl marketplace solution and the Hyperwallet (PayPal) payout platform.
Java
34
star
85

openapilint

Node.js linter for OpenAPI specs
JavaScript
31
star
86

paypal-sdk-constants

JavaScript
27
star
87

sdk-core-ruby

Core Library for PayPal Ruby SDKs
Ruby
27
star
88

go.crypto

Go crypto packages
Go
26
star
89

PayPal-PHP-SDK

PHP SDK for PayPal RESTful APIs
PHP
26
star
90

nemo-view

View interface for the Nemo automation framework
JavaScript
26
star
91

Gibberish-Detector-Java

A small program to detect gibberish using a Markov Chain
Java
26
star
92

nemo-accessibility

Automate Accessibility testing within your environment (Localhost)
JavaScript
25
star
93

Payouts-Python-SDK

Python SDK for Payouts RESTful APIs
Python
25
star
94

here-sideloader-api-samples

Sideloader API samples that enable to integrate PayPal Here into other apps
Objective-C
24
star
95

couchbasekafka

Couchbase Kafka Adapter
Java
24
star
96

baler

Bundle assets into iOS static libraries
Python
22
star
97

invoice-sdk-php

PHP SDK for integrating with PayPal's Invoicing API
PHP
21
star
98

Payouts-DotNet-SDK

DotNet SDK for Payouts RESTful APIs
C#
20
star
99

paypal-funding-components

PayPal JavaScript SDK Funding Components
JavaScript
20
star
100

squbs-scala-seed.g8

Scala giter8 Template for Squbs
Scala
20
star