A Svelte Accessibility Component Library

About Us

Welcome to Svve11! We bring to your Svelte applications a fully tested, ready-to-use library of components with an accessibility first design philosophy!

For easier readability of documentation, check out our website http://www.svve11.io/

Features

✅ 8 Components with an accessibility-first design
✅ Fully-tested for accessibility standards and functionality
✅ Ready to use and easy to implement

Getting Started

Installing the Component Library as a product dependency

Svve11 can easily be installed for use in your application as follows.

From the terminal, navigate to your project directory.
Run the following command in your terminal.

npm install --save-dev 'svve11'

Components can now be imported directly into your Svelte files as documented below.

Technologies

Components

Accordion

Import the accordion component using the command below in the script section of your .svelte file.

import Accordion from 'svve11/Accordion.svelte';

To supply the accordion with its contents, an options object is passed as a prop to the accordion. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 4 properties.
- (2) required props:
  - panelInfo (an array of objects): It must be an array of objects, with each object containing information for one accordion item. Each object must contain:
    - id (number): used to set the id of the accordion header and panel. If you will have more than one accordion in your application, be sure to continue the sequence of numbers instead of starting back at 1.
    - panelContent (string): sets the text contents of the panel.
    - headerTitle (string): sets the title of the accordion section.
  - headerLevel (number): Sets the aria-level for each header in the accordion. For information on deciding the appropriate value to be supplied, visit this webpage.
- (2) optional props:
  - styles (object): This property is an object with four assignable key/value pairs. The required key properties are:
    - accordionHeaderStyle: sets the style attribute for each accordion header
    - accordionPanelStyle: sets the style attribute for each accordion panel
    - accordionItemStyle: sets the style attribute for each accordion item
    - overallAccordionStyle: sets the style attribute for the accordion as a whole
  - multiselectable (boolean): This property is optional, and will default to false. When set to true, the accordion can expand multiple panels at one time. When set to false, the accordion can expand only one panel at a time. For accesibility purposes, it is recommended to leave this as the default setting.

Example Options Object

const accordionOptions = {
	panelInfo: [
		{
			id: 1,
			panelContent: 'My first panel text.',
			headerTitle: 'My first header title'
		},
		{
			id: 2,
			panelContent: 'My second panel text.',
			headerTitle: 'My second header title'
		}
	],
	headerLevel: 4,
	styles: {
		accordionHeaderStyle: 'Header styles string',
		accordionPanelStyle: 'Panel styles string;',
		accordionItemStyle: 'Item styles string',
		overallAccordionStyle: 'Accordion styles string'
	},
	multiselectable: false
};

An accordion instance can be created by placing the code below in the body of your .svelte file.

<Accordion options={accordionOptions} />

Button

Import the Button component using the command below in the script section of your .svelte file.

import Button from 'svve11/Button.svelte';

To supply the button with its contents, an options object is passed as a prop to the button. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 5 properties.
- (4) required props:
  - id (string): sets the id attribute of the button component.
  - label (string): sets the aria-label attribute.
  - content (string): sets the text that is displayed inside the button component.
  - handleClick (function): defines the action or event to be triggered when the button is clicked.
- (1) optional prop:
  - style (string): sets the styles of the button component

Example Options Object

const buttonOptions = {
	id: 'demo-button-1',
	content: 'Click me!',
	label: 'accessible-button-1',
	handleClick: () => console.log('You clicked a button!'),
	style: 'height: 50px; width: 300px;'
};

A Button instance can be created by placing the code below in the body of your .svelte file.

<Button options={buttonOptions} />

CheckBox

Import the checkbox component using the command below in the script section of your .svelte file.

import Checkbox from 'svve11/Checkbox.svelte';

To supply the checkbox with its contents, an options object is passed as a prop to the checkbox. This object can be crea 8000 ted in the script section of the .svelte file or imported in from another location. The options object has 7 properties.
- (3) required props:
  - id (string): sets the id attribute of the checkbox component. Be sure to have a unique string for each checkbox.
  - checkBoxLabel (string): sets the text label that corresponds with component.
