Skip to content

Commit

Permalink
Update the aria-label value for the expand/collapse button on the nav…
Browse files Browse the repository at this point in the history 
…igation menu (#1684)

* Catch and rewrite expand/collapse button behaviour

* Set the aria-label before attaching an event

* Add logic for completely closed menu button

* Changed the logic to set the aria-label for the button

Co-authored-by: Nickii Miaro <miaronkirote@gmail.com>
  • Loading branch information
@musale @Mnickii
musale and Mnickii authored May 20, 2022
1 parent 4936d97 commit e9f9bd7
Showing 1 changed file with 78 additions and 38 deletions.
116 changes: 78 additions & 38 deletions .storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="manifest" href="manifest.json" />
<script>
navigator.serviceWorker.register("sw.js")
navigator.serviceWorker.register("sw.js");
</script>

<footer class="storybook-footer">
Expand All @@ -18,11 +18,11 @@

var config = {
autoCapture: {
lineage: true
lineage: true,
},
coreData: {
appId: 'JS:GraphToolkit'
}
appId: "JS:GraphToolkit",
},
};
awa.init(config);

Expand All @@ -36,60 +36,58 @@
const textStyle = 'margin-left: 0.25rem; font-size: 0.75rem;';
const linkContentStyle = 'display: flex;';

const sidebarHeader = document.getElementsByClassName('sidebar-header');
const sidebarHeader = document.getElementsByClassName("sidebar-header");
if (sidebarHeader.length === 0) {
// sidebar container has not loaded in the page yet, retry in 500ms
setTimeout(addUsefulLinks, 500);
return false;
}

// This is a fix for an accessibility issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/1085
sidebarHeader[0].innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' +
'Microsoft Graph Toolkit Playground</a>' +
'</h1>';
sidebarHeader[0].innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' + "Microsoft Graph Toolkit Playground</a>" + "</h1>";

const sidebarNode = sidebarHeader[0].parentNode;

// Github
const ghSvgPath = "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
const githubSvgElem = createSvg(ghSvgPath);

const githubText = document.createElement('span');
const githubText = document.createElement("span");
githubText.style = textStyle;
githubText.innerText = 'GitHub';
githubText.innerText = "GitHub";

const repoLinkContent = document.createElement('span');
const repoLinkContent = document.createElement("span");
repoLinkContent.style = linkContentStyle;
repoLinkContent.append(githubSvgElem, githubText);

const repoLink = document.createElement('a');
repoLink.href = 'https://aka.ms/mgt';
repoLink.target = '_blank';
const repoLink = document.createElement("a");
repoLink.href = "https://aka.ms/mgt";
repoLink.target = "_blank";
repoLink.style = linkStyle;
repoLink.appendChild(repoLinkContent);

// npm
const npmSvgPath = "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z";
const npmSvgElem = createSvg(npmSvgPath);

const npmText = document.createElement('span');
const npmText = document.createElement("span");
npmText.style = textStyle;
npmText.innerText = 'npm';
npmText.innerText = "npm";

const npmLinkContent = document.createElement('span');
const npmLinkContent = document.createElement("span");
npmLinkContent.style = linkContentStyle;
npmLinkContent.append(npmSvgElem, npmText);

const npmLink = document.createElement('a');
npmLink.href = 'https://www.npmjs.com/package/@microsoft/mgt';
npmLink.target = '_blank';
npmLink.style = linkStyle + ' margin-left: 0.5rem;';
const npmLink = document.createElement("a");
npmLink.href = "https://www.npmjs.com/package/@microsoft/mgt";
npmLink.target = "_blank";
npmLink.style = linkStyle + " margin-left: 0.5rem;";
npmLink.appendChild(npmLinkContent);

// links container
const usefulLinksContainer = document.createElement('div');
usefulLinksContainer.id = 'useful-links';
usefulLinksContainer.style = 'display: flex; margin: 1rem 0rem; font-size: 0.875rem;';
const usefulLinksContainer = document.createElement("div");
usefulLinksContainer.id = "useful-links";
usefulLinksContainer.style = "display: flex; margin: 1rem 0rem; font-size: 0.875rem;";

usefulLinksContainer.append(repoLink, npmLink);

