Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/informatix8/access-block
Full page loading screen that blocks user interactions
https://github.com/informatix8/access-block
screen-reader vanilla-javascript
Last synced: about 1 month ago
JSON representation
Full page loading screen that blocks user interactions
- Host: GitHub
- URL: https://github.com/informatix8/access-block
- Owner: informatix8
- License: mit
- Created: 2019-04-28T21:31:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-08-16T19:54:51.000Z (over 5 years ago)
- Last Synced: 2025-01-02T01:38:55.726Z (about 1 month ago)
- Topics: screen-reader, vanilla-javascript
- Language: JavaScript
- Homepage: https://access-block.com/
- Size: 37.1 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Access Block
Full page loading screen that blocks user interactions.
Examples and the API are in the [documentation](https://access-block.com).
## Features
- Disallows mouse scrolling, clicking, and focus movement within the body via Tab key while open
- Cannot be closed by the user. It must be programmatically closed.
- Disallows all other body content from being read with a screen reader via `aria-hidden`
- Allows focus to escape to the browser with Shift + Tab
- Uses ARIA role `alertdialog`, `aria-describedby` and `aria-labelledby` to properly notify screen readers
- Inline styles can be disabled
- After dismissal, focus is returned to the last focused element or a designated element
- Pre and post user defined functions can be called during significant events
## Usage
### Install
```shell
npm install @informatix8/access-block --save-dev
```
### CDN
```html
```
### Vanilla Javascript
```javascript
var accessBlock = new AccessBlock({
overlayOpacity: 0.4,
title: 'Loading',
description: 'Please wait'
});
var trigger = document.getElementById('trigger');
trigger.addEventListener('click', function () {
accessBlock.open();
// Example to close it
setTimeout(function () {
accessBlock.close();
}, 3000);
});
```
## Example Styles
```css
.access-block-content {
align-items: center;
display: flex;
justify-content: center;
}
.access-block-interior {
display: block;
text-align: center;
width: 12.5rem;
}
.access-block-image {
display: block;
fill: #fff;
height: 3rem;
margin: 0 auto;
width: 3rem;
}
.access-block-title {
font-size: 2rem;
}
```
## Development
```shell
npm run dev
```
## Build
```shell
npm run build
```
## Release
```shell
npm run build
git tag -a vX.Y.Z
git push origin master
git push origin --tags
npm publish --access=public .
```