- (4) optional props:
  - checkBoxStyle (string): sets the styling for the checkbox.
  - checkBoxLabelStyle (string): sets the styling for the checkbox label text.
  - name (string): sets the group name to which the checkbox belongs. All checkbox in one group should have the same name attribute.
  - value (string): sets the value associated with the given checkbox.

Example Options Object

const checkboxOptions = {
	checkBoxLabel: 'checkbox number one',
	id: 'checkbox-1',
	checked: false,
	checkBoxStyle: 'height: 1.5em; width: 1.5em; vertical-align: middle;',
	checkBoxLabelStyle: 'font-size:1em; vertical-align: middle;'
};

An checkbox instance can be created by placing the code below in the body of your .svelte file.

<Checkbox options={checkboxOptions} />

Meter

Import the meter component using the command below in the script section of your .svelte file.

import Meter from 'svve11/Meter.svelte';

To supply the meter with its contents, an options object is passed as a prop to the meter. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 13 properties.
- (5) required props:
  - value (number): sets the current value of the meter. Must be within the minValue to maxValue range. It is recommended to use a reactive variable to allow meter value to change as necessary.
  - maxValue (number): sets the maximum value for the meter range.
  - minValue (number): sets the minimum value for the meter range.
  - meterLabel (string): sets the text label for the meter. The label will be automatically joined with a percentage calculation, unless otherwise specified. See displayDecimal in optional props section.
  - id (string): sets the id for the meter. Remember to provide different id numbers when instantiating more than one meter on a page as the id should be unique.
- (8) optional props:
  - lowValue (number): sets the value from which a current value below is considered low. Must be greater than minValue and less than the maxValue and highValue.
  - highValue (number): sets the value from which a current value above is considered high. Must be less than maxValue and greater than the minValue and lowValue.
  - optimumValue (number): sets the optimal numeric value of the meter. Must be a number between the minValue and maxValue. If the optimal value is set between the minValue and lowValue, or the maxValue and highValue, this range is considered optimal. Different browsers will color the bar differently depending on where the current value falls in relation to the optimal value.
  - valueText (string): used for assistive technologies that read the value of the meter to the users. Most assistive technologies will read value as a percentage by default, thus this prop should be provided if a percentage read does not make sense in the context of your meter use.
  - displayDecimal (boolean): this will default to false. If set to true, this indicates to the meter that the value should not be presented as a percentage. This prop must be accompanied by the units prop described next.
  - units (string): sets the units to be displayed in the meter label should the percentage default not be relevant.
  - meterStyle (string): sets the style for the meter for any custom styles.
  - labelStyle (string): sets the style for the meter label for any custom styles.

Example Options Object

const meterOptions = {
	value: 60,
	maxValue: 100,
	minValue: 0,
	meterLabel: 'Demo meter',
	id: 1,
	lowValue: 20,
	highValue: 80,
	optimumValue: 85
};

A meter instance can be created by placing the code below in the body of your .svelte file.

<Meter options={meterOptions} />

NavBar

Import the navigation bar (nav bar) component using the command below in the script section of your .svelte file.

import NavBar from 'svve11/NavBar.svelte';

To supply the nav bar with its contents, an options object is passed as a prop to the nav bar. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 10 properties.
- (5) required props:
  - id (string): This property is required. This will be the id attribute you reference for styling inside your navbar component. An example would be “navbar”.
  - contentInfo (an array of objects): This property is required. It contains all the content to be displayed in your nav bar. Each object in the array must contain:
    - subheading (string): This property is optional. Sets the subheading for this section of the nav bar.
    - options(an array of strings): This property is required. Contains strings in the order you want them to appear in the nav bar section.
    - links(array): This property is required. Sets the href attributes for each option provided. This array should be provided in the same order that the options array was provided.
- (5) optional props:
  - header (string): This property is optional. It contains the heading for the entire nav bar.
  - imgSrc (string): This property is optional. It contains the file path for an image you want included at the top of the nav bar, such as a company logo.
  - imgClass (string): This property is optional. This will set the class name for the imgSrc for styling purposes.
  - imgAlt (string): This property is optional. This sets the alternate text in the event the image cannot render.

Example Options Object

