@uoh/accessibility v0.0.2

@uoh/accessibility

University of Haifa Accessibility Menu & Features

Installation

$ npm install @uoh/accessibility --save

Note that the uoh-core mixin from the @uoh/theme is required.

This library uses the material icons font. To import it add the following line to your index.html:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usage

Import the AccessibilityModule in your app.module.ts. For example:

import { AccessibilityModule } from '@uoh/accessibility';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AccessibilityModule, MatCardModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then, wrap the contents of your app inside the uoh-accessibility tag:

<uoh-accessibility [dir]="dir">
  <div class="wrapper">
    <mat-card class="small-card">
      <mat-card-content>
        <div style="text-align:center">
          <h1>
            Welcome to {{ title }}!
          </h1>
        </div>
        <h2>University of Haifa</h2>
      </mat-card-content>
    </mat-card>
  </div>
</uoh-accessibility>

Note: You can set the direction of all the app contents by setting the dir input variable to rtl (default) or ltr.

Include the accessibility theme:

To set the theme of the accessibility button and menu add the following lines to your styles.scss file:

@import '~@uoh/accessibility/accessibility.theme';

@include uoh-accessibility($default-theme);

.dark-theme {
  @include uoh-accessibility($dark-theme);
}