@brightspace-ui/core 3.64.3 → 3.65.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -47,8 +47,8 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
47
47
 
48
48
  | Property | Type | Description |
49
49
  |--|--|--|
50
+ | `aria-label` | String | Label to provide more context for screen reader users when the link text is not enough |
50
51
  | `href` | String, required | URL or URL fragment of the link |
51
- | `aria-label` | String | Sets an accessible label |
52
52
  | `download` | Boolean | Download a URL instead of navigating to it |
53
53
  | `main` | Boolean | Whether to apply the "main" link style |
54
54
  | `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |
@@ -56,14 +56,6 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
56
56
  | `target` | String | Where to display the linked URL |
57
57
  <!-- docs: end hidden content -->
58
58
 
59
- ### Accessibility Properties
60
-
61
- To make your usage of `d2l-link` accessible, use the following property when applicable:
62
-
63
- | Attribute | Description |
64
- |--|--|
65
- | `aria-label` | Use when text in link does not provide enough context. |
66
-
67
59
  ## Applying link styles to native anchor elements
68
60
 
69
61
  Alternately, you can apply link styles to a native `<a>` element by importing the styles and placing the `d2l-link` CSS class on the element.
@@ -91,3 +83,8 @@ Alternately, you can apply link styles to a native `<a>` element by importing th
91
83
  ```
92
84
 
93
85
  Add the `d2l-link-main` or `d2l-link-small` CSS classes to the `<a>` element to apply those styles.
86
+
87
+ ## Accessibility
88
+ - The `d2l-link` component follows the W3C's best practices for the [Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/)
89
+ - When `target` is set to `_blank`, the `d2l-link` component follows [WCAG technique G201](https://www.w3.org/TR/WCAG20-TECHS/G201.html), and gives users an advanced warning that interacting with the link will open it in a new window
90
+ - While this is simply read out to screen reader users, it is also visually represented by the `new-window` icon
@@ -58,7 +58,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
58
58
  static get properties() {
59
59
  return {
60
60
  /**
61
- * Sets an accessible label
61
+ * ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough
62
62
  * @type {string}
63
63
  */
64
64
  ariaLabel: { type: String, attribute: 'aria-label' },
@@ -7806,7 +7806,7 @@
7806
7806
  "attributes": [
7807
7807
  {
7808
7808
  "name": "aria-label",
7809
- "description": "Sets an accessible label",
7809
+ "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
7810
7810
  "type": "string"
7811
7811
  },
7812
7812
  {
@@ -7848,7 +7848,7 @@
7848
7848
  {
7849
7849
  "name": "ariaLabel",
7850
7850
  "attribute": "aria-label",
7851
- "description": "Sets an accessible label",
7851
+ "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
7852
7852
  "type": "string"
7853
7853
  },
7854
7854
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.64.3",
3
+ "version": "3.65.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",