const navBarOptions = {
   id: "testnav",
   header: "Menu",
   contentInfo: [
         {
            subheading: "general",
            options: [
            "option1", "option2", "option3"
            ],
            links: [
            "", "", ""
         ]
         },
         {
         subheading: "other stuff",
         options: [
            "option4", "option5", "option6"
            ],
         links: [
            "", "", ""
         ]
         }
      ],
         imgSrc: “./images/comp-logo.png”,
         imgClass: “navbar-logo”,
         imgAlt: “company logo”
   }

A nav bar instance can be created by placing the code below in the body of your .svelte file.

<NavBar options={navBarOptions} />

Nav Bar Styling

Styles can be applied to different parts of the nav bar in your styling file by referencing the assigned class and id names.

NavBar as a whole: Has an id of set by the id property defined in the options object.
NavBar Header: Has an id of “navbar-header”.
NavBar Sections: Has a class of "sv-navbar-section".
NavBar Subheading(s): Has a class of “navbar-subheader”.
NavBar Options: Has a class of “navbar-option”.

Radio Button

Import the radio button component using the command below in the script section of your .svelte file.

import RadioButton from 'svve11/RadioButton.svelte';

To supply the radio button with its contents, an options object is passed as a prop to the radio button. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 10 properties.
- (3) required props:
  - id (string): sets the id attribute of the radio button component.
  - radioButtonLabel (string): sets the text label that corresponds with component
- (4) optional props:
  - radioButtonStyle (string): sets the styling for the radio button
  - radioButtonLabelStyle (string): sets the styling for the radio button label text'
  - name (string): sets the group name to which the radio button belongs. All radio buttons in one group should have the same name attribute. This property must be defined to allow only one radio button to be selected within a given group.
  - value (string): sets the value associated with the given radio button.

Example Options Object

const radioButtonOptions = {
	id: 'radioButtonOne',
	radioButtonLabel: 'Pizza',
	checked: false,
	radioButtonStyle: 'height: 1.5em; width: 1.5em;',
	radioButtonLabelStyle: 'font-size:1.5em;',
	name: 'food',
	value: 1
};

A radio button instance can be created by placing the code below in the body of your .svelte file.

<RadioButton options={radioButtonOptions} />

Table

Import the table component using the command below in the script section of your .svelte file.

import Table from 'svve11/Table.svelte';

To supply the table with its contents, a tableProps object is passed as a prop to the table. This object can be created in the script section of the .svelte file or imported in from another location. The tableProps object has (6) properties.
- (4) required properties:
  - ariaLabel (string): sets the aria-label attribute of the table
  - ariaDescription (string): this string will be displayed as the title of the table. It will also set the table's aria-description attribute.
  - columnNames (an array of strings): each string in the array corresponds to a column name of the table.
  - rowsContent (an array of arrays of strings):
    - each inner array corresponds to a row of the table
      - each string in the inner array corresponds to a cell in the row
      - Note: the number of strings in each of these arrays should match the number of strings in the columnNames array
- (2) optional properties:
  - id (string): sets the id attribute of the table
  - styles (object with (6) optional properties):
    - overallStyles (string): sets the style attribute of the overall table element
    - titleStyles (string): sets the style attribute of the table's title
    - headersRowStyles (string) sets the style attribute of the first row of the table, which contains the table's column names
    - generalRowStyles (string): sets the style attributes of all the table's rows
    - oddRowStyles (string): sets the style attributes of all the table's odd rows
    - evenRowStyles (string): sets the style attributes of all the table's even rows

Example Options Object

const tableOptions = {
	id: 'demo-table',
	ariaLabel: 'demo',
	ariaDescription: 'svve11 team information',
	columnNames: ['Name', 'Age', 'Favorite Color'],
	rowsContent: [
		['Nurbek', '19', 'White'],
		['Paul', '26', 'Red'],
		['Tim', '29', 'Blue'],
		['Simon', '26', 'Green']
	],
	styles: {
		overallStyles: 'background-color: powderblue',
		titleStyles: 'text-align: left;',
		headersRowStyles: 'background-color: grey',
		generalRowStyles: 'font-weight: lighter',
		oddRowStyles: 'background-color: white',
		evenRowStyles: 'background-color: lightgrey'
	}
};

A table instance can be created by placing the code below in the body of your .svelte file.

<Table options={tableOptions} />

