diff --git a/src/il-accordion/README.md b/src/il-accordion/README.md index 402d1066..077d942a 100644 --- a/src/il-accordion/README.md +++ b/src/il-accordion/README.md @@ -9,29 +9,9 @@ Each section of an accordion contains 2 parts: The `il-accordion` element contains 1 or more `il-panel` components, each of which defines its corresponding `header`. -```html - - -

Student Services

-
- - - -
-
- -

Faculty Services

-
- - - -
-
- - - -
-``` + + An accordion with three panels + ## Limiting the number of expanded panels diff --git a/src/il-accordion/il-accordion.spec.js b/src/il-accordion/il-accordion.spec.js index 93f29e8c..b1d756fb 100644 --- a/src/il-accordion/il-accordion.spec.js +++ b/src/il-accordion/il-accordion.spec.js @@ -1,3 +1,80 @@ -import { test } from '@playwright/test'; +import { test, expect } from '@playwright/test'; -test('accordion test', () => test.fail()); \ No newline at end of file +const apgAccordionPattern = "https://www.w3.org/WAI/ARIA/apg/patterns/accordion/"; + +test('clicking on the header of a collapsed panel expands the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-three-panels.html'); + await page.getByText('Alumni', { exact: true }).click(); + await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible(); +}) +test('clicking on the header of an expanded panel collapses the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-expanded-panel.html'); + await page.getByText('Alumni', { exact: true }).click(); + await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible(); +}) +test.describe('when a header has focus', () => { + test.describe('and its panel is collapsed', () => { + test('pressing enter expands the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-three-panels.html'); + await page.getByText('Alumni', { exact: true }).focus(); + await page.keyboard.press('Enter'); + await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible(); + }) + test('pressing space expands the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-three-panels.html'); + await page.getByText('Alumni', { exact: true }).focus(); + await page.keyboard.press('Space'); + await expect(page.getByText('Learn about some notable LAS alumni')).toBeVisible(); + }) + }) + test.describe('and its panel is expanded', () => { + test('pressing enter collapses the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-expanded-panel.html'); + await page.getByText('Alumni', { exact: true }).focus(); + await page.keyboard.press('Enter'); + await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible(); + }) + test('pressing space collapses the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-expanded-panel.html'); + await page.getByText('Alumni', { exact: true }).focus(); + await page.keyboard.press('Space'); + await expect(page.getByText('Learn about some notable LAS alumni')).not.toBeVisible(); + }) + }) +}); +test.describe('when a header has focus and it is not the first panel header', () => { + test.describe('and the previous panel is collapsed', () => { + test('pressing shift+tab moves focus to the header of the previous panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-three-panels.html'); + await page.getByText('Faculty', { exact: true }).focus(); + await page.keyboard.press('Shift+Tab'); + await expect(page.getByText('Alumni', { exact: true })).toBeFocused(); + }) + }) + test.describe('and the previous panel is expanded', () => { + test('pressing shift+tab moves focus to the last link in the previous panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-expanded-panel.html'); + await page.getByText('Faculty', { exact: true }).focus(); + await page.keyboard.press('Shift+Tab'); + await expect(page.getByText('Learn about some notable LAS alumni')).toBeFocused(); + }) + }) +}); +test.describe('when a header has focus and it is not the last panel header', () => { + test.describe('and its panel is collapsed', () => { + test('pressing tab moves focus to the header of the next panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-three-panels.html'); + await page.getByText('Faculty', { exact: true }).focus(); + await page.keyboard.press('Tab'); + await expect(page.getByText('Students', { exact: true })).toBeFocused(); + }) + }) + test.describe('and its panel is expanded', () => { + test('pressing tab moves focus to the first link in the panel', async ({ page }) => { + await page.goto('il-accordion/samples/accordion-with-expanded-panel.html'); + await page.getByText('Alumni', { exact: true }).focus(); + await page.keyboard.press('Tab'); + await expect(page.getByText('Learn about some notable LAS alumni')).toBeFocused(); + }) + }) +}); diff --git a/src/il-accordion/samples/accordion-with-expanded-panel.html b/src/il-accordion/samples/accordion-with-expanded-panel.html new file mode 100644 index 00000000..745a40ca --- /dev/null +++ b/src/il-accordion/samples/accordion-with-expanded-panel.html @@ -0,0 +1,53 @@ + + +

