Skip to content

Commit

Permalink
feat(block): add required label property and mark heading as optional
Browse files Browse the repository at this point in the history
  • Loading branch information
anveshmekala committed Nov 15, 2024
1 parent 08a2064 commit 83e7f77
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 2 deletions.
14 changes: 14 additions & 0 deletions packages/calcite-components/src/components/block/block.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,20 @@ describe("calcite-block", () => {
expect(contentPadding).toEqual(overrideStyle);
});

it("should set aria-label", async () => {
const label = "Spatial";
const page = await newE2EPage();
await page.setContent(
html`<calcite-block label=${label} open>
<calcite-notice open>
<div slot="message">Use layer effects sparingly, for emphasis</div>
</calcite-notice>
</calcite-block>`,
);
const article = await page.find(`calcite-block >>> article`);
expect(article.getAttribute("aria-label")).toEqual(label);
});

describe("translation support", () => {
t9n("calcite-block");
});
Expand Down
12 changes: 10 additions & 2 deletions packages/calcite-components/src/components/block/block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@ export class Block
/**
* The component header text.
*
* @required
*/
@property() heading: string;

Expand All @@ -109,6 +108,13 @@ export class Block
/** When `true`, a busy indicator is displayed. */
@property({ reflect: true }) loading = false;

/**
* Specifies an accessible name for the component.
*
* @required
*/
@property() label: string;

/** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */
@property() menuFlipPlacements: FlipPlacement[];

Expand Down Expand Up @@ -353,6 +359,7 @@ export class Block
collapsible,
loading,
open,
label,
heading,
messages,
description,
Expand All @@ -378,7 +385,7 @@ export class Block

const headerNode = (
<div class={CSS.headerContainer}>
{this.dragHandle ? <calcite-handle label={heading} /> : null}
{this.dragHandle ? <calcite-handle label={heading || label} /> : null}
{collapsible ? (
<button
aria-controls={IDS.content}
Expand Down Expand Up @@ -422,6 +429,7 @@ export class Block
return (
<InteractiveContainer disabled={this.disabled}>
<article
aria-label={label}
ariaBusy={loading}
class={{
[CSS.container]: true,
Expand Down

0 comments on commit 83e7f77

Please sign in to comment.