Skip to content

Commit

Permalink
master - finetune new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@hexa-3d
hexa-3d committed Mar 29, 2024
1 parent 48444c3 commit 000d18a
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 79 deletions.
1 change: 1 addition & 0 deletions dist/interfaces/accessibility.interface.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface IAccessibility {
onChange(updateSession: boolean): void;
createScreenShot(url: string): Promise<string>;
injectCss(): void;
removeCSS(): void;
}
export interface IAccessibilityOptions {
icon?: IAccessibilityIconOptions;
Expand Down
2 changes: 1 addition & 1 deletion dist/main.bundle.js
View file

Large diffs are not rendered by default.

23 changes: 1 addition & 22 deletions dist/main.js
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions dist/menu-interface.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,9 @@ var MenuInterface = /*#__PURE__*/function () {
};
if (destroy) {
tSpeechList.classList.remove('active');
step1[0].style.background = '#ffffff';
step2[0].style.background = '#ffffff';
step3[0].style.background = '#ffffff';
step1[0].classList.remove('active');
step2[0].classList.remove('active');
step3[0].classList.remove('active');
this._acc.stateValues.textToSpeech = false;
window.speechSynthesis.cancel();
return remove();
Expand All @@ -242,22 +242,22 @@ var MenuInterface = /*#__PURE__*/function () {
this._acc.stateValues.textToSpeech = true;
this._acc.textToSpeech('Screen Reader enabled. Reading Pace - Normal');
tSpeechList.classList.add('active');
step1[0].style.background = '#000000';
step2[0].style.background = '#000000';
step3[0].style.background = '#000000';
step1[0].classList.add('active');
step2[0].classList.add('active');
step3[0].classList.add('active');
} else if (this._acc.stateValues.speechRate === 1 && tSpeechList.classList.contains('active')) {
this._acc.stateValues.speechRate = 1.5;
this._acc.textToSpeech('Reading Pace - Fast');
step1[0].style.background = '#ffffff';
step1[0].classList.remove('active');
} else if (this._acc.stateValues.speechRate === 1.5 && tSpeechList.classList.contains('active')) {
this._acc.stateValues.speechRate = 0.7;
this._acc.textToSpeech('Reading Pace - Slow');
step2[0].style.background = '#ffffff';
step2[0].classList.remove('active');
} else {
this._acc.stateValues.speechRate = 1;
this._acc.textToSpeech('Screen Reader - Disabled');
tSpeechList.classList.remove('active');
step3[0].style.background = '#ffffff';
step3[0].classList.remove('active');
var timeout = setInterval(function () {
if (_this2._acc.isReading) {
return;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "accessibility",
"version": "5.0.0",
"version": "5.0.1",
"description": "add accessibility to your website",
"main": "index.js",
"exports": {
Expand Down
150 changes: 138 additions & 12 deletions site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h3 class="ui header">easy to use!</h3>
</div>


<div class="ui raised segment">
<div class="ui raised segment" id="known-issues">
<h3 class="ui header">Limitations and Known Issues</h3>
<p>
Works with html5 browsers only (no IE8 and below)
Expand All @@ -192,7 +192,7 @@ <h3 class="ui header">Limitations and Known Issues</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="multi-language">
<h3 class="ui header">multi language example</h3>

<p>
Expand Down Expand Up @@ -224,7 +224,7 @@ <h3 class="ui header">multi language example</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="disable-features-example">
<h3 class="ui header">disable features example</h3>

<p>
Expand Down Expand Up @@ -253,7 +253,7 @@ <h3 class="ui header">disable features example</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="hotkeys-module">
<h3 class="ui header">hotkeys module</h3>

<p>
Expand Down Expand Up @@ -315,7 +315,7 @@ <h3 class="ui header">hotkeys module</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="text-size-approaches">
<h3 class="ui header">text size manipulation approaches</h3>
<p>
The default approach is <code>textEmlMode: false</code> meaning we are changing the
Expand All @@ -341,7 +341,7 @@ <h3 class="ui header">text size manipulation approaches</h3>
</code>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="animations">
<h3 class="ui header">animations</h3>

<p>
Expand All @@ -352,7 +352,7 @@ <h3 class="ui header">animations</h3>
</code>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="free">
<h3 class="ui header">free</h3>

<div class="ui list">
Expand Down Expand Up @@ -396,7 +396,7 @@ <h3 class="ui header">free</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="positioning">
<h3 class="ui header">positioning</h3>

<p>
Expand Down Expand Up @@ -543,7 +543,7 @@ <h3 class="ui header">icon image</h3>
</p>
</div>

<div class="ui raised segment" id="icon-image">
<div class="ui raised segment" id="persistent-session">
<h3 class="ui header">persistent session</h3>

<p>
Expand Down Expand Up @@ -575,7 +575,7 @@ <h3 class="ui header">persistent session</h3>

</div>

<div class="ui raised segment" id="icon-image">
<div class="ui raised segment" id="direct-api-access">
<h3 class="ui header">direct access to the API</h3>

<p>
Expand Down Expand Up @@ -642,7 +642,7 @@ <h3 class="ui header">direct access to the API</h3>

</div>

<div class="ui raised segment">
<div class="ui raised segment" id="add-custom-iframe">
<h3 class="ui header">add custom iframe</h3>
<p>
You can add buttons that will open a model with custom iframes (for accessibility terms for example)
Expand Down Expand Up @@ -691,7 +691,7 @@ <h3 class="ui header">add custom iframe</h3>
</p>
</div>

<div class="ui raised segment">
<div class="ui raised segment" id="add-custom-functions">
<h3 class="ui header">add custom functions</h3>
<p>
You can add buttons that will invoke custom functions like so:
Expand Down Expand Up @@ -762,6 +762,116 @@ <h3 class="ui header">add custom functions</h3>
</p>
</div>

<div class="ui raised segment" id="customize-styling">
<h3 class="ui header">customize styling</h3>
<p>
You can use CSS variables to change the styling of the menu. Here is an example of how you can change the exposed variables in order to change the theme to dark mode:
</p>
<code>
:root {
<p class="b-space-1">
--_access-menu-background-color: #000;
</p>
<p class="b-space-1">
--_access-menu-item-button-background: #222;
</p>
<p class="b-space-1">
--_access-menu-item-color: rgba(255,255,255,.6);
</p>
<p class="b-space-1">
--_access-menu-header-color: rgba(255,255,255,.87);
</p>
<p class="b-space-1">
--_access-menu-item-button-active-color: #000;
</p>
<p class="b-space-1">
--_access-menu-item-button-active-background-color: #fff;
</p>
<p class="b-space-1">
--_access-menu-div-active-background-color: #fff;
</p>
<p class="b-space-1">
--_access-menu-item-button-hover-color: rgba(255,255,255,.8);
<p class="b-space-1">
--_access-menu-item-button-hover-background-color: #121212;
</p>
<p class="b-space-1">
--_access-menu-item-icon-color: rgba(255,255,255,.6);
</p>
<p class="b-space-1">
--_access-menu-item-hover-icon-color: rgba(255,255,255,.8);
</p>
<p class="b-space-1">
--_access-menu-item-active-icon-color: #000;
</p>
<p>
}
</p>
</code>
<br>
<p>
Alternatively, you can suppress the default CSS injection altogether (not recommended):
</p>
<p>
<code>
new Accessibility({suppressCssInjection: true});
</code>
</p>
<p>
You can also replace the icons by replacing the <code>content</code> attribute with the CSS variables currently being used.
</p>
<p>
You might need to replace the font-face-src:
</p>
<code>
const options = {
<p class="b-space-1">
icon: {
</p>
<p class="b-space-2">
fontFaceSrc: ['https://fonts.bunny.net/icon?family=Material+Icons']
</p>
<p class="b-space-1">
}
</p>
};
<p>
new Accessibility(options);
</p>
</code>
</div>

<div class="ui raised segment" id="module-order">
<h3 class="ui header">change modules order</h3>
<p>
You can determine the order of the modules:
</p>
<code>
new Accessibility({
<p class="b-space-1">
modulesOrder: [
</p>
<p class="b-space-2">
{
</p>
<p class="b-space-3">
type: AccessibilityModulesType.textToSpeech,
</p>
<p class="b-space-3">
order: 0
</p>
<p class="b-space-2">
}
</p>
<p class="b-space-1">
]
</p>
<p>
})
</p>
</code>
</div>

<div class="ui raised segment">
<h3> Pause animations</h3>
<img src="https://c.tenor.com/D12KYBUCOBAAAAAd/git-merge.gif" width="400px">
Expand Down Expand Up @@ -813,6 +923,22 @@ <h3 class="ui header">license</h3>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../dist/main.bundle.js"></script>
<script src="script/main.js"></script>
<style>
:root {
--_access-menu-background-color: #000;
--_access-menu-item-button-background: #222;
--_access-menu-item-color: rgba(255,255,255,.6);
--_access-menu-header-color: rgba(255,255,255,.87);
--_access-menu-item-button-active-color: #000;
--_access-menu-item-button-active-background-color: #fff;
--_access-menu-div-active-background-color: #fff;
--_access-menu-item-button-hover-color: rgba(255,255,255,.8);
--_access-menu-item-button-hover-background-color: #121212;
--_access-menu-item-icon-color: rgba(255,255,255,.6);
--_access-menu-item-hover-icon-color: rgba(255,255,255,.8);
--_access-menu-item-active-icon-color: #000;
}
</style>
<!--<script id="dsq-count-scr" src="//ranbuch.disqus.com/count.js" async></script>-->
</body>

Expand Down
39 changes: 14 additions & 25 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,7 +492,7 @@ export class Accessibility implements IAccessibility {
font-size: var(--_access-menu-font-size, 18px);
margin: 0;
overflow: auto;
max-height: var(--_access-menu-max-height, calc(100vh - 77px));
max-height: var(--_access-menu-max-height, calc(100vh - 145px));
display: flex;
flex-flow: column;
gap: 5px;
Expand All @@ -509,32 +509,21 @@ export class Accessibility implements IAccessibility {
display: inline-block;
}
.screen-reader-wrapper {
margin: 0 10px;
margin: 0;
position: absolute;
bottom: -3px;
bottom: -4px;
width: calc(100% - 2px);
left: 1px;
}
.screen-reader-wrapper-step-1 {
float: left;
background: white;
width: 33%;
height: 3px;
border-radius: 10px;
}
.screen-reader-wrapper-step-2 {
.screen-reader-wrapper-step-1, .screen-reader-wrapper-step-2,.screen-reader-wrapper-step-3 {
float: left;
background: white;
width: 33%;
background: var(--_access-menu-background-color, #fff);
width: 33.33%;
height: 3px;
border-radius: 10px;
}
.screen-reader-wrapper-step-3 {
float: left;
background: white;
width: 33%;
height: 3px;
border-radius: 10px;
.screen-reader-wrapper-step-1.active, .screen-reader-wrapper-step-2.active,.screen-reader-wrapper-step-3.active {
background: var(--_access-menu-item-button-background, #f9f9f9);
}
._access-menu ul li {
position: relative;
Expand Down Expand Up @@ -605,7 +594,7 @@ export class Accessibility implements IAccessibility {
top: 7px;
left: 5px;
position: absolute;
color: rgba(0,0,0,.6);
color: var(--_access-menu-item-icon-color, rgba(0,0,0,.6));
direction: ltr;
text-indent: 0;
transition-duration: .35s;
Expand Down Expand Up @@ -639,21 +628,21 @@ export class Accessibility implements IAccessibility {
opacity: 0;
}
._access-menu ul li button svg path {
fill: rgba(0,0,0,.6);
fill: var(--_access-menu-item-icon-color, rgba(0,0,0,.6));
transition-duration: .35s;
transition-timing-function: ease-in-out;
}
._access-menu ul li button:hover svg path {
fill: rgba(0,0,0,.8);
fill: var(--_access-menu-item-hover-icon-color, rgba(0,0,0,.8));
}
._access-menu ul li button.active svg path {
fill: #fff;
fill: var(--_access-menu-item-active-icon-color, #fff);
}
._access-menu ul li:hover button:before {
color: rgba(0,0,0,.8);
color: var(--_access-menu-item-hover-icon-color, rgba(0,0,0,.8));
}
._access-menu ul li button.active button:before {
color: #fff;
color: var(--_access-menu-item-active-icon-color, #fff);
}
._access-menu ul li button[data-access-action="increaseText"]:before {
content: var(--_access-menu-item-icon-increase-text, ${!this.options.icon.useEmojis ? '"zoom_in"' : '"🔼"'});
Expand Down
Loading

0 comments on commit 000d18a

Please sign in to comment.