diff --git a/.storybook/addons.js b/.storybook/addons.js
index 9df5d0e21..ef8f6b166 100755
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -4,3 +4,4 @@ import '@storybook/addon-notes/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register';
+import '@storybook/addon-a11y/register';
diff --git a/.storybook/config.js b/.storybook/config.js
index 3afce89d5..af855a6b9 100755
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,9 @@
-import { configure } from '@storybook/polymer';
+import { configure, addDecorator } from '@storybook/polymer';
+import { withA11y } from '@storybook/addon-a11y';
import '@storybook/addon-console';
+addDecorator(withA11y);
+
const req = require.context('../stories', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
diff --git a/package.json b/package.json
index e66d26c3d..c6445169f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@open-wc/testing-karma": "^3.1.33",
"@open-wc/testing-karma-bs": "^1.1.58",
"@open-wc/testing-wallaby": "^0.1.12",
+ "@storybook/addon-a11y": "~5.0.0",
"@webcomponents/webcomponentsjs": "^2.2.5",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 5f92bb082..d34b22375 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -92,7 +92,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
padding: 0;
}
- :host(:focus) .btn {
+ :host(:focus:not([disabled])) .btn {
/* if you extend, please overwrite */
outline: 2px solid #bde4ff;
}
@@ -137,6 +137,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
if (!this.constructor._button) {
this.constructor._button = document.createElement('button');
this.constructor._button.setAttribute('tabindex', '-1');
+ this.constructor._button.setAttribute('aria-hidden', true);
}
return this.constructor._button.cloneNode();
},
diff --git a/packages/button/stories/index.stories.js b/packages/button/stories/index.stories.js
index 2899060c5..3cc9a6cc4 100644
--- a/packages/button/stories/index.stories.js
+++ b/packages/button/stories/index.stories.js
@@ -41,10 +41,10 @@ storiesOf('Buttons|Button', module)
console.log('submit handler');
}}
>
-
-
-
-
+
+
+
+
console.log('click handler')}>Submit
diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js
index eae39df63..e75bd35fb 100644
--- a/packages/button/test/lion-button.test.js
+++ b/packages/button/test/lion-button.test.js
@@ -222,6 +222,12 @@ describe('lion-button', () => {
);
restoreMockIsIE11();
});
+
+ it('has a native button node with aria-hidden set to true', async () => {
+ const el = await fixture('');
+
+ expect(el._nativeButtonNode.getAttribute('aria-hidden')).to.equal('true');
+ });
});
describe('form integration', () => {
diff --git a/packages/calendar/src/LionCalendar.js b/packages/calendar/src/LionCalendar.js
index b04270260..56294c666 100644
--- a/packages/calendar/src/LionCalendar.js
+++ b/packages/calendar/src/LionCalendar.js
@@ -17,7 +17,7 @@ import { calendarStyle } from './calendarStyle.js';
import { createDay } from './utils/createDay.js';
/**
- * @customElement
+ * @customElement lion-calendar
*/
export class LionCalendar extends LocalizeMixin(LitElement) {
static get localizeNamespaces() {
@@ -26,55 +26,40 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
'lion-calendar': locale => {
switch (locale) {
case 'bg-BG':
- case 'bg':
return import('../translations/bg.js');
case 'cs-CZ':
- case 'cs':
return import('../translations/cs.js');
case 'de-AT':
case 'de-DE':
- case 'de':
return import('../translations/de.js');
case 'en-AU':
case 'en-GB':
case 'en-PH':
case 'en-US':
- case 'en':
return import('../translations/en.js');
case 'es-ES':
- case 'es':
return import('../translations/es.js');
case 'fr-FR':
case 'fr-BE':
- case 'fr':
return import('../translations/fr.js');
case 'hu-HU':
- case 'hu':
return import('../translations/hu.js');
case 'it-IT':
- case 'it':
return import('../translations/it.js');
case 'nl-BE':
case 'nl-NL':
- case 'nl':
return import('../translations/nl.js');
case 'pl-PL':
- case 'pl':
return import('../translations/pl.js');
case 'ro-RO':
- case 'ro':
return import('../translations/ro.js');
case 'ru-RU':
- case 'ru':
return import('../translations/ru.js');
case 'sk-SK':
- case 'sk':
return import('../translations/sk.js');
case 'uk-UA':
- case 'uk':
return import('../translations/uk.js');
case 'zh-CN':
- case 'zh':
return import('../translations/zh.js');
default:
return import(`../translations/${locale}.js`);
diff --git a/packages/calendar/src/calendarStyle.js b/packages/calendar/src/calendarStyle.js
index 5a718cfac..e6cd64110 100644
--- a/packages/calendar/src/calendarStyle.js
+++ b/packages/calendar/src/calendarStyle.js
@@ -44,6 +44,7 @@ export const calendarStyle = css`
.calendar__day-button {
background-color: #fff;
border: 0;
+ color: black;
padding: 0;
min-width: 40px;
min-height: 40px;
@@ -59,7 +60,7 @@ export const calendarStyle = css`
.calendar__day-button[previous-month],
.calendar__day-button[next-month] {
- color: #ddd;
+ color: rgb(115, 115, 115);
}
.calendar__day-button:hover {
diff --git a/packages/calendar/src/utils/dayTemplate.js b/packages/calendar/src/utils/dayTemplate.js
index 40ee869d0..38a7bde25 100644
--- a/packages/calendar/src/utils/dayTemplate.js
+++ b/packages/calendar/src/utils/dayTemplate.js
@@ -28,7 +28,7 @@ export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }
class="calendar__day-button"
tabindex=${day.central ? '0' : '-1'}
aria-label=${`${dayNumber} ${monthName} ${year} ${weekdayName}`}
- aria-selected=${day.selected ? 'true' : 'false'}
+ aria-pressed=${day.selected ? 'true' : 'false'}
aria-current=${ifDefined(day.today ? 'date' : undefined)}
?disabled=${day.disabled}
?selected=${day.selected}
diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js
index de2948c6d..8ea9f16a7 100644
--- a/packages/calendar/test/lion-calendar.test.js
+++ b/packages/calendar/test/lion-calendar.test.js
@@ -563,7 +563,7 @@ describe('', () => {
class="calendar__day-button"
tabindex="0"
aria-label="30 September 2019 Monday"
- aria-selected="false"
+ aria-pressed="false"
past=""
current-month="">
30
@@ -1099,14 +1099,14 @@ describe('', () => {
expect(elObj.checkForAllDayObjs(hasAriaCurrent, [monthday])).to.equal(true);
});
- it('sets aria-selected="true" on selected date button', async () => {
+ it('sets aria-pressed="true" on selected date button', async () => {
const elObj = new CalendarObject(
await fixture(html`
`),
);
- const hasAriaSelected = d => d.buttonEl.getAttribute('aria-selected') === 'true';
- expect(elObj.checkForAllDayObjs(hasAriaSelected, [12])).to.equal(true);
+ const hasAriaPressed = d => d.buttonEl.getAttribute('aria-pressed') === 'true';
+ expect(elObj.checkForAllDayObjs(hasAriaPressed, [12])).to.equal(true);
});
// This implementation mentions "button" inbetween and doesn't mention table
diff --git a/packages/calendar/test/utils/dayTemplate.test.js b/packages/calendar/test/utils/dayTemplate.test.js
index 61a7a777e..a33685ce1 100644
--- a/packages/calendar/test/utils/dayTemplate.test.js
+++ b/packages/calendar/test/utils/dayTemplate.test.js
@@ -18,7 +18,7 @@ describe('dayTemplate', () => {
class="calendar__day-button"
tabindex="-1"
aria-label="19 April 2019 Friday"
- aria-selected="false"
+ aria-pressed="false"
>
19
diff --git a/packages/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js b/packages/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js
index 969b7455e..137d3c97d 100644
--- a/packages/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js
+++ b/packages/calendar/test/utils/snapshots/monthTemplate_en-GB_Sunday_2018-12.js
@@ -54,7 +54,7 @@ export default html`
|
|