Skip to content

Commit 4e232b7

Browse files
jordanjones243jordanjones243
committed
feat: add slot for custom aria-label #96 
1 parent 0cd9cfb commit 4e232b7

File tree

10 files changed

+96
-65
lines changed

10 files changed

+96
-65
lines changed

‎apiExamples/ariaLabelSlots.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<auro-carousel centerSelected>
2+
<span slot="ariaLabel">My Carousel</span>
3+
<span slot="ariaLabel.scroll.left">My custom scroll left text</span>
4+
<span slot="ariaLabel.scroll.right">My custom scroll right text</span>
5+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
6+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
7+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
8+
<auro-pane date="2020-10-13" price="$435"></auro-pane>
9+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
10+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
11+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
12+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
13+
<auro-pane date="2020-10-18" selected price="$435"></auro-pane>
14+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
15+
<auro-pane date="2020-10-20" price="$435"></auro-pane>
16+
<auro-pane date="2020-10-21" price="$435"></auro-pane>
17+
<auro-pane date="2020-10-22" price="$435"></auro-pane>
18+
<auro-pane date="2020-10-23" price="$435"></auro-pane>
19+
<auro-pane date="2020-10-24" price="$435"></auro-pane>
20+
<auro-pane date="2020-10-25" price="$435"></auro-pane>
21+
<auro-pane date="2020-10-26" price="$435"></auro-pane>
22+
<auro-pane date="2020-10-27" price="$435"></auro-pane>
23+
</auro-carousel>

‎apiExamples/label.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎docs/api.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ The auro-carousel component displays a group of elements in a scrollable contain
88
|------------------|------------------|-----------|---------|--------------------------------------------------|
99
| `centerSelected` | `centerSelected` | `String` | | Apply to outer auro-carousel element to automatically center the selected node on UI render. |
1010
| `displayArrows` | `displayArrows` | `Boolean` | | Forces left and right navigation to stick in DOM regardless of content width |
11-
| `label` | `label` | `String` | | The accessible name for the carousel. Logs a console warning if not set. |
11+
| `label` | `label` | `String` | | DEPRECATED - Use `ariaLabel` slot instead. |
1212
| `scrollDistance` | `scrollDistance` | `Number` | 300 | How many pixels to scroll the carousel when the shoulder buttons are triggered. |
1313

1414
## Methods
@@ -29,9 +29,12 @@ The auro-carousel component displays a group of elements in a scrollable contain
2929

3030
## Slots
3131

32-
| Name | Description |
33-
|------|------------------------------|
34-
| | the elements in the carousel |
32+
| Name | Description |
33+
|--------------------------|--------------------------------------------------|
34+
| | the elements in the carousel |
35+
| `ariaLabel` | Text to give an accessible name to the carousel. |
36+
| `ariaLabel.scroll.left` | Text to give an accessible name to the left scroll button. |
37+
| `ariaLabel.scroll.right` | Text to give an accessible name to the right scroll button. |
3538

3639
## CSS Shadow Parts
3740

‎docs/partials/api.md‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,6 @@ Using the `displayArrows` attribute will persistently show the left and right ar
5252

5353
</auro-accordion>
5454

55-
#### `label`
56-
57-
The accessible name for the carousel. Logs a console warning if not set.
58-
59-
<div class="exampleWrapper">
60-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
61-
<!-- AURO-GENERATED-CONTENT:END -->
62-
</div>
63-
<auro-accordion alignRight>
64-
<span slot="trigger">See code</span>
65-
66-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/label.html) -->
67-
<!-- AURO-GENERATED-CONTENT:END -->
68-
69-
</auro-accordion>
70-
7155
#### `scrollDistance`
7256

7357
How many pixels to scroll the carousel when the shoulder buttons are triggered.
@@ -132,6 +116,7 @@ Used for all elements inside the scrolling carousel.
132116
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
133117
<!-- AURO-GENERATED-CONTENT:END -->
134118
</div>
119+
135120
<auro-accordion alignRight>
136121
<span slot="trigger">See code</span>
137122

@@ -140,6 +125,25 @@ Used for all elements inside the scrolling carousel.
140125

141126
</auro-accordion>
142127

128+
#### aria label slots
129+
130+
Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots to customize the accessible names for the carousel container and the left and right scroll buttons.
131+
132+
**Note:** Do not use the `aria-label` attribute on the `auro-carousel` element itself. This will be ignored in favor of the `ariaLabel` slot.
133+
134+
<div class="exampleWrapper">
135+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
136+
<!-- AURO-GENERATED-CONTENT:END -->
137+
</div>
138+
139+
<auro-accordion alignRight>
140+
<span slot="trigger">See code</span>
141+
142+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlots.html) -->
143+
<!-- AURO-GENERATED-CONTENT:END -->
144+
145+
</auro-accordion>
146+
143147
### Theme Support
144148

145149
The component may be restyled using the following code sample and changing the values of the following token(s).

‎package-lock.json‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424
"lit": "^3.3.1"
2525
},
2626
"devDependencies": {
27-
"@aurodesignsystem/auro-button": "^12.0.0",
28-
"@aurodesignsystem/auro-icon": "^9.0.0",
29-
"@aurodesignsystem/auro-library": "^5.5.3",
30-
"@aurodesignsystem/design-tokens": "^8.5.0",
31-
"@aurodesignsystem/webcorestylesheets": "^10.1.1",
27+
"@aurodesignsystem/auro-button": "^12.2.0",
3228
"@aurodesignsystem/auro-cli": "^3.0.4",
3329
"@aurodesignsystem/auro-config": "^1.3.0",
30+
"@aurodesignsystem/auro-icon": "^9.1.0",
31+
"@aurodesignsystem/auro-library": "^5.5.4",
32+
"@aurodesignsystem/design-tokens": "^8.5.0",
33+
"@aurodesignsystem/webcorestylesheets": "^10.1.1",
3434
"husky": "^9.1.7"
3535
},
3636
"browserslist": [
@@ -43,7 +43,12 @@
4343
"publishConfig": {
4444
"access": "public"
4545
},
46-
"keywords": ["alaska airlines", "auro", "design system", "web components"],
46+
"keywords": [
47+
"alaska airlines",
48+
"auro",
49+
"design system",
50+
"web components"
51+
],
4752
"scripts": {
4853
"build": "auro build",
4954
"build:version": "node ./scripts/version.mjs",

‎src/auro-carousel.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ import tokensCss from "./styles/tokens.scss";
3131
*
3232
* @attr {Boolean} displayArrows - Forces left and right navigation to stick in DOM regardless of content width
3333
* @attr {Number} scrollDistance - How many pixels to scroll the carousel when the shoulder buttons are triggered.
34-
* @attr {String} label - The accessible name for the carousel. Logs a console warning if not set.
34+
* @attr {String} label - DEPRECATED - Use `ariaLabel` slot instead.
3535
* @attr {String} centerSelected - Apply to outer auro-carousel element to automatically center the selected node on UI render.
3636
*
3737
* @slot - the elements in the carousel
38+
* @slot ariaLabel - Text to give an accessible name to the carousel.
39+
* @slot ariaLabel.scroll.left - Text to give an accessible name to the left scroll button.
40+
* @slot ariaLabel.scroll.right - Text to give an accessible name to the right scroll button.
3841
*
3942
* @csspart wrapper - The primary root HTML element of the component.
4043
*
@@ -364,17 +367,22 @@ export class AuroCarousel extends LitElement {
364367
};
365368

366369
return html`
370+
<!-- Hidden slots for aria labels -->
371+
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
372+
<slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
373+
<slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
374+
367375
<div class="breakpointDetector"></div>
368376
<div role="group"
369-
aria-label="${ifDefined(this.label)}"
377+
aria-label="${ifDefined(this.runtimeUtils.getSlotText(this, 'ariaLabel') || this.label)}"
370378
aria-roledescription="carousel"
371379
class="${classMap(carouselClassMap)}"
372380
part="wrapper"
373381
@scroll=${() => this.setScrollFlags(true)} >
374382
375383
<!-- Left button -->
376384
<${this.buttonTag}
377-
aria-label="Scroll Left"
385+
aria-label="${ifDefined(this.runtimeUtils.getSlotText(this, 'ariaLabel.scroll.left') || 'Scroll Left')}"
378386
shape="circle"
379387
variant="secondary"
380388
@click=${() => this.handleClick(false)}
@@ -390,7 +398,7 @@ export class AuroCarousel extends LitElement {
390398
391399
<!-- Right button -->
392400
<${this.buttonTag}
393-
aria-label="Scroll Right"
401+
aria-label="${ifDefined(this.runtimeUtils.getSlotText(this, 'ariaLabel.scroll.right') || 'Scroll Right')}"
394402
shape="circle"
395403
variant="secondary"
396404
@click=${() => this.handleClick(true)}

‎src/buttonVersion.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export default '12.0.0'
1+
export default '12.2.0'

‎src/iconVersion.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export default '9.0.0'
1+
export default '9.1.0'

‎test/auro-carousel.test.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe("auro-carousel", () => {
2323

2424
it("sets label on the carousel", async () => {
2525
const el = await getDefaultFixture();
26-
expect(el.carousel.getAttribute("aria-label")).to.equal("buttons");
26+
expect(el.carousel.getAttribute("aria-label")).to.equal("Custom Label");
2727
});
2828

2929
it("sticks the navigation arrows properly", async () => {
@@ -151,13 +151,15 @@ describe("auro-carousel", () => {
151151
});
152152

153153
async function getCenterSelectedFixture() {
154+
// Aria Label slot moved to middle due to failing tests from render timing issues
154155
return fixture(html`
155-
<auro-carousel label="buttons" centerSelected>
156+
<auro-carousel centerSelected>
156157
<button style="width: 200px">Button 1</button>
157158
<button style="width: 200px">Button 2</button>
158159
<button style="width: 200px">Button 3</button>
159160
<button style="width: 200px">Button 4</button>
160161
<button style="width: 200px">Button 5</button>
162+
<span slot="ariaLabel">Custom Label</span>
161163
<button style="width: 200px" selected>Button 6</button>
162164
<button style="width: 200px">Button 7</button>
163165
<button style="width: 200px">Button 8</button>
@@ -168,14 +170,16 @@ describe("auro-carousel", () => {
168170
}
169171

170172
async function getDefaultFixture(scrollDistance, noLabel = false) {
171-
// set width on component to force it to overflow
173+
// Set width on component to force it to overflow
174+
// Aria Label slot moved to middle due to failing tests from render timing issues
172175
const el = await fixture(html`
173-
<auro-carousel label=${noLabel ? "" : "buttons"} scrollDistance=${ifDefined(scrollDistance)} style="width: 200px;">
176+
<auro-carousel scrollDistance=${ifDefined(scrollDistance)} style="width: 200px;">
174177
<button>Button 1</button>
175178
<button>Button 2</button>
176179
<button>Button 3</button>
177180
<button>Button 4</button>
178181
<button>Button 5</button>
182+
<span slot="ariaLabel">Custom Label</span>
179183
<button>Button 6</button>
180184
<button>Button 7</button>
181185
<button>Button 8</button>

0 commit comments

Comments
 (0)