Alumni

+
+
    +
  • More than 183,000 accomplished alumni including seven Nobel Laureates and nine Pulitzer Prize winners
  • +
  • LAS alumni live in all 50 states, the District of Columbia, and Puerto Rico as well as 141 other countries
  • +
  • Learn about some notable LAS alumni
  • +
+
+
+ +

Faculty

+
+
    +
  • More than 600 tenure system faculty members; 31.4% of the 1,911 tenure system faculty on campus
  • +
      +
    • 38% female
    • +
    • 15% from underrepresented groups
    • +
    +
  • 9 current American Academy of Arts & Sciences members
  • +
  • 9 National Academy of Science members
  • +
  • 9 Guggenheim Fellowship recipients since 2015
  • +
  • 2 current National Academy of Engineering members
  • +
  • 2 National Academy of Medicine Members
  • +
+
+
+ +

Students

+
+
    +
  • More than 14,750 students—26% of all students on campus
  • +
      +
    • 11,000+ undergraduates; more than 2,600 graduate students
    • +
    +
  • Undergraduates +
      +
    • 74% in state, 26% out of state
    • +
    • 16% international
    • +
    • 24% from underrepresented groups
    • +
    • 2,257 first-year students and 459 transfer students in Fall 2022; 22.5% are first-generation college students
    • +
    +
  • 94% of 2021-22 graduates secured a first destination soon after graduating with an average salary of $74,705. Learn more on the Illini Success website.
  • +
+

To learn more about the students of LAS, visit our student statistics page.

+
+
+
+ + + + diff --git a/src/il-accordion/samples/accordion-with-three-panels.html b/src/il-accordion/samples/accordion-with-three-panels.html new file mode 100644 index 00000000..a2dc1c57 --- /dev/null +++ b/src/il-accordion/samples/accordion-with-three-panels.html @@ -0,0 +1,53 @@ + + +

Alumni

+
+
    +
  • More than 183,000 accomplished alumni including seven Nobel Laureates and nine Pulitzer Prize winners
  • +
  • LAS alumni live in all 50 states, the District of Columbia, and Puerto Rico as well as 141 other countries
  • +
  • Learn about some notable LAS alumni
  • +
+
+
+ +

Faculty

+
+
    +
  • More than 600 tenure system faculty members; 31.4% of the 1,911 tenure system faculty on campus
  • +
      +
    • 38% female
    • +
    • 15% from underrepresented groups
    • +
    +
  • 9 current American Academy of Arts & Sciences members
  • +
  • 9 National Academy of Science members
  • +
  • 9 Guggenheim Fellowship recipients since 2015
  • +
  • 2 current National Academy of Engineering members
  • +
  • 2 National Academy of Medicine Members
  • +
+
+
+ +

Students

+
+
    +
  • More than 14,750 students—26% of all students on campus
  • +
      +
    • 11,000+ undergraduates; more than 2,600 graduate students
    • +
    +
  • Undergraduates +
      +
    • 74% in state, 26% out of state
    • +
    • 16% international
    • +
    • 24% from underrepresented groups
    • +
    • 2,257 first-year students and 459 transfer students in Fall 2022; 22.5% are first-generation college students
    • +
    +
  • 94% of 2021-22 graduates secured a first destination soon after graduating with an average salary of $74,705. Learn more on the Illini Success website.
  • +
+

To learn more about the students of LAS, visit our student statistics page.

