@brightspace-ui/core 3.64.3 → 3.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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
|
package/components/link/link.js
CHANGED
@@ -58,7 +58,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
|
|
58
58
|
static get properties() {
|
59
59
|
return {
|
60
60
|
/**
|
61
|
-
*
|
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' },
|
package/custom-elements.json
CHANGED
@@ -7806,7 +7806,7 @@
|
|
7806
7806
|
"attributes": [
|
7807
7807
|
{
|
7808
7808
|
"name": "aria-label",
|
7809
|
-
"description": "
|
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": "
|
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.
|
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",
|