Expand All @@ -98,7 +96,7 @@
const searchBox = document.querySelector(".search-field");
if (searchBox) {
searchBox.setAttribute("name", "Find Components");
searchBox.setAttribute("aria-expanded", "false")
searchBox.setAttribute("aria-expanded", "false");

const searchInput = searchBox.querySelector("input");
if (searchInput) {
Expand Down Expand Up @@ -150,6 +148,38 @@
}
}

function setEventOnMenuClick() {
const expandCollapseMenu = document.getElementsByClassName("css-ulso1l");
if (expandCollapseMenu) {
for (let i = 0; i < expandCollapseMenu.length; i++) {
const menu = expandCollapseMenu[i];
menu.addEventListener("click", setArialLabelForExpandCollapseBtn, { useCapture: true });
}
}
}
function setArialLabelForExpandCollapseBtn() {
const expandCollapseBtns = document.getElementsByClassName("css-rl1ij0");
if (expandCollapseBtns) {
for (let i = 0; i < expandCollapseBtns.length; i++) {
const button = expandCollapseBtns[i];
setButtonAriaLabel(button);
button.addEventListener("click", btnUpDown, { useCapture: true });
}
}
}

function btnUpDown(event) {
const element = event.target; // button when using tabs to navigate, svg when using mouse.
setButtonAriaLabel(element);
}

function setButtonAriaLabel(element) {
const dataExpandedState = element.getAttribute("data-expanded");
const ariaValue = dataExpandedState === "true" ? "expand" : "collapse";
element.setAttribute("aria-label", ariaValue);
}

setEventOnMenuClick();
setListItemsAc11y();
}

Expand Down Expand Up @@ -178,47 +208,55 @@
const pr = window.devicePixelRatio;
// Add an event listener to get any zoom changes based on
// on the resolution.
matchMedia(`(resolution: ${pr}dppx)`).addEventListener("change", updateOnZoom, { once: true });
matchMedia(`(resolution: ${pr}dppx)`).addEventListener("change", updateOnZoom, {
once: true,
});

if ((pr * 100).toFixed(0) > 110) {
return setUpBottomBar();
}
return;
}
};

// Whenever the browser is resized, also get the footer height and set the
// bottom bar value offset to it.
const updateOnWindowResize = () => {
if (windowWidth.innerWidth != windowWidth) {
setUpBottomBar();
}
window.addEventListener("resize", updateOnWindowResize, { once: true });
window.addEventListener("resize", updateOnWindowResize, {
once: true,
});
return;
}
};

const updateOnOrientationChange = () => {
const orientation = window.matchMedia("(orientation: landscape)");
updateBottomBar();
// This is just to detect whether there has been an orientation change
// By default we expect to be in landscape so just in case it's something
// else, we still do the updates.
orientation.addEventListener("change", updateOnOrientationChange, { once: true });
}
orientation.addEventListener("change", updateOnOrientationChange, {
once: true,
});
};

const setUpBottomBar = () => {
const pr = (window.devicePixelRatio * 100).toFixed(0)
const pr = (window.devicePixelRatio * 100).toFixed(0);
// This is a special case. When zooming in, in the first instance the content
// has to make the side bar disappear, the content takes a while to load. This
// makes the bottom bar unavailable hence it's hidden when the content loads.
// This delay should allow that to happen so that we are able to do get the
// bottom bar when we query it after 3 seconds.
if (pr > 190 && pr < 310) {
sleep(3000).then(() => {
updateBottomBar();
}).catch(() => { })
sleep(3000)
.then(() => {
updateBottomBar();
})
.catch(() => { });
}
return updateBottomBar();
}
};

function updateBottomBar() {
const footer = document.getElementsByClassName("storybook-footer")[0];
Expand All @@ -230,7 +268,7 @@
}

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
return new Promise((resolve) => setTimeout(resolve, ms));
}

updateOnZoom();
Expand All @@ -246,6 +284,7 @@
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {

#root,
svg,
svg>path,
Expand Down Expand Up @@ -280,6 +319,7 @@
}

@media (forced-colors: active) and (prefers-color-scheme: light) {

#root,
svg,
svg>path,
Expand Down Expand Up @@ -377,6 +417,6 @@
}

.css-1en6m26 {
color: #616159 !important
color: #616159 !important;
}
</style>

0 comments on commit e9f9bd7

Please sign in to comment.