Text Input

Import the text input component using the command below in the script section of your .svelte file.

import TextInput from 'svve11/TextInput.svelte';

The text input component has (6) props.
- (4) required props:
  - label (string): A short summary describing what the text input is asking for from the user. An example would be “Your email here:”.
  - placeholder (string): A short statement in the text input box that will hint to the user what kind of input is expected. An example would be “eg. jsmith@gmail.com”.
  - id (string): Specifies a unique id for the text field for developers to reference. An example would be “user-email”.
  - type (string): Specifies what kind of input is expected by the developer. An example would be “email”.
- (2) optional props:
  - inputStyle (string): Used to style the text input box.
  - labelStyle (string): Used to style the label above the text input box.

Example Options Object

const textInputOptions = {
	label: 'Your email here:',
	placeholder: 'jsmith@gmail.com',
	id: 'user-email',
	type: 'email',
	labelStyle: 'font-family:Times New Roman; font-size:20px',
	inputStyle: 'color: blue'
};

A text input instance can be created by placing the code below in the body of your .svelte file.

<TextInput options={textInputOptions} />

The following are optional attributes available with this component. Each of these attributes has the same function as the HTML attribute with its same name. Please check W3Schools or MDN's webpages to learn more about how these work. By default, all attributes of type boolean are set to false.
- max (string)
- min (string)
- maxLength (string)
- size (string)
- step (string)
- inputStyle (string)
- labelStyle (string)
- autocomplete (boolean)
- disabled (boolean)
- multiple (boolean)
- readonly (boolean)
- required (boolean)

The Svve11 Team

Nurbek Jouraboev @iamNurbek
Simon H Lee @LeeSimonH
Timothy Barry @tbarry16
Paul Swierkosz @swierkopa

If You Want To Contribute!

Cloning this Repository

Sve11 is created using npm. Be sure to have Node.js and NPM installed on your computer before beginning.

To clone this repository, you must:

Fork the repository to your own GitHub.
Clone the repository and install dependencies by running the following commands in the terminal.

git clone https://github.com/[Your GitHub Handle]/Svve11
cd Svve11
npm install

Support Svve11

If you found this interesting or helpful at all, feel free to drop a ⭐ ⭐ on this project to show your support!

The future of Svve11

All bugs, tasks or enhancements are tracked as GitHub issues.

The following is a list of features + improvements for future open-source developers that the The Svve11 team has either started or would like to see implemented. If you have additional new ideas, feel free to implement those as well! Much appreciated.

Some components to add:

Alert
Clickable Image Link
Dialog (Modal)
Disclosure
Listbox
Menu Button
Slider
Tooltip

Some enhancements to add:

Give each component customized classes or ids
Create a Prototyping GUI to build and test components

License

This project is available under the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 290 Commits
src		src
static		static
.babelrc		.babelrc
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.npmrc		.npmrc
.prettierrc		.prettierrc
README.md		README.md
jest.config.ts		jest.config.ts
package-lock.json		package-lock.json
package.json		package.json
svelte.config.js		svelte.config.js
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

A Svelte Accessibility Component Library

About Us

Features

Getting Started

Installing the Component Library as a product dependency

Technologies

Components

Accordion

Example Options Object

Button

Example Options Object

CheckBox

Example Options Object

Meter

Example Options Object

NavBar

Example Options Object

Nav Bar Styling

Radio Button

Example Options Object

Table

Example Options Object

Text Input

Example Options Object

The Svve11 Team

If You Want To Contribute!

Cloning this Repository

Support Svve11

The future of Svve11

License

About

Releases

Packages

Languages

swierkopa/Svve11

Folders and files

Latest commit

History

Repository files navigation

A Svelte Accessibility Component Library

About Us

Features

Getting Started

Installing the Component Library as a product dependency

Technologies

Components

Accordion

Example Options Object

Button

Example Options Object

CheckBox

Example Options Object

Meter

Example Options Object

NavBar

Example Options Object

Nav Bar Styling

Radio Button

Example Options Object

Table

Example Options Object

Text Input

Example Options Object

The Svve11 Team

If You Want To Contribute!

Cloning this Repository

Support Svve11

The future of Svve11

License

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages