fix: ensure radio buttons are accessible - www.armandphilippot.com - The frontend of my personal website.

summary refs log tree commit diff stats

path: root/src/components/atoms/loaders/progress-bar.stories.tsx

diff options

author	Armand Philippot <git@armandphilippot.com>	2022-06-02 18:46:59 +0200
committer	Armand Philippot <git@armandphilippot.com>	2022-06-02 18:46:59 +0200
commit	7a875655daf9dfa0b4803e287ae59b37ffe4f342 (patch)
tree	985f9542a07205038bcc45ae80bfd9606cb9f3e2 /src/components/atoms/loaders/progress-bar.stories.tsx
parent	329d5ab3f49d663f40a965af4d29eaa38b9a4a86 (diff)

fix: ensure radio buttons are accessible

It seems I cannot use the SVG title as label. So I removed the title and added a visually hidden span to set the radio buttons label.

Diffstat (limited to 'src/components/atoms/loaders/progress-bar.stories.tsx')

0 files changed, 0 insertions, 0 deletions

id='n133' href='#n133'>133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156

(function (Prism) {
  /**
   * @param {string} name
   * @returns {RegExp}
   */
  function headerValueOf(name) {
    return RegExp('(^(?:' + name + '):[ \t]*(?![ \t]))[^]+', 'i');
  }

  Prism.languages.http = {
    'request-line': {
      pattern:
        /^(?:CONNECT|DELETE|GET|HEAD|OPTIONS|PATCH|POST|PRI|PUT|SEARCH|TRACE)\s(?:https?:\/\/|\/)\S*\sHTTP\/[\d.]+/m,
      inside: {
        // HTTP Method
        method: {
          pattern: /^[A-Z]+\b/,
          alias: 'property',
        },
        // Request Target e.g. http://example.com, /path/to/file
        'request-target': {
          pattern: /^(\s)(?:https?:\/\/|\/)\S*(?=\s)/,
          lookbehind: true,
          alias: 'url',
          inside: Prism.languages.uri,
        },
        // HTTP Version
        'http-version': {
          pattern: /^(\s)HTTP\/[\d.]+/,
          lookbehind: true,
          alias: 'property',
        },
      },
    },
    'response-status': {
      pattern: /^HTTP\/[\d.]+ \d+ .+/m,
      inside: {
        // HTTP Version
        'http-version': {
          pattern: /^HTTP\/[\d.]+/,
          alias: 'property',
        },
        // Status Code
        'status-code': {
          pattern: /^(\s)\d+(?=\s)/,
          lookbehind: true,
          alias: 'number',
        },
        // Reason Phrase
        'reason-phrase': {
          pattern: /^(\s).+/,
          lookbehind: true,
          alias: 'string',
        },
      },
    },
    header: {
      pattern: /^[\w-]+:.+(?:(?:\r\n?|\n)[ \t].+)*/m,
      inside: {
        'header-value': [
          {
            pattern: headerValueOf(/Content-Security-Policy/.source),
            lookbehind: true,
            alias: ['csp', 'languages-csp'],
            inside: Prism.languages.csp,
          },
          {
            pattern: headerValueOf(/Public-Key-Pins(?:-Report-Only)?/.source),
            lookbehind: true,
            alias: ['hpkp', 'languages-hpkp'],
            inside: Prism.languages.hpkp,
          },
          {
            pattern: headerValueOf(/Strict-Transport-Security/.source),
            lookbehind: true,
            alias: ['hsts', 'languages-hsts'],
            inside: Prism.languages.hsts,
          },
          {
            pattern: headerValueOf(/[^:]+/.source),
            lookbehind: true,
          },
        ],
        'header-name': {
          pattern: /^[^:]+/,
          alias: 'keyword',
        },
        punctuation: /^:/,
      },
    },
  };

  // Create a mapping of Content-Type headers to language definitions
  var langs = Prism.languages;
  var httpLanguages = {
    'application/javascript': langs.javascript,
    'application/json': langs.json || langs.javascript,
    'application/xml': langs.xml,
    'text/xml': langs.xml,
    'text/html': langs.html,
    'text/css': langs.css,
    'text/plain': langs.plain,
  };

  // Declare which types can also be suffixes
  var suffixTypes = {
    'application/json': true,
    'application/xml': true,
  };

  /**
   * Returns a pattern for the given content type which matches it and any type which has it as a suffix.
   *
   * @param {string} contentType
   * @returns {string}
   */
  function getSuffixPattern(contentType) {
    var suffix = contentType.replace(/^[a-z]+\//, '');
    var suffixPattern = '\\w+/(?:[\\w.-]+\\+)+' + suffix + '(?![+\\w.-])';
    return '(?:' + contentType + '|' + suffixPattern + ')';
  }

  // Insert each content type parser that has its associated language
  // currently loaded.
  var options;
  for (var contentType in httpLanguages) {
    if (httpLanguages[contentType]) {
      options = options || {};

      var pattern = suffixTypes[contentType]
        ? getSuffixPattern(contentType)
        : contentType;
      options[contentType.replace(/\//g, '-')] = {
        pattern: RegExp(
          '(' +
            /content-type:\s*/.source +
            pattern +
            /(?:(?:\r\n?|\n)[\w-].*)*(?:\r(?:\n|(?!\n))|\n)/.source +
            ')' +
            // This is a little interesting:
            // The HTTP format spec required 1 empty line before the body to make everything unambiguous.
            // However, when writing code by hand (e.g. to display on a website) people can forget about this,
            // so we want to be liberal here. We will allow the empty line to be omitted if the first line of
            // the body does not start with a [\w-] character (as headers do).
            /[^ \t\w-][\s\S]*/.source,
          'i'
        ),
        lookbehind: true,
        inside: httpLanguages[contentType],
      };
    }
  }
  if (options) {
    Prism.languages.insertBefore('http', 'header', options);
  }
})(Prism);