+
+
+
+ + + + diff --git a/src/il-carousel/il-carousel.spec.js b/src/il-carousel/il-carousel.spec.js new file mode 100644 index 00000000..8e208715 --- /dev/null +++ b/src/il-carousel/il-carousel.spec.js @@ -0,0 +1,286 @@ +import { test } from '@playwright/test'; + +/* +test('has buttons to rewind and advance the carousel', () => { + test.info().annotations.push({ + source: 'arrow-controls' + }); + test.fail(); +}); + +test('buttons with images should have alt attributes', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.1.1', + technique: 'H36' + } + }); + test.fail(); +}); + +test('markup uses semantic elements to convey relationships', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.3.1', + technique: 'G115' + } + }); + test.fail(); +}); + +test('slides are placed in correct sequence', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.3.2', + technique: 'C6' + } + }); + test.fail(); +}); + +test('provides textual information for carousel images', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.3.3', + technique: 'G96' + } + }); + test.fail(); +}); + +test('responds to changes in screen orientation', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.3.4' + } + }); + test.fail(); +}); + +test('color is used to indicated focus', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.1', + technique: 'C15' + } + }); + test.fail(); +}); + +test('small text has correct color contrast', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.3', + technique: 'G18' + } + }); + test.fail(); +}); + +test('big text has correct color contrast', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.3', + technique: 'G145' + } + }); + test.fail(); +}); + +test('uses ems for text sizes', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.4', + technique: 'C14' + } + }); + test.fail(); +}); + +test('text is responsive', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.4', + technique: 'G179' + } + }); + test.fail(); +}); + +test('layout is responsive', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.10', + technique: 'C32' + } + }); + test.fail(); +}); + +test('images is responsive', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.10', + technique: 'C37' + } + }); + test.fail(); +}); + +test('icons have sufficient color contrast', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.11', + technique: 'G207' + } + }); + test.fail(); +}); + +test('small text in graphics has sufficient color contrast', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.11', + technique: 'G18' + } + }); + test.fail(); +}); + +test('large text in graphics has sufficient color contrast', () => { + test.info().annotations.push({ + wcag: { + criteria: '1.4.11', + technique: 'G145' + } + }); + test.fail(); +}); + +test('can be operated with the keyboard', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.1.1', + technique: 'G202' + } + }); + test.fail(); +}); + +test('actions are keyboard accessible', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.1.1', + technique: 'SCR35' + } + }); + test.fail(); +}); + +test('keyboard users can tab in and out of the component', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.1.2', + technique: 'G21' + } + }); + test.fail(); +}); + +test('the carousel can be paused and restarted', () => { + test.info().annotations.push({ + wcag: { + criteria: ['2.2.1', '2.2.2'], + technique: 'G4' + } + }); + test.fail(); +}); + +test('autoplay can be disabled', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.2.1', + technique: 'G198' + } + }); + test.fail(); +}); + +test('the component respects the reduce-motion CSS query', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.3.3', + technique: 'C39' + } + }); + test.fail(); +}); + +test('the focus order matches the source order', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.4.3', + technique: 'G59' + } + }); + test.fail(); +}); + +test('headings are descriptive', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.4.6', + technique: 'G130' + } + }); + test.fail(); +}); + +test('labels are descriptive', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.4.6', + technique: 'G131' + } + }); + test.fail(); +}); + +test('interface elements are highlighted when they receive focus', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.4.7', + technique: ['G149', 'C15', 'G195'] + } + }); + test.fail(); +}); + +test('component does not require path-based gestures', () => { + test.info().annotations.push({ + wcag: { + criteria: '2.5.1', + technique: ['G215', 'G216'] + } + }); + test.fail(); +}); + + + +/* + +- criteria: 2.5.1 + techniques: [G215, G216] + +- criteria: 2.5.8 + techniques: [C42] + +- criteria: 3.2.1 + techniques: [G107] + +- criteria: 4.1.2 + techniques: [ARIA4, ARIA5, ARIA16] + + */ \ No newline at end of file diff --git a/src/il-carousel/README.md b/src/il-carousel/il-carousel.spec.md similarity index 93% rename from src/il-carousel/README.md rename to src/il-carousel/il-carousel.spec.md index 44ff8ad7..758bcb28 100644 --- a/src/il-carousel/README.md +++ b/src/il-carousel/il-carousel.spec.md @@ -24,7 +24,7 @@ This markup would produce: The basic controls consist of: -* Two arrows to the left and right of the current slide which rewind or advance the carousel, respectively +* Two arrows to the left and right of the current slide which rewind or advance the carousel, respectively * A series of buttons, one for each slide in the carousel, which indicate the current slide and advance the carousel directly to their respective slides ## Autoplay @@ -38,7 +38,7 @@ Adding the `autoplay` attribute causes the carousel to automatically advance to Autoplay introduces 2 changes to the carousel controls: * a play/pause toggle which allows autoplay to be stopped and resumed -* the button representing the current slide expands to indicate the time until the next slide +* the button representing the current slide expands to indicate the time until the next slide Screenshot of a carousel with autoplay enabled diff --git a/src/il-carousel/il-carousel.yml b/src/il-carousel/il-carousel.spec.yml similarity index 100% rename from src/il-carousel/il-carousel.yml rename to src/il-carousel/il-carousel.spec.yml diff --git a/src/il-carousel/il-carousel.wcag.yml b/src/il-carousel/il-carousel.wcag.yml deleted file mode 100644 index 377bcc9b..00000000 --- a/src/il-carousel/il-carousel.wcag.yml +++ /dev/null @@ -1,66 +0,0 @@ -- criteria: 1.1.1 - techniques: [H36] - -- criteria: 1.3.1 - techniques: [G115] - -- criteria: 1.3.2 - techniques: [C6] - -- criteria: 1.3.3 - techniques: [G96] - -- criteria: 1.3.4 - -- criteria: 1.4.1 - techniques: [C15] - -- criteria: 1.4.3 - techniques: [G18, G145] - -- criteria: 1.4.4 - techniques: [C14, G179] - -- criteria: 1.4.10 - techniques: [C32, C37] - -- criteria: 1.4.11 - techniques: [G207, G18, G145] - -- criteria: 2.1.1 - techniques: [G202, SCR35] - -- criteria: 2.1.2 - techniques: [G21] - -- criteria: 2.2.1 - techniques: [G4, G198] - -- criteria: 2.2.2 - techniques: [G4] - -- criteria: 2.3.3 - techniques: [C39] - -- criteria: 2.4.3 - techniques: [G59] - -- criteria: 2.4.6 - techniques: [G130, G131] - -- criteria: 2.4.7 - techniques: [G149, C15, G195] - -- criteria: 2.5.1 - techniques: [G215, G216] - -- criteria: 2.5.8 - techniques: [C42] - -- criteria: 3.2.1 - techniques: [G107] - -- criteria: 4.1.2 - techniques: [ARIA4, ARIA5, ARIA16] - - diff --git a/src/il-main-nav/il-main-nav.spec.js b/src/il-main-nav/il-main-nav.spec.js new file mode 100644 index 00000000..c8410b7d --- /dev/null +++ b/src/il-main-nav/il-main-nav.spec.js @@ -0,0 +1,20 @@ +/* + +appearance + nav bar when header is in full mode + accordion when header is in compact mode + +using a mouse + +using a keyboard + +Navigation link + mouse + + keyboard + +Navigation section toggle + +Navigation section link + + */ \ No newline at end of file diff --git a/src/il-nav-section/il-nav-section.spec.js b/src/il-nav-section/il-nav-section.spec.js new file mode 100644 index 00000000..65574e96 --- /dev/null +++ b/src/il-nav-section/il-nav-section.spec.js @@ -0,0 +1,8 @@ +/* + + + + + + + */ \ No newline at end of file