diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a92041..f331500 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [0.5.2] - 2020-04-14 + +### Changed + +- Updated `a11y-dialog` to latest version + +### Fixed + +- Fixes mistakenly used `titleId` in `aria-labelledby` with `fullTitleId` ([#23](https://github.com/morkro/vue-a11y-dialog/pull/23)) + ## [0.5.1] - 2020-02-12 ### Changed diff --git a/README.md b/README.md index 332b606..b970af5 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # Vue A11yDialog [![Build Status](https://travis-ci.org/morkro/vue-a11y-dialog.svg?branch=master)](https://travis-ci.org/morkro/vue-a11y-dialog) -This is a Vue.js wrapper component for [`a11y-dialog@5.2.0`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)) using [`portal-vue@2.1.7`](https://github.com/LinusBorg/portal-vue). +This is a Vue.js wrapper component for [`a11y-dialog@5.3.1`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)) using [`portal-vue@2.1.7`](https://github.com/LinusBorg/portal-vue). -- [Install](#install) -- [Usage](#usage) - - [Multiple dialogs](#multiple-dialogs) -- [API](#api) -- [Events](#events) -- [Slots](#slots) -- [Server-side Rendering](#server-side-rendering) +- [Install](#install) +- [Usage](#usage) + - [Multiple dialogs](#multiple-dialogs) +- [API](#api) +- [Events](#events) +- [Slots](#slots) +- [Server-side Rendering](#server-side-rendering) ## Install @@ -21,9 +21,9 @@ npm install vue-a11y-dialog In your `main.js` application file, install the component: ```js -import VueA11yDialog from 'vue-a11y-dialog' +import VueA11yDialog from "vue-a11y-dialog"; -Vue.use(VueA11yDialog) +Vue.use(VueA11yDialog); ``` Then use it as follows: @@ -52,26 +52,27 @@ Then use it as follows: ``` + ```js export default { - name: 'YourComponent', + name: "YourComponent", data: () => ({ dialog: null }), methods: { - openDialog () { + openDialog() { if (this.dialog) { - this.dialog.show() + this.dialog.show(); } }, - assignDialogRef (dialog) { - this.dialog = dialog + assignDialogRef(dialog) { + this.dialog = dialog; } } -} +}; ``` In your `index.html`, add a container where your dialog will be rendered into. @@ -92,18 +93,18 @@ It's important to assign the direct reference to the dialog instance via `@dialo Alternatively, you can also import the component directly into your file without installing it first: ```js -import { A11yDialog } from 'vue-a11y-dialog' +import { A11yDialog } from "vue-a11y-dialog"; export default { - name: 'YourComponent', + name: "YourComponent", components: { - 'a11y-dialog': A11yDialog + "a11y-dialog": A11yDialog }, methods: { // ... } -} +}; ``` ### Multiple dialogs @@ -149,21 +150,22 @@ In your `